generator-jhipster 7.1.0 → 7.4.0

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs

@@ -29,8 +29,8 @@ import { SortDirective } from './sort.directive';
   template: `
     <table>
       <thead>
-        <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="transition.bind(this)">
-          <th <%= jhiPrefix %>SortBy="name">ID<fa-icon [icon]="'sort'"></fa-icon></th>
+        <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="transition($event)">
+          <th <%= jhiPrefix %>SortBy="name">ID<fa-icon *ngIf="sortAllowed" [icon]="'sort'"></fa-icon></th>
         </tr>
       </thead>
     </table>
@@ -39,6 +39,7 @@ import { SortDirective } from './sort.directive';
 class TestSortByDirectiveComponent {
   predicate?: string;
   ascending?: boolean;
+  sortAllowed = true;
   transition = jest.fn();
 
   constructor(library: FaIconLibrary) {
@@ -61,21 +62,6 @@ describe('Directive: SortByDirective', () => {
     tableHead = fixture.debugElement.query(By.directive(SortByDirective));
   });
 
-  it('should initialize predicate, order, icon when initial component predicate is _score', () => {
-    // GIVEN
-    component.predicate = '_score';
-    const sortByDirective = tableHead.injector.get(SortByDirective);
-
-    // WHEN
-    fixture.detectChanges();
-
-    // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
-    expect(component.predicate).toEqual('_score');
-    expect(sortByDirective.iconComponent?.icon).toEqual('sort');
-    expect(component.transition).toHaveBeenCalledTimes(0);
-  });
-
   it('should initialize predicate, order, icon when initial component predicate differs from column predicate', () => {
     // GIVEN
     component.predicate = 'id';
@@ -108,25 +94,6 @@ describe('Directive: SortByDirective', () => {
     expect(component.transition).toHaveBeenCalledTimes(0);
   });
 
-  it('should initialize predicate, order, icon when initial component predicate is _score and user clicks on column header', () => {
-    // GIVEN
-    component.predicate = '_score';
-    component.ascending = true;
-    const sortByDirective = tableHead.injector.get(SortByDirective);
-
-    // WHEN
-    fixture.detectChanges();
-    tableHead.triggerEventHandler('click', null);
-    fixture.detectChanges();
-
-    // THEN
-    expect(sortByDirective.<%= jhiPrefix %>SortBy).toEqual('name');
-    expect(component.predicate).toEqual('_score');
-    expect(component.ascending).toEqual(true);
-    expect(sortByDirective.iconComponent?.icon).toEqual('sort');
-    expect(component.transition).toHaveBeenCalledTimes(0);
-  });
-
   it('should update component predicate, order, icon when user clicks on column header', () => {
     // GIVEN
     component.predicate = 'name';
@@ -143,6 +110,7 @@ describe('Directive: SortByDirective', () => {
     expect(component.ascending).toEqual(false);
     expect(sortByDirective.iconComponent?.icon).toEqual(faSortDown.iconName);
     expect(component.transition).toHaveBeenCalledTimes(1);
+    expect(component.transition).toHaveBeenCalledWith({ predicate: 'name', ascending: false });
   });
 
   it('should update component predicate, order, icon when user double clicks on column header', () => {
@@ -154,7 +122,6 @@ describe('Directive: SortByDirective', () => {
     // WHEN
     fixture.detectChanges();
 
-    // WHEN
     tableHead.triggerEventHandler('click', null);
     fixture.detectChanges();
 
@@ -166,5 +133,25 @@ describe('Directive: SortByDirective', () => {
     expect(component.ascending).toEqual(true);
     expect(sortByDirective.iconComponent?.icon).toEqual(faSortUp.iconName);
     expect(component.transition).toHaveBeenCalledTimes(2);
+    expect(component.transition).toHaveBeenNthCalledWith(1, { predicate: 'name', ascending: false });
+    expect(component.transition).toHaveBeenNthCalledWith(2, { predicate: 'name', ascending: true });
+  });
+
+  it('should not run sorting on click if sorting icon is hidden', () => {
+    // GIVEN
+    component.predicate = 'id';
+    component.ascending = false;
+    component.sortAllowed = false;
+
+    // WHEN
+    fixture.detectChanges();
+
+    tableHead.triggerEventHandler('click', null);
+    fixture.detectChanges();
+
+    // THEN
+    expect(component.predicate).toEqual('id');
+    expect(component.ascending).toEqual(false);
+    expect(component.transition).not.toHaveBeenCalled();
   });
 });

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort-by.directive.ts.ejs

@@ -28,9 +28,9 @@ import { SortDirective } from './sort.directive';
   selector: '[<%= jhiPrefix %>SortBy]',
 })
 export class SortByDirective<T> implements AfterContentInit, OnDestroy {
-  @Input() <%= jhiPrefix %>SortBy?: T;
+  @Input() <%= jhiPrefix %>SortBy!: T;
 
-  @ContentChild(FaIconComponent, { static: true })
+  @ContentChild(FaIconComponent, { static: false })
   iconComponent?: FaIconComponent;
 
   sortIcon = faSort;
@@ -46,7 +46,9 @@ export class SortByDirective<T> implements AfterContentInit, OnDestroy {
 
   @HostListener('click')
   onClick(): void {
-    this.sort.sort(this.<%= jhiPrefix %>SortBy);
+    if (this.iconComponent) {
+      this.sort.sort(this.<%= jhiPrefix %>SortBy);
+    }
   }
 
   ngAfterContentInit(): void {

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.directive.spec.ts.ejs

@@ -26,7 +26,7 @@ import { SortDirective } from './sort.directive';
   template: `
     <table>
       <thead>
-        <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="transition.bind(this)"></tr>
+        <tr <%= jhiPrefix %>Sort [(predicate)]="predicate" [(ascending)]="ascending" (sortChange)="transition($event)"></tr>
       </thead>
     </table>
   `,
@@ -51,7 +51,7 @@ describe('Directive: SortDirective', () => {
     tableRow = fixture.debugElement.query(By.directive(SortDirective));
   });
 
-  it('should update predicate, order and invoke callback function', () => {
+  it('should update predicate, order and invoke sortChange function', () => {
     // GIVEN
     const sortDirective = tableRow.injector.get(SortDirective);
 
@@ -62,8 +62,8 @@ describe('Directive: SortDirective', () => {
     // THEN
     expect(component.predicate).toEqual('ID');
     expect(component.ascending).toEqual(true);
-    expect(component.transition).toHaveBeenCalled();
     expect(component.transition).toHaveBeenCalledTimes(1);
+    expect(component.transition).toHaveBeenCalledWith({ predicate: 'ID', ascending: true });
   });
 
   it('should change sort order to descending when same field is sorted again', () => {
@@ -79,8 +79,9 @@ describe('Directive: SortDirective', () => {
     // THEN
     expect(component.predicate).toEqual('ID');
     expect(component.ascending).toEqual(false);
-    expect(component.transition).toHaveBeenCalled();
     expect(component.transition).toHaveBeenCalledTimes(2);
+    expect(component.transition).toHaveBeenNthCalledWith(1, { predicate: 'ID', ascending: true });
+    expect(component.transition).toHaveBeenNthCalledWith(2, { predicate: 'ID', ascending: false });
   });
 
   it('should change sort order to ascending when different field is sorted', () => {
@@ -96,7 +97,8 @@ describe('Directive: SortDirective', () => {
     // THEN
     expect(component.predicate).toEqual('NAME');
     expect(component.ascending).toEqual(true);
-    expect(component.transition).toHaveBeenCalled();
     expect(component.transition).toHaveBeenCalledTimes(2);
+    expect(component.transition).toHaveBeenNthCalledWith(1, { predicate: 'ID', ascending: true });
+    expect(component.transition).toHaveBeenNthCalledWith(2, { predicate: 'NAME', ascending: true });
   });
 });

package/generators/client/templates/angular/src/main/webapp/app/shared/sort/sort.directive.ts.ejs

@@ -40,21 +40,18 @@ export class SortDirective<T> {
     this.ascendingChange.emit(ascending);
   }
 
-  @Input() callback?: () => void;
-
   @Output() predicateChange = new EventEmitter<T>();
   @Output() ascendingChange = new EventEmitter<boolean>();
+  @Output() sortChange = new EventEmitter<{ predicate: T; ascending: boolean }>();
 
   private _predicate?: T;
   private _ascending?: boolean;
 
-  sort(field?: T): void {
-    if (String(this.predicate) !== '_score') {
-      this.ascending = field !== this.predicate ? true : !this.ascending;
-      this.predicate = field;
-      this.predicateChange.emit(field);
-      this.ascendingChange.emit(this.ascending);
-      this.callback?.();
-    }
+  sort(field: T): void {
+    this.ascending = field !== this.predicate ? true : !this.ascending;
+    this.predicate = field;
+    this.predicateChange.emit(field);
+    this.ascendingChange.emit(this.ascending);
+    this.sortChange.emit({ predicate: this.predicate, ascending: this.ascending });
   }
 }

package/generators/client/templates/angular/src/main/webapp/declarations.d.ts.ejs

@@ -1,5 +1,12 @@
-<%_ for (const entity of Object.values(this.configOptions.sharedEntities).filter(entity => entity.microserviceName)) { _%>
+declare const SERVER_API_URL: string;
+<%_ if (enableTranslation) { _%>
+declare const I18N_HASH: string;
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+
+    <%_ for (const entity of Object.values(this.configOptions.sharedEntities).filter(entity => entity.microserviceName)) { _%>
 declare module '<%= entity.microserviceName %>/<%= entity.entityFileName %>' {
   export class <%= entity.microserviceName ? upperFirstCamelCase(entity.microserviceName) : '' %><%= entity.entityAngularName %>Module {}
 }
+    <%_ } _%>
 <%_ } _%>

package/generators/client/templates/angular/webpack/environment.js.ejs

@@ -1,6 +1,6 @@
 module.exports = {
-  __TIMESTAMP__: String(new Date().getTime()),
+  I18N_HASH: 'generated_hash',
+  SERVER_API_URL: '',
   __VERSION__: process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV',
   __DEBUG_INFO_ENABLED__: false,
-  __SERVER_API_URL__: '',
 };

package/generators/client/templates/angular/webpack/proxy.conf.js.ejs

@@ -16,8 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-function setupProxy() {
-  const tls = process.env.TLS;
+function setupProxy({ tls }) {
   const conf = [
     {
       context: [
@@ -50,4 +49,4 @@ function setupProxy() {
   return conf;
 }
 
-module.exports = setupProxy();
+module.exports = setupProxy;

package/generators/client/templates/angular/webpack/webpack.custom.js.ejs

@@ -20,6 +20,7 @@ const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const path = require('path');
 <%_ if (enableTranslation) { _%>
+const { hashElement } = require('folder-hash');
 const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
 <%_ } _%>
 const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
@@ -29,10 +30,18 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
 const environment = require('./environment');
+const proxyConfig = require('./proxy.conf');
 
-const tls = process.env.TLS;
 
-module.exports = (config, options, targetOptions) => {
+module.exports = async (config, options, targetOptions) => {
+<%_ if (enableTranslation) { _%>
+  const languagesHash = await hashElement(path.resolve(__dirname, '../<%= MAIN_SRC_DIR %>i18n'), {
+    algo: 'md5',
+    encoding: 'hex',
+    files: { include: ['*.json'] },
+  });
+
+<%_ } _%>
   config.cache = {
     // 1. Set cache type to filesystem
     type: 'filesystem',
@@ -61,7 +70,13 @@ module.exports = (config, options, targetOptions) => {
       })
     );
   }
-<%_ if (!this.applicationTypeMicroservice) { _%>
+
+  // configuring proxy for back end service
+  const tls = Boolean(config.devServer && config.devServer.https);
+  if (config.devServer) {
+    config.devServer.proxy = proxyConfig({ tls });
+  }
+
   if (targetOptions.target === 'serve' || config.watch) {
     config.plugins.push(
       new BrowserSyncPlugin(
@@ -70,7 +85,7 @@ module.exports = (config, options, targetOptions) => {
           port: 9000,
           https: tls,
           proxy: {
-            target: `http${tls ? 's' : ''}://localhost:${targetOptions.target === 'serve' ? '<%= devServerPort %>' : '<%= serverPort %>'}`,
+            target: `http${tls ? 's' : ''}://localhost:${targetOptions.target === 'serve' ? '<%= devServerPort %>' : '<%= this.applicationTypeMicroservice ? gatewayServerPort : serverPort %>'}`,
             <%_ if (websocket === 'spring-websocket') { _%>
             ws: true,
             <%_ } _%>
@@ -98,7 +113,6 @@ module.exports = (config, options, targetOptions) => {
       )
     );
   }
-<%_ } _%>
 
   if (config.mode === 'production') {
     config.plugins.push(
@@ -121,7 +135,9 @@ module.exports = (config, options, targetOptions) => {
 
   config.plugins.push(
     new webpack.DefinePlugin({
-      __TIMESTAMP__: JSON.stringify(environment.__TIMESTAMP__),
+<%_ if (enableTranslation) { _%>
+      I18N_HASH: JSON.stringify(languagesHash.hash),
+<%_ } _%>
       // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
       __VERSION__: JSON.stringify(environment.__VERSION__),
       __DEBUG_INFO_ENABLED__: environment.__DEBUG_INFO_ENABLED__ || config.mode === 'development',
@@ -129,7 +145,7 @@ module.exports = (config, options, targetOptions) => {
       // If this URL is left empty (""), then it will be relative to the current context.
       // If you use an API server, in `prod` mode, you will need to enable CORS
       // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
-      __SERVER_API_URL__: JSON.stringify(environment.__SERVER_API_URL__),
+      SERVER_API_URL: JSON.stringify(environment.SERVER_API_URL),
     }),
     <%_ if (enableTranslation) { _%>
     new MergeJsonWebpackPlugin({

package/generators/client/templates/angular/webpack/webpack.microfrontend.js.ejs

@@ -28,15 +28,15 @@ module.exports = (config, options, targetOptions) => {
         name: '<%= lowercaseBaseName %>',
         filename: 'remoteEntry.js',
         exposes: {
-    <%_ for (entity of Object.values(this.configOptions.sharedEntities).filter(e => e.microserviceName)) { _%>
+    <%_ for (entity of Object.values(this.configOptions.sharedEntities || {}).filter(e => e.microserviceName)) { _%>
           './<%= entity.entityFileName %>': 'app/entities/<%= entity.entityFolderName %>/<%= entity.entityFileName %>.module.ts',
     <%_ } _%>
         },
 <%_ } _%>
 <%_ if (applicationTypeGateway) { _%>
         remotes: {
-          <%_ for (microserviceName of Object.keys(jhipsterConfig.applications)) { _%>
-          '<%= microserviceName %>': `<%= microserviceName %>@${targetOptions.target !== 'serve' ? '/services/<%= microserviceName %>' : 'http://localhost:<%= jhipsterConfig.applications[microserviceName].applicationIndex + devServerBasePort %>'}/remoteEntry.js`,
+          <%_ for ([microserviceName, microserviceConfig] of Object.entries(jhipsterConfig.applications || {})) { _%>
+          '<%= microserviceName %>': `<%= microserviceName %>@${targetOptions.target !== 'serve' ? '/services/<%= microserviceName %>' : 'http://localhost:<%= microserviceConfig.applicationIndex + devServerBasePort %>'}/remoteEntry.js`,
           <%_ } _%>
         },
 <%_ } _%>

package/generators/client/templates/common/README.md.jhi.client.ejs

@@ -0,0 +1,224 @@
+<%#
+ Copyright 2013-2021 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.
+-%>
+<%#
+ This is a fragment file, it will be merged into to root template if available.
+ EJS fragments will process % delimiter tags in template and & delimiter tags in the merge process.
+-%>
+<&_
+ // Register sections and max allowed fragments, 0 for unlimited.
+ fragments.registerSections({
+   customCliSection: 1,
+ });
+_&>
+<%_
+let clientPackageMngrName = 'Npm';
+let clientPackageMngrAddGlobal = 'install -g';
+let clientPackageMngrAdd = 'install --save --save-exact';
+let clientPackageMngrAddDev = 'install --save-dev --save-exact';
+-%>
+<&_ if (fragment.developmentSection) { -&>
+Before you can build this project, you must install and configure the following dependencies on your machine:
+
+1. [Node.js][]: We use Node to run a development web server and build the project.
+   Depending on your system, you can install Node either from source or as a pre-packaged bundle.
+
+After installing Node, you should be able to run the following command to install development tools.
+You will only need to run this command when dependencies change in [package.json](package.json).
+
+```
+<%= clientPackageManager %> install
+```
+
+We use <%= clientPackageManager %> scripts and <&- fragments.customCliSection(' ') &>[Webpack][] as our build system.
+
+  <%_ if (cacheProviderRedis || cacheProviderHazelcast || cacheProviderMemcached) { _%>
+If you are using <%= cacheProvider %> as a cache, you will have to launch a cache server.
+To start your cache server, run:
+
+```
+docker-compose -f src/main/docker/<%= cacheProviderHazelcast?'hazelcast-management-center':cacheProvider %>.yml up -d
+```
+
+    <%_ if (cacheProviderRedis) { _%>
+
+The cache can also be turned off by adding to the application yaml:
+```
+spring:
+    cache:
+        type: none
+```
+See [here](https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-caching.html#boot-features-caching-provider-none) for details.
+
+**WARNING**: If you using second level hibernate cache and disabling the spring cache, you have to disable the second level hibernate cache as well since they are using
+the same CacheManager.
+    <%_ } _%>
+  <%_ } _%>
+
+Run the following commands in two separate terminals to create a blissful development experience where your browser
+auto-refreshes when files change on your hard drive.
+
+```
+  <%_ if (buildToolMaven) { _%>
+./mvnw
+  <%_ } _%>
+  <%_ if (buildToolGradle) { _%>
+./gradlew -x webapp
+  <%_ } _%>
+<%= clientPackageManager %> start
+```
+
+<%= clientPackageMngrName %> is also used to manage CSS and JavaScript dependencies used in this application. You can upgrade dependencies by
+specifying a newer version in [package.json](package.json). You can also run `<%= clientPackageManager %> update` and `<%= clientPackageManager %> install` to manage dependencies.
+Add the `help` flag on any command to see how you can use it. For example, `<%= clientPackageManager %> help update`.
+
+The `<%= clientPackageManager %> run` command will list all of the scripts available to run for this project.
+
+### PWA Support
+
+JHipster ships with PWA (Progressive Web App) support, and it's turned off by default. One of the main components of a PWA is a service worker.
+
+  <%_ if (!clientFrameworkAngular) { _%>
+The service worker initialization code is commented out by default. To enable it, uncomment the following code in `<%= CLIENT_MAIN_SRC_DIR %>index.html`:
+
+```html
+<script>
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker
+        .register('./service-worker.js')
+        .then(function() { console.log('Service Worker Registered'); });
+    }
+</script>
+```
+
+Note: [Workbox](https://developers.google.com/web/tools/workbox/) powers JHipster's service worker. It dynamically generates the `service-worker.js` file.
+  <%_ } _%>
+  <%_ if (clientFrameworkAngular) { _%>
+The service worker initialization code is disabled by default. To enable it, uncomment the following code in `<%= CLIENT_MAIN_SRC_DIR %>app/app.module.ts`:
+
+```typescript
+ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
+```
+<%_ } _%>
+
+### Managing dependencies
+
+For example, to add [Leaflet][] library as a runtime dependency of your application, you would run following command:
+
+```
+<%= clientPackageManager %> <%= clientPackageMngrAdd %> leaflet
+```
+
+To benefit from TypeScript type definitions from [DefinitelyTyped][] repository in development, you would run following command:
+
+```
+<%= clientPackageManager %> <%= clientPackageMngrAddDev %> @types/leaflet
+```
+
+Then you would import the JS and CSS files specified in library's installation instructions so that [Webpack][] knows about them:
+  <%_ if (clientFrameworkAngular) { _%>
+Edit [<%= CLIENT_MAIN_SRC_DIR %>app/app.module.ts](<%= CLIENT_MAIN_SRC_DIR %>app/app.module.ts) file:
+
+```
+import 'leaflet/dist/leaflet.js';
+```
+
+Edit [<%= CLIENT_MAIN_SRC_DIR %>content/scss/vendor.scss](<%= CLIENT_MAIN_SRC_DIR %>content/scss/vendor.scss) file:
+
+```
+@import '~leaflet/dist/leaflet.css';
+```
+
+  <%_ } _%>
+Note: There are still a few other things remaining to do for Leaflet that we won't detail here.
+
+For further instructions on how to develop with JHipster, have a look at [Using JHipster in development][].
+
+<%_ if (microfrontend) { -%>
+### Developing Microfrontend
+
+Microservices doesn't contain every required backend feature to allow microfrontends to run alone.
+You must start a pre-built gateway version or from source.
+
+Start gateway from source:
+
+```
+cd gateway
+npm run docker:db:up # start database if necessary
+npm run docker:others:up # start service discovery and authentication service if necessary
+npm run app:start # alias for ./(mvnw|gradlew)
+```
+
+Microfrontend's `build-watch` script is configured to watch and compile microfrontend's sources and synchronizes with gateway's frontend.
+Start it using:
+
+```
+cd microfrontend
+npm run docker:db:up # start database if necessary
+npm run build-watch
+```
+
+It's possible to run microfrontend's frontend standalone using:
+
+```
+cd microfrontend
+npm run docker:db:up # start database if necessary
+npm watch # alias for `npm start` and `npm run backend:start` in parallel
+```
+
+<%_ } -%>
+
+<&_ } -&>
+<&_ if (fragment.testingSection) { -&>
+### Client tests
+
+Unit tests are run by [Jest][]. They're located in [<%= CLIENT_TEST_SRC_DIR %>](<%= CLIENT_TEST_SRC_DIR %>) and can be run with:
+
+```
+<%= clientPackageManager %> test
+```
+
+  <%_ if (protractorTests) { _%>
+UI end-to-end tests are powered by [Protractor][], which is built on top of WebDriverJS. They're located in [<%= CLIENT_TEST_SRC_DIR %>e2e](<%= CLIENT_TEST_SRC_DIR %>e2e)
+and can be run by starting Spring Boot in one terminal (`<% if (buildToolMaven) { %>./mvnw spring-boot:run<% } else { %>./gradlew bootRun<% } %>`) and running the tests (`<%= clientPackageManager %> run e2e`) in a second one.
+  <%_ } _%>
+  <%_ if (cypressTests) { _%>
+UI end-to-end tests are powered by [Cypress][]. They're located in [<%= CLIENT_TEST_SRC_DIR %>cypress](<%= CLIENT_TEST_SRC_DIR %>cypress)
+and can be run by starting Spring Boot in one terminal (`<% if (buildToolMaven) { %>./mvnw spring-boot:run<% } else { %>./gradlew bootRun<% } %>`) and running the tests (`<%= clientPackageManager %> run e2e`) in a second one.
+
+#### Lighthouse audits
+
+You can execute automated [lighthouse audits][https://developers.google.com/web/tools/lighthouse/] with [cypress audits][https://github.com/mfrachet/cypress-audit] by running `<%= clientPackageManager %> run e2e:cypress:audits`. 
+You should only run the audits when your application is packaged with the production profile.
+The lighthouse report is created in <% if (buildToolMaven) { %>`target/cypress/lhreport.html`<% } else { %>`build/cypress/lhreport.html`<% } %>
+  <%_ } _%>
+<&_ } -&>
+<&_ if (fragment.referenceSection) { -&>
+[Webpack]: https://webpack.github.io/
+[BrowserSync]: https://www.browsersync.io/
+[Jest]: https://facebook.github.io/jest/
+  <%_ if (protractorTests) { _%>
+[Protractor]: https://angular.github.io/protractor/
+  <%_ } -%>
+  <%_ if (cypressTests) { _%>
+[Cypress]: https://www.cypress.io/
+  <%_ } -%>
+[Leaflet]: https://leafletjs.com/
+[DefinitelyTyped]: https://definitelytyped.org/
+<&_ } -&>
+<&- fragments.render() -&>

package/generators/client/templates/common/package.json

@@ -1,16 +1,15 @@
 {
   "devDependencies": {
-    "@cypress/code-coverage": "3.9.6",
-    "babel-loader": "8.2.2",
-    "babel-plugin-istanbul": "6.0.0",
-    "cypress": "7.5.0",
-    "eslint-plugin-cypress": "2.11.3",
-    "cypress-audit": "1.0.0",
-    "lighthouse": "8.0.0",
-    "nyc": "15.1.0",
-    "puppeteer": "10.0.0"
+    "@cypress/code-coverage": "3.9.11",
+    "babel-loader": "8.2.3",
+    "babel-plugin-istanbul": "6.1.1",
+    "cypress": "9.0.0",
+    "eslint-plugin-cypress": "2.12.1",
+    "cypress-audit": "1.1.0",
+    "lighthouse": "9.0.0",
+    "nyc": "15.1.0"
   },
   "dependencies": {
-    "dayjs": "1.10.5"
+    "dayjs": "1.10.7"
   }
 }

package/generators/client/templates/common/webpack/webpack.microfrontend.js.jhi.ejs

@@ -0,0 +1,56 @@
+<%#
+ Copyright 2013-2021 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.
+-%>
+<&_
+ // Register sections and max allowed fragments, 0 for unlimited.
+ fragments.registerSections({
+   importsSection:0,
+   moduleFederationSection: 0,
+   pluginsSection: 0,
+ });
+_&>
+
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+<&- fragments.importsSection() &>
+const packageJson = require('../package.json');
+const appVersion = packageJson.version;
+
+module.exports = ({ serve }) => {
+  return {
+    optimization: {
+      moduleIds: 'named',
+    },
+    plugins: [
+      new ModuleFederationPlugin({
+<%_ if (applicationTypeMicroservice) { _%>
+        name: '<%= lowercaseBaseName %>',
+        filename: 'remoteEntry.js',
+<%_ } _%>
+        shareScope: 'default',
+<&- fragments.moduleFederationSection() &>
+      }),
+<&- fragments.pluginsSection() &>
+    ],
+    output: {
+      publicPath: 'auto',
+    },
+    optimization: {
+      runtimeChunk: false,
+    },
+  };
+};

package/generators/client/templates/react/.eslintrc.json.ejs

@@ -62,6 +62,7 @@
     "@typescript-eslint/explicit-member-accessibility": "off",
     "@typescript-eslint/explicit-function-return-type": "off",
     "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unsafe-argument": "off",
     "@typescript-eslint/no-unsafe-return": "off",
     "@typescript-eslint/no-unsafe-member-access":"off",
     "@typescript-eslint/no-unsafe-call": "off",