generator-jhipster 7.6.0 → 7.8.1

package/generators/client/files-angular.js

@@ -516,7 +516,16 @@ const files = {
   ],
 };
 
+function cleanup() {
+  if (!this.clientFrameworkAngular) return;
+
+  if (this.isJhipsterVersionLessThan('7.6.1')) {
+    this.removeFile(`${CLIENT_MAIN_SRC_DIR}content/scss/rtl.scss`);
+  }
+}
+
 module.exports = {
+  cleanup,
   writeFiles,
   files,
 };

package/generators/client/files-common.js

@@ -20,11 +20,7 @@ const constants = require('../generator-constants');
 
 const { CLIENT_MAIN_SRC_DIR } = constants;
 
-module.exports = {
-  writeFiles,
-};
-
-const commonFiles = {
+const files = {
   common: [
     {
       templates: ['.eslintignore', 'README.md.jhi.client', `${CLIENT_MAIN_SRC_DIR}manifest.webapp`],
@@ -62,18 +58,17 @@ const commonFiles = {
       ],
     },
     {
-      condition: generator => generator.enableI18nRTL && !generator.clientFrameworkReact,
+      condition: generator => generator.enableI18nRTL && !generator.clientFrameworkReact && !generator.clientFrameworkAngular,
       path: CLIENT_MAIN_SRC_DIR,
       templates: ['content/scss/rtl.scss'],
     },
     {
-      condition: generator => generator.microfrontend && generator.clientFrameworkVue,
+      condition: generator => generator.microfrontend && (generator.clientFrameworkVue || generator.clientFrameworkReact),
       templates: ['webpack/webpack.microfrontend.js.jhi'],
     },
   ],
   swagger: [
     {
-      condition: generator => !generator.applicationTypeMicroservice || generator.microfrontend,
       path: CLIENT_MAIN_SRC_DIR,
       templates: ['swagger-ui/index.html', { file: 'swagger-ui/dist/images/throbber.gif', method: 'copy' }],
     },
@@ -81,5 +76,10 @@ const commonFiles = {
 };
 
 function writeFiles() {
-  return this.writeFilesToDisk(commonFiles, 'common');
+  return this.writeFilesToDisk(files, 'common');
 }
+
+module.exports = {
+  files,
+  writeFiles,
+};

package/generators/client/files-react.js

@@ -76,7 +76,7 @@ const files = {
     {
       condition: generator => generator.enableTranslation,
       path: REACT_DIR,
-      templates: ['config/translation.ts'],
+      templates: ['config/translation.ts', 'config/translation-middleware.ts'],
     },
     {
       condition: generator => generator.websocket === SPRING_WEBSOCKET,
@@ -91,7 +91,11 @@ const files = {
   reactEntities: [
     {
       path: REACT_DIR,
-      templates: [{ file: 'entities/index.tsx', method: 'processJsx' }],
+      templates: [
+        'entities/reducers.ts',
+        { file: 'entities/menu.tsx', method: 'processJsx' },
+        { file: 'entities/routes.tsx', method: 'processJsx' },
+      ],
     },
   ],
   reactMain: [
@@ -263,6 +267,22 @@ const files = {
       ],
     },
   ],
+  microfrontend: [
+    {
+      condition: generator => generator.microfrontend,
+      templates: ['webpack/webpack.microfrontend.js.jhi.react'],
+    },
+    {
+      condition: generator => generator.microfrontend,
+      path: REACT_DIR,
+      templates: ['main.tsx', 'shared/error/error-loading.tsx'],
+    },
+    {
+      condition: generator => generator.microfrontend && generator.applicationTypeGateway,
+      path: CLIENT_MAIN_SRC_DIR,
+      templates: ['microfrontends/entities-menu.tsx', 'microfrontends/entities-routes.tsx'],
+    },
+  ],
   clientTestFw: [
     {
       path: REACT_DIR,
@@ -349,6 +369,9 @@ function cleanup() {
   if (this.isJhipsterVersionLessThan('7.4.1')) {
     this.removeFile('.npmrc');
   }
+  if (this.isJhipsterVersionLessThan('7.7.1')) {
+    this.removeFile(`${CLIENT_MAIN_SRC_DIR}app/entities/index.tsx`);
+  }
 }
 
 function writeFiles() {

package/generators/client/files-vue.js

@@ -24,12 +24,6 @@ const { GATEWAY } = require('../../jdl/jhipster/application-types');
 
 const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, VUE_DIR } = constants;
 
-module.exports = {
-  cleanup,
-  writeFiles,
-  customizeFiles,
-};
-
 const vueFiles = {
   common: [
     {
@@ -428,3 +422,10 @@ function customizeFiles() {
     }
   }
 }
+
+module.exports = {
+  files: vueFiles,
+  cleanup,
+  writeFiles,
+  customizeFiles,
+};

package/generators/client/index.js

@@ -35,7 +35,7 @@ const {
 } = require('../../lib/constants/priorities.cjs').compat;
 
 const prompts = require('./prompts');
-const writeAngularFiles = require('./files-angular').writeFiles;
+const { cleanup: cleanupAngular, writeFiles: writeAngularFiles } = require('./files-angular');
 const { cleanup: cleanupReact, writeFiles: writeReactFiles } = require('./files-react');
 const { cleanup: cleanupVue, writeFiles: writeVueFiles, customizeFiles: customizeVueFiles } = require('./files-vue');
 const writeCommonFiles = require('./files-common').writeFiles;
@@ -341,6 +341,7 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
     return {
       cleanupReact,
       cleanupVue,
+      cleanupAngular,
 
       write() {
         if (this.skipClient) return;
@@ -407,7 +408,7 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
         if (this.clientFrameworkAngular) {
           const conditional = this.applicationTypeMicroservice ? "targetOptions.target === 'serve' ? {} : " : '';
           this.addWebpackConfig(`${conditional}require('./webpack.microfrontend')(config, options, targetOptions)`);
-        } else if (this.clientFrameworkVue) {
+        } else if (this.clientFrameworkVue || this.clientFrameworkReact) {
           this.addWebpackConfig("require('./webpack.microfrontend')({ serve: options.env.WEBPACK_SERVE })");
         } else {
           throw new Error(`Client framework ${this.clientFramework} doesn't support microfrontends`);

package/generators/client/needle-api/needle-client-react.js

@@ -29,20 +29,20 @@ module.exports = class extends needleClientBase {
 
   addEntityToMenu(routerName, enableTranslation, entityTranslationKeyMenu, entityTranslationValue = _.startCase(routerName)) {
     const errorMessage = `${chalk.yellow('Reference to ') + routerName} ${chalk.yellow('not added to menu.\n')}`;
-    const entityMenuPath = `${this.CLIENT_MAIN_SRC_DIR}app/shared/layout/menus/entities.tsx`;
+    const entityMenuPath = `${this.CLIENT_MAIN_SRC_DIR}app/entities/menu.tsx`;
     const entityEntry =
       // prettier-ignore
       this.generator.stripMargin(`|<MenuItem icon="asterisk" to="/${routerName}">
-                        |      ${enableTranslation ? `<Translate contentKey="global.menu.entities.${entityTranslationKeyMenu}" />` : `${entityTranslationValue}`}
-                        |    </MenuItem>`);
+                        |        ${enableTranslation ? `<Translate contentKey="global.menu.entities.${entityTranslationKeyMenu}" />` : `${entityTranslationValue}`}
+                        |      </MenuItem>`);
     const rewriteFileModel = this.generateFileModel(entityMenuPath, 'jhipster-needle-add-entity-to-menu', entityEntry);
 
     this.addBlockContentToFile(rewriteFileModel, errorMessage);
   }
 
   addEntityToModule(entityInstance, entityClass, entityName, entityFolderName, entityFileName) {
-    const indexModulePath = `${this.CLIENT_MAIN_SRC_DIR}app/entities/index.tsx`;
-    const indexReducerPath = `${this.CLIENT_MAIN_SRC_DIR}app/shared/reducers/index.ts`;
+    const indexModulePath = `${this.CLIENT_MAIN_SRC_DIR}app/entities/routes.tsx`;
+    const indexReducerPath = `${this.CLIENT_MAIN_SRC_DIR}app/entities/reducers.ts`;
 
     const errorMessage = path =>
       `${chalk.yellow('Reference to ') + entityInstance + entityClass + entityFolderName + entityFileName} ${chalk.yellow(
@@ -59,15 +59,18 @@ module.exports = class extends needleClientBase {
     const indexAddRoutePathRewriteFileModel = this.generateFileModel(
       indexModulePath,
       'jhipster-needle-add-route-path',
-      this.generator.stripMargin(`|<ErrorBoundaryRoute path={\`\${match.url}${entityFileName}\`} component={${entityName}} />`)
+      this.generator.stripMargin(
+        `|<ErrorBoundaryRoute path={\`\${match.url}${
+          this.generator.microfrontend && this.generator.applicationTypeMicroservice ? '/' : ''
+        }${entityFileName}\`} component={${entityName}} />`
+      )
     );
     this.addBlockContentToFile(indexAddRoutePathRewriteFileModel, errorMessage(indexModulePath));
 
     const reducerAddImportRewriteFileModel = this.generateFileModel(
       indexReducerPath,
       'jhipster-needle-add-reducer-import', // prettier-ignore
-      this.generator.stripMargin(`|// prettier-ignore
-                    |import ${entityInstance} from 'app/entities/${entityFolderName}/${entityFileName}.reducer';`)
+      this.generator.stripMargin(`import ${entityInstance} from 'app/entities/${entityFolderName}/${entityFileName}.reducer';`)
     );
     this.addBlockContentToFile(reducerAddImportRewriteFileModel, errorMessage(indexReducerPath));
 

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

@@ -51,15 +51,7 @@
               "<%= MAIN_SRC_DIR %>content",
               "<%= MAIN_SRC_DIR %>favicon.ico",
               "<%= MAIN_SRC_DIR %>manifest.webapp",
-              "<%= MAIN_SRC_DIR %>robots.txt",
-              {
-                "glob": "*.{js,css,html,png}",
-                "input": "./node_modules/swagger-ui-dist",
-                "output": "swagger-ui",
-                "ignore": ["**/index.html"]
-              },
-              { "glob": "axios.min.js", "input": "./node_modules/axios/dist", "output": "swagger-ui" },
-              { "glob": "**/*", "input": "<%= MAIN_SRC_DIR %>swagger-ui/", "output": "swagger-ui" }
+              "<%= MAIN_SRC_DIR %>robots.txt"
             ],
             "styles": ["<%= MAIN_SRC_DIR %>content/scss/vendor.scss", "<%= MAIN_SRC_DIR %>content/scss/global.scss"],
             "scripts": []
@@ -128,7 +120,7 @@
   "cli": {
     "cache": {
       "enabled": true,
-      "path": "./<%= BUILD_DIR %>",
+      "path": "./<%= BUILD_DIR %>angular/",
       "environment": "all"
     },
     "packageManager": "<%= clientPackageManager %>"

package/generators/client/templates/angular/jest.conf.js.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-const { pathsToModuleNameMapper } = require('ts-jest/utils')
+const { pathsToModuleNameMapper } = require('ts-jest')
 
 const { compilerOptions: { paths = {}, baseUrl = './' } } = require('./tsconfig.json');
 const environment = require('./webpack/environment');

package/generators/client/templates/angular/package.json

@@ -1,46 +1,48 @@
 {
   "dependencies": {
-    "@angular/common": "13.1.3",
-    "bootstrap": "4.6.1",
-    "@fortawesome/angular-fontawesome": "0.10.1",
-    "@fortawesome/fontawesome-svg-core": "1.2.36",
-    "@fortawesome/free-solid-svg-icons": "5.15.4",
-    "@ng-bootstrap/ng-bootstrap": "11.0.0",
+    "@angular/common": "13.3.1",
+    "@fortawesome/angular-fontawesome": "0.10.2",
+    "@fortawesome/fontawesome-svg-core": "6.1.1",
+    "@fortawesome/free-solid-svg-icons": "6.1.1",
+    "@ng-bootstrap/ng-bootstrap": "12.0.1",
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
+    "@popperjs/core": "2.11.5",
+    "bootstrap": "5.1.3",
+    "bootswatch": "5.1.3",
     "ngx-cookie-service": "13.1.2",
-    "ngx-infinite-scroll": "10.0.1",
+    "ngx-infinite-scroll": "13.0.1",
     "ngx-webstorage": "9.0.0",
-    "rxjs": "7.5.2",
-    "swagger-ui-dist": "4.2.1",
+    "rxjs": "7.5.5",
     "tslib": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular/cli": "13.1.2",
-    "@angular-builders/custom-webpack": "13.0.0",
-    "@angular-builders/jest": "13.0.2",
-    "@angular-eslint/eslint-plugin": "13.0.1",
-    "@types/node": "16.11.21",
-    "@types/jest": "27.4.0",
-    "@typescript-eslint/eslint-plugin": "5.10.0",
-    "browser-sync": "2.27.7",
+    "@angular/cli": "13.3.1",
+    "@angular-builders/custom-webpack": "13.1.0",
+    "@angular-builders/jest": "13.0.3",
+    "@angular-eslint/eslint-plugin": "13.2.0",
+    "@types/node": "16.11.26",
+    "@types/jest": "27.4.1",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "browser-sync": "2.27.9",
     "browser-sync-webpack-plugin": "2.3.0",
-    "copy-webpack-plugin": "10.2.1",
-    "eslint": "8.5.0",
-    "eslint-config-prettier": "8.3.0",
+    "copy-webpack-plugin": "10.2.4",
+    "eslint": "8.12.0",
+    "eslint-config-prettier": "8.5.0",
     "eslint-webpack-plugin": "3.1.1",
-    "folder-hash": "4.0.1",
-    "jest": "27.4.7",
-    "jest-preset-angular": "11.0.1",
+    "folder-hash": "4.0.2",
+    "jest": "27.5.1",
+    "jest-preset-angular": "11.1.1",
     "jest-date-mock": "1.0.8",
-    "jest-junit": "13.0.0",
+    "jest-junit": "13.1.0",
     "jest-sonar-reporter": "2.0.0",
     "merge-jsons-webpack-plugin": "2.0.1",
+    "postcss-rtlcss": "3.5.4",
     "rimraf": "3.0.2",
-    "ts-jest": "27.1.3",
-    "typescript": "4.5.4",
-    "webpack": "5.66.0",
+    "ts-jest": "27.1.4",
+    "typescript": "4.6.3",
+    "webpack": "5.71.0",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-merge": "5.8.0",
     "webpack-notifier": "1.15.0"

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

@@ -45,7 +45,7 @@
 <%_ } _%>
     "bootstrap": "<%= dependabotPackageJson.dependencies.bootstrap %>",
     <%_ if (!clientThemeNone) { _%>
-    "bootswatch": "<%= dependabotPackageJson.dependencies.bootstrap %>",
+    "bootswatch": "<%= dependabotPackageJson.dependencies.bootswatch %>",
     <%_ } _%>
     "dayjs": "<%= dependabotPackageJson.dependencies['dayjs'] %>",
     <%_ if (authenticationTypeSession && websocket === 'spring-websocket') { _%>
@@ -53,8 +53,8 @@
     <%_ } _%>
     "ngx-infinite-scroll": "<%= dependabotPackageJson.dependencies['ngx-infinite-scroll'] %>",
     "ngx-webstorage": "<%= dependabotPackageJson.dependencies['ngx-webstorage'] %>",
+    "@popperjs/core": "<%= dependabotPackageJson.dependencies['@popperjs/core'] %>",
     "rxjs": "<%= dependabotPackageJson.dependencies['rxjs'] %>",
-    "swagger-ui-dist": "<%= dependabotPackageJson.dependencies['swagger-ui-dist'] %>",
     <%_ if (websocket === 'spring-websocket') { _%>
     "sockjs-client": "1.5.0",
     "webstomp-client": "1.2.6",
@@ -122,7 +122,11 @@
     "jest-sonar-reporter": "<%= dependabotPackageJson.devDependencies['jest-sonar-reporter'] %>",
     "prettier": "<%= dependabotPackageJson.devDependencies['prettier'] %>",
     "prettier-plugin-packagejson": "<%= dependabotPackageJson.devDependencies['prettier-plugin-packagejson'] %>",
+<%_ if (enableI18nRTL) { _%>
+    "postcss-rtlcss": "<%= dependabotPackageJson.devDependencies['postcss-rtlcss'] %>",
+<%_ } _%>
     "rimraf": "<%= dependabotPackageJson.devDependencies['rimraf'] %>",
+    "swagger-ui-dist": "<%= dependabotPackageJson.devDependencies['swagger-ui-dist'] %>",
     "ts-jest": "<%= dependabotPackageJson.devDependencies['ts-jest'] %>",
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
     "webpack-bundle-analyzer": "<%= dependabotPackageJson.devDependencies['webpack-bundle-analyzer'] %>",

package/generators/client/templates/angular/src/main/webapp/app/account/activate/activate.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="activate.title">Activation</h1>
 

package/generators/client/templates/angular/src/main/webapp/app/account/password/password.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8" *ngIf="account$ | async as account">
       <h2 <%= jhiPrefix %>Translate="password.title" [translateValues]="{ username: account.login }">
         Password for [<strong>{{ account.login }}</strong>]
@@ -36,8 +36,8 @@
       </div>
 
       <form name="form" role="form" (ngSubmit)="changePassword()" [formGroup]="passwordForm">
-        <div class="form-group">
-          <label class="form-control-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label">Current password</label>
+        <div class="mb-3">
+          <label class="form-label" for="currentPassword" <%= jhiPrefix %>Translate="global.form.currentpassword.label">Current password</label>
           <input
             type="password"
             class="form-control"
@@ -64,8 +64,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+        <div class="mb-3">
+          <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
           <input
             type="password"
             class="form-control"
@@ -110,8 +110,8 @@
           <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+        <div class="mb-3">
+          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
           <input
             type="password"
             class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/password-reset/finish/password-reset-finish.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-4">
       <h1 <%= jhiPrefix %>Translate="reset.finish.title">Reset password</h1>
 
@@ -44,8 +44,8 @@
 
       <div *ngIf="key && !success">
         <form name="form" role="form" (ngSubmit)="finishReset()" [formGroup]="passwordForm">
-          <div class="form-group">
-            <label class="form-control-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+          <div class="mb-3">
+            <label class="form-label" for="newPassword" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
             <input
               type="password"
               class="form-control"
@@ -91,8 +91,8 @@
             <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="passwordForm.get('newPassword')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
           </div>
 
-          <div class="form-group">
-            <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+          <div class="mb-3">
+            <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
             <input
               type="password"
               class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/password-reset/init/password-reset-init.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="reset.request.title">Reset your password</h1>
 
@@ -32,8 +32,8 @@
       </div>
 
       <form *ngIf="!success" name="form" role="form" (ngSubmit)="requestReset()" [formGroup]="resetRequestForm">
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/register/register.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h1 <%= jhiPrefix %>Translate="register.title" data-cy="registerTitle">Registration</h1>
 
@@ -43,11 +43,11 @@
     </div>
   </div>
 
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <form name="form" role="form" (ngSubmit)="register()" [formGroup]="registerForm" *ngIf="!success">
-        <div class="form-group">
-          <label class="form-control-label" for="login" <%= jhiPrefix %>Translate="global.form.username.label">Username</label>
+        <div class="mb-3">
+          <label class="form-label" for="login" <%= jhiPrefix %>Translate="global.form.username.label">Username</label>
           <input
             type="text"
             class="form-control"
@@ -94,8 +94,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"
@@ -141,8 +141,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="password" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
+        <div class="mb-3">
+          <label class="form-label" for="password" <%= jhiPrefix %>Translate="global.form.newpassword.label">New password</label>
           <input
             type="password"
             class="form-control"
@@ -187,8 +187,8 @@
           <<%= jhiPrefixDashed %>-password-strength-bar [passwordToCheck]="registerForm.get('password')!.value"></<%= jhiPrefixDashed %>-password-strength-bar>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
+        <div class="mb-3">
+          <label class="form-label" for="confirmPassword" <%= jhiPrefix %>Translate="global.form.confirmpassword.label">New password confirmation</label>
           <input
             type="password"
             class="form-control"

package/generators/client/templates/angular/src/main/webapp/app/account/settings/settings.component.html.ejs

@@ -17,7 +17,7 @@
  limitations under the License.
 -%>
 <div>
-  <div class="row justify-content-center">
+  <div class="d-flex justify-content-center">
     <div class="col-md-8">
       <h2 <%= jhiPrefix %>Translate="settings.title" [translateValues]="{ username: account.login }" *ngIf="account">
         User settings for [<strong>{{ account.login }}</strong>]
@@ -30,8 +30,8 @@
       <<%= jhiPrefixDashed %>-alert-error></<%= jhiPrefixDashed %>-alert-error>
 
       <form name="form" role="form" (ngSubmit)="save()" [formGroup]="settingsForm" *ngIf="account" novalidate>
-        <div class="form-group">
-          <label class="form-control-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname">First Name</label>
+        <div class="mb-3">
+          <label class="form-label" for="firstName" <%= jhiPrefix %>Translate="settings.form.firstname">First Name</label>
           <input
             type="text"
             class="form-control"
@@ -74,8 +74,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="lastName" <%= jhiPrefix %>Translate="settings.form.lastname">Last Name</label>
+        <div class="mb-3">
+          <label class="form-label" for="lastName" <%= jhiPrefix %>Translate="settings.form.lastname">Last Name</label>
           <input
             type="text"
             class="form-control"
@@ -118,8 +118,8 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label class="form-control-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
+        <div class="mb-3">
+          <label class="form-label" for="email" <%= jhiPrefix %>Translate="global.form.email.label">Email</label>
           <input
             type="email"
             class="form-control"
@@ -166,7 +166,7 @@
         </div>
         <%_ if (enableTranslation) { _%>
 
-        <div class="form-group" *ngIf="languages && languages.length > 0">
+        <div class="mb-3" *ngIf="languages && languages.length > 0">
           <label for="langKey" <%= jhiPrefix %>Translate="settings.form.language">Language</label>
           <select class="form-control" id="langKey" name="langKey" formControlName="langKey" data-cy="langKey">
             <option *ngFor="let language of languages" [value]="language">{{ language | findLanguageFromKey }}</option>

package/generators/client/templates/angular/src/main/webapp/app/admin/configuration/configuration.component.html.ejs

@@ -42,7 +42,7 @@
           <div class="row" *ngFor="let property of bean.properties | keyvalue">
             <div class="col-md-4">{{ property.key }}</div>
             <div class="col-md-8">
-              <span class="float-right badge-secondary break">{{ property.value | json }}</span>
+              <span class="float-end bg-secondary break">{{ property.value | json }}</span>
             </div>
           </div>
         </td>
@@ -66,7 +66,7 @@
         <tr *ngFor="let property of propertySource.properties | keyvalue">
           <td class="break">{{ property.key }}</td>
           <td class="break">
-            <span class="float-right badge-secondary break">{{ property.value.value }}</span>
+            <span class="float-end bg-secondary break">{{ property.value.value }}</span>
           </td>
         </tr>
       </tbody>

package/generators/client/templates/angular/src/main/webapp/app/admin/gateway/gateway.component.html.ejs

@@ -20,7 +20,7 @@
   <h2>
     <span id="gateway-page-heading" <%= jhiPrefix %>Translate="gateway.title">Gateway</span>
 
-    <button class="btn btn-primary float-right" (click)="refresh()" (disabled)="updatingRoutes">
+    <button class="btn btn-primary float-end" (click)="refresh()" (disabled)="updatingRoutes">
       <fa-icon icon="sync"></fa-icon> <span <%= jhiPrefix %>Translate="gateway.refresh.button">Refresh</span>
     </button>
   </h2>
@@ -50,13 +50,13 @@
                 <tr *ngFor="let instance of route.serviceInstances">
                   <td><a href="{{ instance.uri }}" target="_blank">{{ instance.uri }}</a></td>
                   <td>
-                    <div *ngIf="instance.instanceInfo" class="badge badge-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">{{ instance.instanceInfo.status }}</div>
-                    <div *ngIf="!instance.instanceInfo" class="badge badge-warning">?</div>
+                    <div *ngIf="instance.instanceInfo" class="badge bg-{{ instance.instanceInfo.status === 'UP' ? 'success' : 'danger' }}">{{ instance.instanceInfo.status }}</div>
+                    <div *ngIf="!instance.instanceInfo" class="badge bg-warning">?</div>
                   </td>
                   <td>
                     <span *ngFor="let entry of (instance.metadata | keyvalue )">
-                      <span class="badge badge-default font-weight-normal">
-                        <span class="badge badge-pill badge-info font-weight-normal">{{ entry.key }}</span>
+                      <span class="badge bg-default fw-normal">
+                        <span class="badge rounded-pill bg-info fw-normal">{{ entry.key }}</span>
                         {{ entry.value }}
                       </span>
                     </span>

package/generators/client/templates/angular/src/main/webapp/app/admin/health/health.component.html.ejs

@@ -20,7 +20,7 @@
   <h2>
     <span id="health-page-heading" <%= jhiPrefix %>Translate="health.title" data-cy="healthPageHeading">Health Checks</span>
 
-    <button class="btn btn-primary float-right" (click)="refresh()">
+    <button class="btn btn-primary float-end" (click)="refresh()">
       <fa-icon icon="sync"></fa-icon> <span <%= jhiPrefix %>Translate="health.refresh.button">Refresh</span>
     </button>
   </h2>