generator-jhipster 7.7.0 → 7.9.0

package/generators/client/templates/react/webpack/webpack.prod.js.ejs

@@ -36,12 +36,12 @@ module.exports = async () => webpackMerge(await commonConfig({ env: ENV }), {
   // devtool: 'source-map', // Enable source maps. Please note that this will slow down the build
   mode: ENV,
   entry: {
-    main: './<%= MAIN_SRC_DIR %>app/index'
+    main: './<%= MAIN_SRC_DIR %>app/<%= microfrontend ? 'main' : 'index' %>'
   },
   output: {
     path: utils.root('<%= DIST_DIR %>'),
-    filename: 'app/[name].[contenthash].bundle.js',
-    chunkFilename: 'app/[name].[chunkhash].chunk.js'
+    filename: '[name].[contenthash:8].js',
+    chunkFilename: '[name].[chunkhash:8].chunk.js'
   },
   module: {
     rules: [
@@ -77,30 +77,40 @@ module.exports = async () => webpackMerge(await commonConfig({ env: ENV }), {
     runtimeChunk: false,
     minimizer: [
       new TerserPlugin({
-        parallel: true,
-        // sourceMap: true, // Enable source maps. Please note that this will slow down the build
         terserOptions: {
-          ecma: 6,
-          toplevel: true,
-          module: true,
+          parse: {
+            // We want terser to parse ecma 8 code. However, we don't want it
+            // to apply any minification steps that turns valid ecma 5 code
+            // into invalid ecma 5 code. This is why the 'compress' and 'output'
+            // sections only apply transformations that are ecma 5 safe
+            // https://github.com/facebook/create-react-app/pull/4234
+            ecma: 8,
+          },
           compress: {
+            ecma: 5,
             warnings: false,
-            ecma: 6,
-            module: true,
-            toplevel: true
+            // Disabled because of an issue with Uglify breaking seemingly valid code:
+            // https://github.com/facebook/create-react-app/issues/2376
+            // Pending further investigation:
+            // https://github.com/mishoo/UglifyJS2/issues/2011
+            comparisons: false,
+            // Disabled because of an issue with Terser breaking valid code:
+            // https://github.com/facebook/create-react-app/issues/5250
+            // Pending further investigation:
+            // https://github.com/terser-js/terser/issues/120
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
           },
           output: {
-              comments: false,
-              beautify: false,
-              indent_level: 2,
-              ecma: 6
+            ecma: 5,
+            comments: false,
+            // Turned on because emoji and regex is not minified properly using default
+            // https://github.com/facebook/create-react-app/issues/2488
+            ascii_only: true,
           },
-          mangle: {
-            keep_fnames: true,
-            module: true,
-            toplevel: true
-          }
-        }
+        },
       }),
       new CssMinimizerPlugin({
         parallel: true,

package/generators/client/templates/vue/.eslintrc.js.ejs

@@ -30,7 +30,16 @@ module.exports = {
   ],
   parserOptions: {
     ecmaVersion: 2020,
-    project: ['./tsconfig.spec.json'],
+    project: [
+      './tsconfig.json',
+      './tsconfig.spec.json',
+<%_ if (cypressTests) { _%>
+      './<%= CLIENT_TEST_SRC_DIR %>cypress/tsconfig.json',
+<%_ } _%>
+<%_ if (protractorTests) { _%>
+      './tsconfig.e2e.json',
+<%_ } _%>
+    ]
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

package/generators/client/templates/vue/package.json

@@ -1,72 +1,72 @@
 {
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.3.0",
-    "@fortawesome/free-solid-svg-icons": "6.0.0",
-    "@fortawesome/vue-fontawesome": "2.0.6",
-    "axios": "0.26.0",
-    "bootstrap": "4.6.1",
-    "bootstrap-vue": "2.21.2",
-    "bootswatch": "5.1.3",
-    "swagger-ui-dist": "4.5.2",
-    "vue": "2.6.14",
+    "@fortawesome/fontawesome-svg-core": "6.1.2",
+    "@fortawesome/free-solid-svg-icons": "6.1.2",
+    "@fortawesome/vue-fontawesome": "2.0.8",
+    "axios": "0.27.2",
+    "bootstrap": "4.6.2",
+    "bootstrap-vue": "2.22.0",
+    "bootswatch": "5.2.0",
+    "vue": "2.7.5",
     "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
-    "vue-router": "3.5.3",
-    "vue-i18n": "8.27.0",
+    "vue-router": "3.5.4",
+    "vue-i18n": "8.27.2",
     "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.7",
     "vuex": "3.6.2",
     "vue2-filters": "0.14.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "1.1.0",
-    "@types/jest": "27.4.1",
-    "@types/node": "16.11.26",
-    "@types/sinon": "10.0.11",
+    "@rushstack/eslint-patch": "1.1.4",
+    "@types/jest": "28.1.6",
+    "@types/node": "16.11.47",
+    "@types/sinon": "10.0.13",
     "@types/vuelidate": "0.7.15",
     "@vue/eslint-config-prettier": "7.0.0",
     "@vue/eslint-config-typescript": "10.0.0",
-    "@vue/vue2-jest": "27.0.0-alpha.3",
+    "@vue/vue2-jest": "28.0.1",
     "@vue/test-utils": "1.3.0",
-    "axios-mock-adapter": "1.20.0",
-    "autoprefixer": "10.4.2",
+    "axios-mock-adapter": "1.21.1",
+    "autoprefixer": "10.4.8",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.4",
-    "css-loader": "6.6.0",
-    "css-minimizer-webpack-plugin": "3.4.1",
+    "copy-webpack-plugin": "11.0.0",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
     "folder-hash": "4.0.2",
-    "fork-ts-checker-webpack-plugin": "7.2.1",
+    "fork-ts-checker-webpack-plugin": "7.2.13",
     "html-webpack-plugin": "5.5.0",
-    "jest": "27.5.1",
-    "jest-junit": "13.0.0",
+    "jest": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-junit": "14.0.0",
     "jest-serializer-vue": "2.0.2",
     "jest-sonar-reporter": "2.0.0",
     "jest-vue-preprocessor": "1.7.1",
     "merge-jsons-webpack-plugin": "2.0.1",
-    "mini-css-extract-plugin": "2.5.3",
+    "mini-css-extract-plugin": "2.6.1",
     "numeral": "2.0.6",
-    "postcss-import": "14.0.2",
-    "postcss-loader": "6.2.1",
+    "postcss-import": "14.1.0",
+    "postcss-loader": "7.0.1",
     "postcss-url": "10.1.3",
     "rimraf": "3.0.2",
-    "sass": "1.49.9",
-    "sass-loader": "12.6.0",
-    "sinon": "13.0.1",
-    "terser-webpack-plugin": "5.3.1",
-    "ts-jest": "27.1.3",
-    "ts-loader": "9.2.6",
-    "eslint": "8.9.0",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-vue": "8.5.0",
-    "typescript": "4.5.5",
-    "webpack": "5.69.1",
+    "sass": "1.54.0",
+    "sass-loader": "13.0.2",
+    "sinon": "14.0.0",
+    "terser-webpack-plugin": "5.3.3",
+    "ts-jest": "28.0.7",
+    "ts-loader": "9.3.1",
+    "eslint": "8.20.0",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-vue": "8.7.1",
+    "typescript": "4.7.4",
+    "webpack": "5.74.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.7.4",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.9.3",
     "webpack-merge": "5.8.0",
-    "workbox-webpack-plugin": "6.5.0",
+    "workbox-webpack-plugin": "6.5.4",
     "vue-jest": "3.0.7",
-    "vue-loader": "15.9.8"
+    "vue-loader": "15.10.0"
   }
 }

package/generators/client/templates/vue/package.json.ejs

@@ -36,7 +36,6 @@
     "bootswatch": "<%= dependabotPackageJson.dependencies['bootswatch'] %>",
 <%_ } _%>
     "dayjs": "<%= dependabotPackageJson.dependencies['dayjs'] %>",
-    "swagger-ui-dist": "<%= dependabotPackageJson.dependencies['swagger-ui-dist'] %>",
 <%_ if (communicationSpringWebsocket) { _%>
     "sockjs-client": "1.5.2",
     "@stomp/rx-stomp": "1.1.4",
@@ -90,10 +89,10 @@
 } _%>
     "html-webpack-plugin": "<%= dependabotPackageJson.devDependencies['html-webpack-plugin'] %>",
     "jest": "<%= dependabotPackageJson.devDependencies['jest'] %>",
+    "jest-environment-jsdom": "<%= dependabotPackageJson.devDependencies['jest-environment-jsdom'] %>",
     "jest-junit": "<%= dependabotPackageJson.devDependencies['jest-junit'] %>",
     "jest-serializer-vue": "<%= dependabotPackageJson.devDependencies['jest-serializer-vue'] %>",
     "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
-    "jest-vue-preprocessor": "<%= dependabotPackageJson.devDependencies['jest-vue-preprocessor'] %>",
 <%_ if (enableTranslation) { _%>
     "folder-hash": "<%= dependabotPackageJson.devDependencies['folder-hash'] %>",
     "merge-jsons-webpack-plugin": "<%= dependabotPackageJson.devDependencies['merge-jsons-webpack-plugin'] %>",
@@ -115,6 +114,7 @@
     "sass": "<%= dependabotPackageJson.devDependencies['sass'] %>",
     "sass-loader": "<%= dependabotPackageJson.devDependencies['sass-loader'] %>",
     "sinon": "<%= dependabotPackageJson.devDependencies['sinon'] %>",
+    "swagger-ui-dist": "<%= dependabotPackageJson.devDependencies['swagger-ui-dist'] %>",
     "terser-webpack-plugin": "<%= dependabotPackageJson.devDependencies['terser-webpack-plugin'] %>",
     "ts-jest": "<%= dependabotPackageJson.devDependencies['ts-jest'] %>",
     "ts-loader": "<%= dependabotPackageJson.devDependencies['ts-loader'] %>",
@@ -168,8 +168,8 @@
 <%_ } _%>
 <%_ if (cypressTests) { _%>
     "e2e:cypress:headed": "<%= clientPackageManager %> run e2e:cypress -- --headed",
-    "e2e:cypress": "cypress run --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
-    "cypress": "cypress open",
+    "e2e:cypress": "cypress run --e2e --browser chrome --record ${CYPRESS_ENABLE_RECORD:-false}",
+    "cypress": "cypress open --e2e",
 <%_ } _%>
 <%_ if (protractorTests) { _%>
     "postinstall": "<%= clientPackageManager %> run e2e:update-webdriver",

package/generators/client/templates/vue/src/main/webapp/app/account/login-form/login-form.component.ts.ejs

@@ -5,7 +5,7 @@ import AccountService from '@/account/account.service';
 @Component({
   watch: {
     $route() {
-      this.$root.$emit('bv::hide::modal', 'login-page');
+      (this.$root as any).$emit('bv::hide::modal', 'login-page');
     }
   }
 })
@@ -51,7 +51,7 @@ export default class LoginForm extends Vue {
       }).then(() => {
 <%_ } _%>
         this.authenticationError = false;
-        this.$root.$emit('bv::hide::modal','login-page');
+        (this.$root as any).$emit('bv::hide::modal','login-page');
         this.accountService().retrieveAccount();
       }).catch(()=> {
         this.authenticationError = true;

package/generators/client/templates/vue/src/main/webapp/app/admin/metrics/metrics.vue.ejs

@@ -78,7 +78,7 @@
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-4">Start time</div>
-          <div class="col-md-8 text-right">{{ metrics.processMetrics['process.start.time'] | formatMillis }}</div>
+          <div class="col-md-8 text-right">{{ metrics.processMetrics['process.start.time'] | formatDate }}</div>
         </div>
         <div class="row" v-if="!updatingMetrics">
           <div class="col-md-9">Process CPU usage</div>

package/generators/client/templates/vue/src/main/webapp/app/admin/user-management/user-management-edit.component.ts.ejs

@@ -83,7 +83,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
     if (this.userAccount.id) {
       this.userManagementService().update(this.userAccount).then((res) => {
         this.returnToList();
-        this.$root.$bvToast.toast(this.getMessageFromHeader(res).toString(), {
+        (this.$root as any).$bvToast.toast(this.getMessageFromHeader(res).toString(), {
           toaster: 'b-toaster-top-center',
           title: 'Info',
           variant: 'info',
@@ -100,7 +100,7 @@ export default class <%=jhiPrefixCapitalized%>UserManagementEdit extends Vue {
 <%_ } _%>
       this.userManagementService().create(this.userAccount).then(res => {
         this.returnToList();
-        this.$root.$bvToast.toast(this.getMessageFromHeader(res).toString(), {
+        (this.$root as any).$bvToast.toast(this.getMessageFromHeader(res).toString(), {
           toaster: 'b-toaster-top-center',
           title: 'Success',
           variant: 'success',

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -11,8 +11,8 @@ import EntitiesMenu from '@/entities/entities-menu.vue';
   components: {
     'entities-menu': EntitiesMenu,
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-  <%_ for (const remote of remotes) { _%>
-    '<%= remote.lowercaseBaseName %>-menu': () => import('@<%= remote.lowercaseBaseName %>/entities-menu'),
+  <%_ for (const microfrontend of microfrontends) { _%>
+    '<%= microfrontend.lowercaseBaseName %>-menu': () => import('@<%= microfrontend.lowercaseBaseName %>/entities-menu'),
   <%_ } _%>
 <%_ } _%>
   },
@@ -58,6 +58,7 @@ export default class JhiNavbar extends Vue {
     return this.loginService().logout().then(response => {
       this.$store.commit('logout');
   <%_ if (authenticationTypeOauth2) { _%>
+      window.location.href = response.data.logoutUrl;
       const next = response.data?.logoutUrl ?? '/';
       if (this.$route.path !== next) {
         return this.$router.push(next);
@@ -93,7 +94,9 @@ export default class JhiNavbar extends Vue {
 
   public hasAnyAuthority(authorities: any): boolean {
     this.accountService().hasAnyAuthorityAndCheckAuth(authorities).then(value => {
-      this.hasAnyAuthorityValues[authorities] = value;
+      if (this.hasAnyAuthorityValues[authorities] !== value) {
+        this.hasAnyAuthorityValues = { ...this.hasAnyAuthorityValues, [authorities]: value };
+      }
     });
     return this.hasAnyAuthorityValues[authorities] ?? false;
   }

package/generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.vue.ejs

@@ -35,8 +35,8 @@
           </span>
           <entities-menu></entities-menu>
 <%_ if (applicationTypeGateway && microfrontend) { _%>
-  <%_ for (const remote of remotes) { _%>
-          <<%= remote.lowercaseBaseName %>-menu></<%= remote.lowercaseBaseName %>-menu>
+  <%_ for (const microfrontend of microfrontends) { _%>
+          <<%= microfrontend.lowercaseBaseName %>-menu></<%= microfrontend.lowercaseBaseName %>-menu>
   <%_ } _%>
 <%_ } _%>
           <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->

package/generators/client/templates/vue/src/main/webapp/app/shared/alert/alert.service.ts.ejs

@@ -7,7 +7,7 @@ export default class AlertService {
     <%_ } else {_%>
     const alertMessage = message;
     <%_ } _%>
-    instance.$root.$bvToast.toast(alertMessage.toString(), {
+    (instance.$root as any).$bvToast.toast(alertMessage.toString(), {
       toaster: 'b-toaster-top-center',
       title: 'Error',
       variant: 'danger',

package/generators/client/templates/vue/src/main/webapp/app/shared/data/data-utils.service.ts.ejs

@@ -67,7 +67,7 @@ export default class JhiDataUtils extends Vue {
     const fileReader = new FileReader();
     fileReader.readAsDataURL(file);
     fileReader.onload = (e: any) => {
-      const base64Data = e.target.result.substr(e.target.result.indexOf('base64,') + 'base64,'.length);
+      const base64Data = e.target.result.substring(e.target.result.indexOf('base64,') + 'base64,'.length);
       cb(base64Data);
     };
   }

package/generators/client/templates/vue/src/main/webapp/app/shared/date/filters.ts.ejs

@@ -13,12 +13,6 @@ export function initFilters() {
         }
         return '';
     });
-    Vue.filter('formatMillis', value => {
-        if (value) {
-          return dayjs(value).format(DATE_TIME_FORMAT);
-        }
-        return '';
-    });
     Vue.filter('duration', value => {
         if (value) {
           const formatted = dayjs.duration(value).humanize();

package/generators/client/templates/vue/src/test/javascript/jest.conf.js.ejs

@@ -1,4 +1,4 @@
-const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const { pathsToModuleNameMapper } = require('ts-jest');
 const config = require('../../../webpack/config');
 const { compilerOptions: { paths = {}, baseUrl = './' } } = require('../../../tsconfig.json');
 
@@ -15,6 +15,7 @@ module.exports = {
     '^.+\\.tsx?$': 'ts-jest',
   },
   moduleNameMapper: {
+    rxjs: '<rootDir>/node_modules/rxjs/dist/bundles/rxjs.umd.js',
     '^@/(.*)$': '<rootDir>/<%= CLIENT_MAIN_SRC_DIR %>app/$1',
     ...pathsToModuleNameMapper(paths, { prefix: `<rootDir>/${baseUrl}/` }),
 <%_ if (applicationTypeGateway && microfrontend) { _%>
@@ -27,7 +28,7 @@ module.exports = {
   ],
   testResultsProcessor: 'jest-sonar-reporter',
   testMatch: ['<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/**/@(*.)@(spec.ts)'],
-  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
+  snapshotSerializers: ['jest-serializer-vue'],
   globals: {
 <%_ if (enableTranslation) { _%>
     I18N_HASH: 'generated_hash',
@@ -41,7 +42,11 @@ module.exports = {
   coverageThreshold: {
     global: {
       statements: 80,
+<%_ if (microfrontend) { _%>
+      branches: 57,
+<%_ } else { _%>
       branches: 60,
+<%_ } _%>
       functions: 70,
       lines: 80,
     },

package/generators/client/templates/vue/src/test/javascript/spec/app/account/register/register.component.spec.ts.ejs

@@ -58,7 +58,7 @@ describe('Register Component', () => {
 
   it('should open login modal when asked to', () => {
     let called = false;
-    register.$root.$on('bv::show::modal', () => {
+    (register.$root as any).$on('bv::show::modal', () => {
       called = true;
     });
     register.openLogin();

package/generators/client/templates/vue/tsconfig.json.ejs

@@ -11,9 +11,6 @@
         "emitDecoratorMetadata": true,
         "experimentalDecorators": true,
         "lib": ["es7", "dom"],
-        "typeRoots": [
-            "node_modules/@types"
-        ],
         "paths": {
             "@/*": ["*"]
         },
@@ -24,5 +21,5 @@
     "include": [
         "<%= CLIENT_MAIN_SRC_DIR %>app"
     ],
-    "exclude": ["node_modules"<% if (cypressTests) { %>,"<%= CLIENT_TEST_SRC_DIR %>cypress"<% } %>]
+    "exclude": ["node_modules"]
 }

package/generators/client/templates/vue/tsconfig.spec.json.ejs

@@ -31,7 +31,7 @@
     "types": ["jest", "node"]
   },
   "include": [
-    "<%= CLIENT_MAIN_SRC_DIR %>app/**/*",
-    "<%= CLIENT_TEST_SRC_DIR %>spec/**/*"
+    "<%= CLIENT_MAIN_SRC_DIR %>app",
+    "<%= CLIENT_TEST_SRC_DIR %>spec"
   ]
 }

package/generators/client/templates/vue/webpack/webpack.common.js.ejs

@@ -149,12 +149,16 @@ module.exports = async (env, options) => {
         new CopyWebpackPlugin({
           patterns: [
             {
-              context: './node_modules/swagger-ui-dist/',
+              // https://github.com/swagger-api/swagger-ui/blob/v4.6.1/swagger-ui-dist-package/README.md
+              context: require('swagger-ui-dist').getAbsoluteFSPath(),
               from: '*.{js,css,html,png}',
               to: 'swagger-ui/',
               globOptions: { ignore: ['**/index.html'] },
             },
-            { from: './node_modules/axios/dist/axios.min.js', to: 'swagger-ui/' },
+            {
+              from: require.resolve('axios/dist/axios.min.js'), 
+              to: 'swagger-ui/',
+            },
             { from: './<%= CLIENT_MAIN_SRC_DIR %>swagger-ui/', to: 'swagger-ui/' },
             { from: './<%= CLIENT_MAIN_SRC_DIR %>content/', to: 'content/' },
             { from: './<%= CLIENT_MAIN_SRC_DIR %>favicon.ico', to: 'favicon.ico' },

package/generators/client/templates/vue/webpack/webpack.dev.js.ejs

@@ -30,6 +30,10 @@ module.exports = (env, options) => {
     },
     // cheap-module-eval-source-map is faster for development
     devtool: config.dev.devtool,
+    output: {
+      filename: 'app/[contenthash].bundle.js',
+      chunkFilename: 'app/[id].chunk.js'
+    },
     optimization: {
       moduleIds: 'named',
     },

package/generators/client/templates/vue/webpack/webpack.prod.js.ejs

@@ -36,6 +36,10 @@ const webpackConfig = {
     })
   },
   devtool: config.build.productionSourceMap ? config.build.devtool : false,
+  output: {
+    filename: 'app/[name].[contenthash].bundle.js',
+    chunkFilename: 'app/[id].[chunkhash].chunk.js'
+  },
   optimization: {
     moduleIds: 'deterministic',
     minimizer: [
@@ -90,7 +94,10 @@ const webpackConfig = {
       extractComments: false,
     }),
     // extract css into its own file
-    new MiniCssExtractPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'content/[name].[contenthash].css',
+      chunkFilename: 'content/[id].css'
+    }),
     // keep module.id stable when vendor modules does not change
     new ForkTsCheckerWebpackPlugin(
       {

package/generators/client/transform-angular.cjs

@@ -0,0 +1,117 @@
+/**
+ * Copyright 2013-2022 the original author or authors from the JHipster project.
+ *
+ * This file is part of the JHipster project, see https://www.jhipster.tech/
+ * for more information.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const PLACEHOLDER_REGEX = /(?:placeholder|title)=['|"](\{\{\s?['|"]([a-zA-Z0-9.\-_]+)['|"]\s?\|\s?translate\s?\}\})['|"]/.source;
+
+const JHI_TRANSLATE_REGEX = /(\n?\s*[a-z][a-zA-Z]*Translate="[a-zA-Z0-9 +{}'_!?.]+")/.source;
+const TRANSLATE_VALUES_REGEX = /(\n?\s*\[translateValues\]="\{(?:(?!\}").)*?\}")/.source;
+const TRANSLATE_REGEX = [JHI_TRANSLATE_REGEX, TRANSLATE_VALUES_REGEX].join('|');
+
+function getTranslationValue(generator, key, data) {
+  return (generator._getClientTranslation && generator._getClientTranslation(key, data)) || undefined;
+}
+
+/**
+ * Replace translation key with translation values
+ *
+ * @param {import('../generator-base.js')} generator
+ * @param {string} content
+ * @param {string} regexSource regular expression to find keys
+ * @param {object} [options]
+ * @param {number} [options.keyIndex]
+ * @param {number} [options.replacementIndex]
+ * @returns {string}
+ */
+function replaceTranslationKeysWithText(generator, content, regexSource, { keyIndex = 1, replacementIndex = 1 } = {}) {
+  const regex = new RegExp(regexSource, 'g');
+  let match = regex.exec(content);
+  while (match !== null) {
+    // match is now the next match, in array form and our key is at index 1, index 1 is replace target.
+    const key = match[keyIndex];
+    const target = match[replacementIndex];
+    const translation = getTranslationValue(generator, key) || generator.baseName;
+    content = content.replace(target, translation);
+    match = regex.exec(content);
+  }
+
+  return content;
+}
+
+/**
+ *
+ * @param {import('../generator-base.js')} generator reference to the generator
+ * @param {string} content html content
+ * @param {string} jsKey
+ * @returns string with pageTitle replaced
+ */
+function replaceJSTranslation(generator, content, jsKey) {
+  return replaceTranslationKeysWithText(generator, content, `${jsKey}\\s?:\\s?['|"]([a-zA-Z0-9.\\-_]+)['|"]`);
+}
+
+/**
+ *
+ * @param {import('../generator-base.js')} generator reference to the generator
+ * @param {string} content html content
+ * @returns string with pageTitle replaced
+ */
+function replacePageTitles(generator, content) {
+  return replaceJSTranslation(generator, content, 'pageTitle');
+}
+
+/**
+ * @type {function(import('../generator-base.js'), string): string}
+ */
+function replacePlaceholders(generator, content) {
+  return replaceTranslationKeysWithText(generator, content, PLACEHOLDER_REGEX, { keyIndex: 2 });
+}
+
+/**
+ * Replace error code translation key with translated message
+ *
+ * @type {function(import('../generator-base.js'), string): string}
+ */
+function replaceErrorMessage(generator, content) {
+  return replaceJSTranslation(generator, content, 'errorMessage');
+}
+
+/**
+ * Replace and cleanup translations.
+ *
+ * @type {import('../generator-base.js').EditFileCallback}
+ * @this {import('../generator-base.js')}
+ */
+function replaceAngularTranslations(content, filePath) {
+  if (this.enableTranslation) {
+    return content;
+  }
+  if (/\.html$/.test(filePath)) {
+    content = content.replace(new RegExp(TRANSLATE_REGEX, 'g'), '');
+    content = replacePlaceholders(this, content);
+  }
+  if (/(:?route|module)\.ts$/.test(filePath)) {
+    content = replacePageTitles(this, content);
+  }
+  if (/error\.route\.ts$/.test(filePath)) {
+    content = replaceErrorMessage(this, content);
+  }
+  return content;
+}
+
+module.exports = {
+  replaceAngularTranslations,
+};