generator-jhipster 7.4.1 → 7.5.0

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

@@ -95,13 +95,13 @@ export class UserManagementComponent implements OnInit {
         size: this.itemsPerPage,
         sort: this.sort(),
       }<% } %>)
-      .subscribe(
-        (res: HttpResponse<User[]>) => {
+      .subscribe({
+        next: (res: HttpResponse<User[]>) => {
           this.isLoading = false;
           this.onSuccess(res.body<% if (!databaseTypeCassandra) { %>, res.headers<% } %>);
         },
-        () => this.isLoading = false
-      );
+        error: () => this.isLoading = false
+      });
   }
 
 <%_ if (!databaseTypeCassandra) { _%>

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

@@ -72,18 +72,18 @@ export class UserManagementUpdateComponent implements OnInit {
     this.isSaving = true;
     this.updateUser(this.user);
     if (this.user.id !== undefined) {
-      this.userService.update(this.user).subscribe(
-        () => this.onSaveSuccess(),
-        () => this.onSaveError()
-      );
+      this.userService.update(this.user).subscribe({
+        next: () => this.onSaveSuccess(),
+        error: () => this.onSaveError()
+      });
     } else {
 <%_ if (!enableTranslation) { _%>
       this.user.langKey = 'en';
 <%_ } _%>
-      this.userService.create(this.user).subscribe(
-        () => this.onSaveSuccess(),
-        () => this.onSaveError()
-      );
+      this.userService.create(this.user).subscribe({
+        next: () => this.onSaveSuccess(),
+        error: () => this.onSaveError()
+      });
     }
   }
 

package/generators/client/templates/angular/src/main/webapp/app/app-routing.module.ts.ejs

@@ -26,8 +26,6 @@ import { Authority } from 'app/config/authority.constants';
 
 import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
 
-const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];
-
 @NgModule({
   imports: [
     RouterModule.forRoot(
@@ -54,7 +52,20 @@ const LAYOUT_ROUTES = [navbarRoute, ...errorRoute];
           loadChildren: () => import('./login/login.module').then(m => m.LoginModule),
         },
 <%_ } _%>
-        ...LAYOUT_ROUTES,
+        {
+          path: '<%= applicationTypeMicroservice ? lowercaseBaseName : '' %>',
+          loadChildren: () => import(`./entities/entity-routing.module`).then(m => m.EntityRoutingModule),
+        },
+<%_ if (applicationTypeGateway) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+        {
+          path: '<%= remote.lowercaseBaseName %>',
+          loadChildren: () => import(`<%= remote.lowercaseBaseName %>/entity-routing`).then(m => m.EntityRoutingModule),
+        },
+  <%_ } _%>
+<%_ } _%>
+        navbarRoute,
+        ...errorRoute,
       ],
       { enableTracing: DEBUG_INFO_ENABLED }
     ),

package/generators/client/templates/angular/src/main/webapp/app/app.module.ts.ejs

@@ -21,7 +21,7 @@
 _%>
 import { NgModule, LOCALE_ID } from '@angular/core';
 import { registerLocaleData } from '@angular/common';
-import { <% if (enableTranslation) { %>HttpClient, <% } %>HttpClientModule } from '@angular/common/http';
+import { HttpClientModule } from '@angular/common/http';
 import locale from '@angular/common/locales/<%= localeId %>';
 import { BrowserModule, Title } from '@angular/platform-browser';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -29,19 +29,18 @@ import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
 <%_ if (authenticationTypeSession && communicationSpringWebsocket) { _%>
 import { CookieService } from 'ngx-cookie-service';
 <%_ } _%>
-<%_ if (enableTranslation) { _%>
-import { TranslateModule, TranslateService, TranslateLoader, MissingTranslationHandler } from '@ngx-translate/core';
-<%_ } _%>
-import { NgxWebstorageModule<% if (enableTranslation) { %>, SessionStorageService<% } %> } from 'ngx-webstorage';
-import * as dayjs from 'dayjs';
+import { NgxWebstorageModule } from 'ngx-webstorage';
+import dayjs from 'dayjs/esm';
 import { NgbDateAdapter, NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApplicationConfigService } from 'app/core/config/application-config.service';
 import './config/dayjs';
 import { SharedModule } from 'app/shared/shared.module';
+<%_ if (enableTranslation) { _%>
+import { TranslationModule } from 'app/shared/language/translation.module';
+<%_ } _%>
 import { AppRoutingModule } from './app-routing.module';
 import { HomeModule } from './home/home.module';
-import { EntityRoutingModule } from './entities/entity-routing.module';
 // jhipster-needle-angular-add-module-import JHipster will add new module here
 import { NgbDateDayjsAdapter } from './config/datepicker-adapter';
 import { fontAwesomeIcons } from './config/font-awesome-icons';
@@ -49,9 +48,6 @@ import { httpInterceptorProviders } from 'app/core/interceptor/index';
 <%_ if (enableI18nRTL) { _%>
 import { FindLanguageFromKeyPipe } from 'app/shared/language/find-language-from-key.pipe';
 <%_ } _%>
-<%_ if (enableTranslation) { _%>
-import { translatePartialLoader, missingTranslationHandler } from './config/translation.config';
-<%_ } _%>
 import { MainComponent } from './layouts/main/main.component';
 import { NavbarComponent } from './layouts/navbar/navbar.component';
 import { FooterComponent } from './layouts/footer/footer.component';
@@ -67,24 +63,13 @@ import { ErrorComponent } from './layouts/error/error.component';
     SharedModule,
     HomeModule,
     // jhipster-needle-angular-add-module JHipster will add new module here
-    EntityRoutingModule,
     AppRoutingModule,
     // Set this to true to enable service worker (PWA)
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: false }),
     HttpClientModule,
     NgxWebstorageModule.forRoot({ prefix: '<%= jhiPrefixDashed %>', separator: '-', caseSensitive: true }),
 <%_ if (enableTranslation) { _%>
-    TranslateModule.forRoot({
-      loader: {
-        provide: TranslateLoader,
-        useFactory: translatePartialLoader,
-        deps: [HttpClient],
-      },
-      missingTranslationHandler: {
-        provide: MissingTranslationHandler,
-        useFactory: missingTranslationHandler,
-      },
-    }),
+    TranslationModule,
 <%_ } _%>
   ],
   providers: [
@@ -112,7 +97,7 @@ import { ErrorComponent } from './layouts/error/error.component';
   bootstrap: [MainComponent],
 })
 export class AppModule {
-  constructor(applicationConfigService: ApplicationConfigService, iconLibrary: FaIconLibrary, dpConfig: NgbDatepickerConfig<% if (enableTranslation) { %>, translateService: TranslateService, sessionStorageService: SessionStorageService<% } %>) {
+  constructor(applicationConfigService: ApplicationConfigService, iconLibrary: FaIconLibrary, dpConfig: NgbDatepickerConfig) {
 <%_ if (applicationTypeMicroservice) { _%>
     applicationConfigService.setMicrofrontend();
 <%_ } _%>
@@ -120,11 +105,5 @@ export class AppModule {
     registerLocaleData(locale);
     iconLibrary.addIcons(...fontAwesomeIcons);
     dpConfig.minDate = { year: dayjs().subtract(100, 'year').year(), month: 1, day: 1 };
-<%_ if (enableTranslation) { _%>
-    translateService.setDefaultLang('<%= nativeLanguage %>');
-    // if user have changed language and navigates away from the application and back to the application then use previously choosed language
-    const langKey = sessionStorageService.retrieve('locale') ?? '<%= nativeLanguage %>';
-    translateService.use(langKey);
-<%_ } _%>
   }
 }

package/generators/client/templates/angular/src/main/webapp/app/config/datepicker-adapter.ts.ejs

@@ -21,7 +21,7 @@
  */
 import { Injectable } from '@angular/core';
 import { NgbDateAdapter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 
 @Injectable()
 export class NgbDateDayjsAdapter extends NgbDateAdapter<dayjs.Dayjs> {

package/generators/client/templates/angular/src/main/webapp/app/config/dayjs.ts.ejs

@@ -16,10 +16,10 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import * as dayjs from 'dayjs';
-import * as customParseFormat from 'dayjs/plugin/customParseFormat';
-import * as duration from 'dayjs/plugin/duration';
-import * as relativeTime from 'dayjs/plugin/relativeTime';
+import dayjs from 'dayjs/esm';
+import customParseFormat from 'dayjs/esm/plugin/customParseFormat';
+import duration from 'dayjs/esm/plugin/duration';
+import relativeTime from 'dayjs/esm/plugin/relativeTime';
 
 // jhipster-needle-i18n-language-dayjs-imports - JHipster will import languages from dayjs here
 

package/generators/client/templates/angular/src/main/webapp/app/core/auth/account.service.spec.ts.ejs

@@ -16,20 +16,18 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-jest.mock('@angular/router');
-<%_ if (enableTranslation) { _%>
-jest.mock('@ngx-translate/core');
-<%_ } _%>
 jest.mock('app/core/auth/state-storage.service');
 <%_ if (communicationSpringWebsocket) { _%>
 jest.mock('app/core/tracker/tracker.service');
 <%_ } _%>
 
 import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 <%_ if (enableTranslation) { _%>
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { of } from 'rxjs';
 <%_ } _%>
 import { NgxWebstorageModule<% if (enableTranslation) { %>, SessionStorageService<% } %> } from 'ngx-webstorage';
 
@@ -76,16 +74,19 @@ describe('Account Service', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, NgxWebstorageModule.forRoot()],
-      providers: [
+      imports: [
+        HttpClientTestingModule,
+        RouterTestingModule.withRoutes([]),
 <%_ if (enableTranslation) { _%>
-        TranslateService,
+        TranslateModule.forRoot(),
 <%_ } _%>
+        NgxWebstorageModule.forRoot()
+      ],
+      providers: [
 <%_ if (communicationSpringWebsocket) { _%>
         TrackerService,
 <%_ } _%>
         StateStorageService,
-        Router,
       ],
     });
 
@@ -96,11 +97,15 @@ describe('Account Service', () => {
     httpMock = TestBed.inject(HttpTestingController);
     mockStorageService = TestBed.inject(StateStorageService);
     mockRouter = TestBed.inject(Router);
+    jest.spyOn(mockRouter, 'navigateByUrl').mockImplementation(() => Promise.resolve(true));
 <%_ if (communicationSpringWebsocket) { _%>
+
     mockTrackerService = TestBed.inject(TrackerService);
 <%_ } _%>
 <%_ if (enableTranslation) { _%>
+
     mockTranslateService = TestBed.inject(TranslateService);
+    jest.spyOn(mockTranslateService, 'use').mockImplementation(() => of(''));
     sessionStorageService = TestBed.inject(SessionStorageService);
 <%_ } _%>
   });

package/generators/client/templates/angular/src/main/webapp/app/core/tracker/tracker.service.ts.ejs

@@ -21,8 +21,8 @@ import { Location } from '@angular/common';
 import { Router, NavigationEnd, Event } from '@angular/router';
 import { Subscription, ReplaySubject, Subject } from 'rxjs';
 import { filter } from 'rxjs/operators';
-import * as SockJS from 'sockjs-client';
-import * as Stomp from 'webstomp-client';
+import SockJS from 'sockjs-client';
+import Stomp, { Client, Subscription as StompSubscription, ConnectionHeaders, Message } from 'webstomp-client';
 
 <%_ if (authenticationTypeSession) { _%>
 import { CSRFService } from 'app/core/auth/csrf.service';
@@ -34,11 +34,11 @@ import { TrackerActivity } from './tracker-activity.model';
 
 @Injectable({ providedIn: 'root' })
 export class TrackerService {
-  private stompClient: Stomp.Client | null = null;
+  private stompClient: Client | null = null;
   private routerSubscription: Subscription | null = null;
   private connectionSubject: ReplaySubject<void> = new ReplaySubject(1);
   private connectionSubscription: Subscription | null = null;
-  private stompSubscription: Stomp.Subscription | null = null;
+  private stompSubscription: StompSubscription | null = null;
   private listenerSubject: Subject<TrackerActivity> = new Subject();
 
   constructor(
@@ -67,7 +67,7 @@ export class TrackerService {
 <%_ } _%>
     const socket: WebSocket = new SockJS(url);
     this.stompClient = Stomp.over(socket, { protocols: ['v12.stomp'] });
-    const headers: Stomp.ConnectionHeaders = {};
+    const headers: ConnectionHeaders = {};
 <%_ if (authenticationTypeSession) { _%>
     headers['X-XSRF-TOKEN'] = this.csrfService.getCSRF('XSRF-TOKEN');
 <%_ } _%>
@@ -111,7 +111,7 @@ export class TrackerService {
 
     this.connectionSubscription = this.connectionSubject.subscribe(() => {
       if (this.stompClient) {
-        this.stompSubscription = this.stompClient.subscribe('/topic/tracker', (data: Stomp.Message) => {
+        this.stompSubscription = this.stompClient.subscribe('/topic/tracker', (data: Message) => {
           this.listenerSubject.next(JSON.parse(data.body));
         });
       }

package/generators/client/templates/angular/src/main/webapp/app/core/util/parse-links.service.ts.ejs

@@ -49,7 +49,7 @@ export class ParseLinks {
       const queryString: { [key: string]: string | undefined } = {};
 
       url.replace(
-        new RegExp('([^?=&]+)(=([^&]*))?', 'g'),
+        /([^?=&]+)(=([^&]*))?/g,
         ($0: string, $1: string | undefined, $2: string | undefined, $3: string | undefined) => {
           if ($1 !== undefined) {
             queryString[$1] = $3;

package/generators/client/templates/angular/src/main/webapp/app/entities/entity-navbar-items.ts.ejs

@@ -0,0 +1,29 @@
+<%#
+ 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.
+-%>
+export const EntityNavbarItems = [
+<%_ for (const entity of localEntities) { _%>
+  {
+    name: '<%= entity.entityAngularName %>',
+    route: '<%= entity.entityPage %>',
+  <%_ if (enableTranslation) { _%>
+    translationKey: 'global.menu.entities.<%= entity.entityTranslationKey %>',
+  <%_ } _%>
+  },
+<%_ } _%>
+];

package/generators/client/templates/angular/src/main/webapp/app/home/home.component.spec.ts.ejs

@@ -17,15 +17,14 @@
  limitations under the License.
 -%>
 jest.mock('app/core/auth/account.service');
-<%_ if (!authenticationTypeOauth2) { _%>
-jest.mock('@angular/router');
-<% } else { %>
+<%_ if (authenticationTypeOauth2) { _%>
 jest.mock('app/login/login.service');
 <%_ } _%>
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 <%_ if (!authenticationTypeOauth2) { _%>
 import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 <%_ } _%>
 import { of<% if (!authenticationTypeOauth2) { %>, Subject<% } %> } from 'rxjs';
 
@@ -60,8 +59,16 @@ describe('Home Component', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+<%_ if (!authenticationTypeOauth2) { _%>
+        imports: [RouterTestingModule.withRoutes([])],
+<%_ } _%>
         declarations: [HomeComponent],
-        providers: [AccountService, <% if (!authenticationTypeOauth2) { %>Router<% } else { %>LoginService<% } %>],
+        providers: [
+          AccountService,
+<%_ if (authenticationTypeOauth2) { _%>
+          LoginService
+<%_ } _%>
+        ],
       })
         .overrideTemplate(HomeComponent, '')
         .compileComponents();
@@ -75,7 +82,10 @@ describe('Home Component', () => {
     mockAccountService.identity = jest.fn(() => of(null));
     mockAccountService.getAuthenticationState = jest.fn(() => of(null));
 <%_ if (!authenticationTypeOauth2) { _%>
+
     mockRouter = TestBed.inject(Router);
+    jest.spyOn(mockRouter, 'navigate').mockImplementation(() => Promise.resolve(true));
+
 <%_ } else { _%>
     mockLoginService = TestBed.inject(LoginService);
 <%_ } _%>

package/generators/client/templates/angular/src/main/webapp/app/layouts/main/main.component.ts.ejs

@@ -21,7 +21,7 @@ import { Title } from '@angular/platform-browser';
 import { Router, ActivatedRouteSnapshot, NavigationEnd } from '@angular/router';
 <%_ if (enableTranslation) { _%>
 import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 <%_ } _%>
 
 import { AccountService } from 'app/core/auth/account.service';

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.html.ejs

@@ -60,6 +60,26 @@
           </span>
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="entity-menu">
+<%_ if (applicationTypeGateway) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+          <li *ngFor="let entityNavbarItem of <%= remote.lowercaseBaseName %>EntityNavbarItems">
+            <a
+              class="dropdown-item"
+              [routerLink]="entityNavbarItem.route"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: true }"
+              (click)="collapseNavbar()"
+            >
+              <fa-icon icon="asterisk" [fixedWidth]="true"></fa-icon>
+              <span
+    <%_ if (enableTranslation) { _%>
+              [jhiTranslate]="entityNavbarItem.translationKey"
+    <%_ } _%>
+              >{{entityNavbarItem.name}}</span>
+            </a>
+          </li>
+  <%_ } _%>
+<%_ } _%>
           <!-- jhipster-needle-add-entity-to-menu - JHipster will add entities to the menu here -->
         </ul>
       </li>

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.spec.ts.ejs

@@ -16,12 +16,11 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-jest.mock('@angular/router');
 jest.mock('app/login/login.service');
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { of } from 'rxjs';
 import { NgxWebstorageModule } from 'ngx-webstorage';
 <%_ if (enableTranslation) { _%>
@@ -55,9 +54,16 @@ describe('Navbar Component', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, NgxWebstorageModule.forRoot()<% if (enableTranslation) { %>, TranslateModule.forRoot()<% } %>],
+        imports: [
+          HttpClientTestingModule,
+          RouterTestingModule.withRoutes([]),
+<%_ if (enableTranslation) { _%>
+          TranslateModule.forRoot(),
+<%_ } _%>
+          NgxWebstorageModule.forRoot()
+        ],
         declarations: [NavbarComponent],
-        providers: [Router, LoginService],
+        providers: [LoginService],
       })
         .overrideTemplate(NavbarComponent, '')
         .compileComponents();

package/generators/client/templates/angular/src/main/webapp/app/layouts/navbar/navbar.component.ts.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit<% if (enableTranslation && applicationTypeGateway) { %>, Compiler, Injector, NgModuleFactory, Type<% } %> } from '@angular/core';
 import { Router } from '@angular/router';
 <%_ if (enableTranslation) { _%>
 import { TranslateService } from '@ngx-translate/core';
@@ -31,6 +31,7 @@ import { Account } from 'app/core/auth/account.model';
 import { AccountService } from 'app/core/auth/account.service';
 import { LoginService } from 'app/login/login.service';
 import { ProfileService } from 'app/layouts/profiles/profile.service';
+import { EntityNavbarItems } from 'app/entities/entity-navbar-items';
 
 @Component({
   selector: '<%= jhiPrefixDashed %>-navbar',
@@ -46,12 +47,22 @@ export class NavbarComponent implements OnInit {
   openAPIEnabled?: boolean;
   version = '';
   account: Account | null = null;
+  entitiesNavbarItems: any[] = [];
+<%_ if (applicationTypeGateway) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+  <%= remote.lowercaseBaseName %>EntityNavbarItems: any[] = [];
+  <%_ } _%>
+<%_ } _%>
 
   constructor(
     private loginService: LoginService,
 <%_ if (enableTranslation) { _%>
     private translateService: TranslateService,
     private sessionStorageService: SessionStorageService,
+  <%_ if (applicationTypeGateway) { _%>
+    private compiler: Compiler,
+    private injector: Injector,
+  <%_ } _%>
 <%_ } _%>
     private accountService: AccountService,
     private profileService: ProfileService,
@@ -63,11 +74,32 @@ export class NavbarComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.entitiesNavbarItems = EntityNavbarItems;
     this.profileService.getProfileInfo().subscribe(profileInfo => {
       this.inProduction = profileInfo.inProduction;
       this.openAPIEnabled = profileInfo.openAPIEnabled;
     });
-    this.accountService.getAuthenticationState().subscribe(account => (this.account = account));
+
+    this.accountService.getAuthenticationState().subscribe(account => {
+      this.account = account;
+    <%_ if (applicationTypeGateway) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+      import('<%= remote.lowercaseBaseName %>/entity-navbar-items').then(
+        <%= enableTranslation ? 'async ' : '' %>({ EntityNavbarItems: <%= remote.capitalizedBaseName %>EntityNavbarItems }) => {
+          this.<%= remote.lowercaseBaseName %>EntityNavbarItems = <%= remote.capitalizedBaseName %>EntityNavbarItems;
+    <%_ if (enableTranslation) { _%>
+          const { LazyTranslationModule } = await import('<%= remote.lowercaseBaseName %>/translation-module');
+          this.loadModule(LazyTranslationModule as Type<any>);
+    <%_ } _%>
+        },
+        error => {
+          // eslint-disable-next-line no-console
+          console.log('Error loading <%= remote.lowercaseBaseName %> entities', error);
+        }
+      );
+  <%_ } _%>
+<%_ } _%>
+    });
   }
 
 <%_ if (enableTranslation) { _%>
@@ -98,4 +130,11 @@ export class NavbarComponent implements OnInit {
   toggleNavbar(): void {
     this.isNavbarCollapsed = !this.isNavbarCollapsed;
   }
+<%_ if (enableTranslation && applicationTypeGateway) { _%>
+
+  private loadModule(moduleType: Type<any>): void {
+    const moduleFactory = this.compiler.compileModuleAndAllComponentsSync(moduleType);
+    moduleFactory.ngModuleFactory.create(this.injector);
+  }
+<%_ } _%>
 }

package/generators/client/templates/angular/src/main/webapp/app/login/login.component.spec.ts.ejs

@@ -16,7 +16,6 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-jest.mock('@angular/router');
 jest.mock('app/core/auth/account.service');
 jest.mock('app/login/login.service');
 
@@ -24,6 +23,7 @@ import { ElementRef } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { Router, Navigation } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { of, throwError } from 'rxjs';
 
 import { AccountService } from 'app/core/auth/account.service';
@@ -41,11 +41,11 @@ describe('LoginComponent', () => {
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
+        imports: [RouterTestingModule.withRoutes([])],
         declarations: [LoginComponent],
         providers: [
           FormBuilder,
           AccountService,
-          Router,
           {
             provide: LoginService,
             useValue: {
@@ -63,6 +63,7 @@ describe('LoginComponent', () => {
     fixture = TestBed.createComponent(LoginComponent);
     comp = fixture.componentInstance;
     mockRouter = TestBed.inject(Router);
+    jest.spyOn(mockRouter, 'navigate').mockImplementation(() => Promise.resolve(true));
     mockLoginService = TestBed.inject(LoginService);
     mockAccountService = TestBed.inject(AccountService);
   });

package/generators/client/templates/angular/src/main/webapp/app/login/login.component.ts.ejs

@@ -66,15 +66,15 @@ export class LoginComponent implements OnInit, AfterViewInit {
         password: this.loginForm.get('password')!.value,
         rememberMe: this.loginForm.get('rememberMe')!.value,
       })
-      .subscribe(
-        () => {
+      .subscribe({
+        next: () => {
           this.authenticationError = false;
           if (!this.router.getCurrentNavigation()) {
             // There were no routing during login (eg from navigationToStoredUrl)
             this.router.navigate(['']);
           }
         },
-        () => this.authenticationError = true
-      );
+        error: () => this.authenticationError = true
+      });
   }
 }

package/generators/client/templates/angular/src/main/webapp/app/shared/auth/has-any-authority.directive.spec.ts.ejs

@@ -99,7 +99,7 @@ describe('HasAnyAuthorityDirective tests', () => {
       mockAccountService.hasAnyAuthority = jest.fn(() => false);
 
       // WHEN
-      authenticationState.next();
+      authenticationState.next(null);
       fixture.detectChanges();
 
       // THEN
@@ -109,7 +109,7 @@ describe('HasAnyAuthorityDirective tests', () => {
       mockAccountService.hasAnyAuthority = jest.fn(() => true);
 
       // WHEN
-      authenticationState.next();
+      authenticationState.next(null);
       fixture.detectChanges();
 
       // THEN
@@ -133,7 +133,7 @@ describe('HasAnyAuthorityDirective tests', () => {
 
       // WHEN
       jest.clearAllMocks();
-      authenticationState.next();
+      authenticationState.next(null);
 
       // THEN
       expect(mockAccountService.hasAnyAuthority).toHaveBeenCalled();
@@ -141,7 +141,7 @@ describe('HasAnyAuthorityDirective tests', () => {
       // WHEN
       jest.clearAllMocks();
       hasAnyAuthorityDirective.ngOnDestroy();
-      authenticationState.next();
+      authenticationState.next(null);
 
       // THEN
       expect(mockAccountService.hasAnyAuthority).not.toHaveBeenCalled();

package/generators/client/templates/angular/src/main/webapp/app/shared/date/duration.pipe.ts.ejs

@@ -18,7 +18,7 @@
 -%>
 import { Pipe, PipeTransform } from '@angular/core';
 
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 
 @Pipe({
   name: 'duration',

package/generators/client/templates/angular/src/main/webapp/app/shared/date/format-medium-date.pipe.spec.ts.ejs

@@ -16,7 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-import * as dayjs from 'dayjs';
+import dayjs from 'dayjs/esm';
 
 import { FormatMediumDatePipe } from './format-medium-date.pipe';