generator-jhipster 8.5.0 → 8.7.0

package/dist/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/service/_entityFile_.service.spec.ts.ejs

@@ -21,7 +21,8 @@ const tsKeyId = this.generateTestEntityId(primaryKey.type);
 const enumImports = this.generateEntityClientEnumImports(fields);
 _%>
 import { TestBed } from '@angular/core/testing';
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 
 <%_ if (anyFieldIsLocalDate) { _%>
 import { DATE_FORMAT } from 'app/config/input.constants';
@@ -49,8 +50,9 @@ describe('<%= entityAngularName %> Service', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
-                HttpClientTestingModule
+            providers: [
+                provideHttpClient(),
+                provideHttpClientTesting()
             ]
         });
         expectedResult = null;

package/dist/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.html.ejs

@@ -45,6 +45,7 @@
 _%>
 
             <% if (field.autoGenerate) { %>@if (editForm.controls.<%= field.fieldName %>.value !== null) {<% } %>
+                <% if (field.fieldTypeBinary && !field.blobContentTypeText || field.fieldValidate) { %>@let <%= fieldName %>Ref = editForm.get('<%= fieldName %>')!;<% } %>
                 <div class="mb-3">
                     <label class="form-label" for="field_<%= fieldName %>"<% if (field.documentation) { if (enableTranslation) { %> [ngbTooltip]="'<%= i18nKeyPrefix %>.help.<%= fieldName %>' | translate"<% } else { %> ngbTooltip="<%= field.documentation %>"<% } } %>>__jhiTranslateTag__('<%= i18nKeyPrefix %>.<%= fieldName %>')</label>
   <%_ if (field.fieldIsEnum) { _%>
@@ -59,17 +60,17 @@ _%>
     <%_ if (field.fieldTypeBinary && !field.blobContentTypeText) { _%>
                     <div>
       <%_ if (field.blobContentTypeImage) { _%>
-                    @if (editForm.get('<%= fieldName %>')!.value) {
-                        <img [src]="'data:' + editForm.get('<%= fieldName %>ContentType')!.value + ';base64,' + editForm.get('<%= fieldName %>')!.value" style="max-height: 100px" alt="<%= entityInstance %>"/>
+                    @if (<%= fieldName %>Ref.value) {
+                        <img [src]="'data:' + editForm.get('<%= fieldName %>ContentType')!.value + ';base64,' + <%= fieldName %>Ref.value" style="max-height: 100px" alt="<%= entityInstance %>"/>
                     }
       <%_ } _%>
-                    @if (editForm.get('<%= fieldName %>')!.value) {
+                    @if (<%= fieldName %>Ref.value) {
                         <div class="form-text text-danger clearfix">
       <%_ if (field.blobContentTypeAny) { _%>
-                            <a class="pull-start" (click)="openFile(editForm.get('<%= fieldName %>')!.value!, editForm.get('<%= fieldName %>ContentType')!.value!)">__jhiTranslateTag__('entity.action.open')</a><br>
-                            <span class="pull-start">{{ editForm.get('<%= fieldName %>ContentType')!.value }}, {{ byteSize(editForm.get('<%= fieldName %>')!.value!) }}</span>
+                            <a class="pull-start" (click)="openFile(<%= fieldName %>Ref.value!, editForm.get('<%= fieldName %>ContentType')!.value!)">__jhiTranslateTag__('entity.action.open')</a><br>
+                            <span class="pull-start">{{ editForm.get('<%= fieldName %>ContentType')!.value }}, {{ byteSize(<%= fieldName %>Ref.value!) }}</span>
       <%_ } else { _%>
-                            <span class="pull-start">{{ editForm.get('<%= fieldName %>ContentType')!.value }}, {{ byteSize(editForm.get('<%= fieldName %>')!.value!) }}</span>
+                            <span class="pull-start">{{ editForm.get('<%= fieldName %>ContentType')!.value }}, {{ byteSize(<%= fieldName %>Ref.value!) }}</span>
       <%_ } _%>
       <%_ if (field.blobContentTypeImage) { _%>
                             <button type="button" (click)="clearInputImage('<%= fieldName %>', '<%= fieldName %>ContentType', 'file_<%= fieldName %>')" class="btn btn-secondary btn-xs pull-end">
@@ -109,7 +110,7 @@ _%>
     <%_ } _%>
   <%_ } _%>
   <%_ if (field.fieldValidate) { _%>
-                @if (editForm.get('<%= fieldName %>')!.invalid && (editForm.get('<%= fieldName %>')!.dirty || editForm.get('<%= fieldName %>')!.touched)) {
+                @if (<%= fieldName %>Ref.invalid && (<%= fieldName %>Ref.dirty || <%= fieldName %>Ref.touched)) {
                     <div>
     <%_ if (field.fieldValidationRequired) { _%>
                     @if (editForm.get('<%= fieldName %>')?.errors?.required) {

package/dist/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.spec.ts.ejs

@@ -26,8 +26,7 @@ const testEntityPrimaryKey0 = this.generateTestEntityPrimaryKey(primaryKey, 0);
 const testEntityPrimaryKey1 = this.generateTestEntityPrimaryKey(primaryKey, 1);
 _%>
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { HttpResponse } from '@angular/common/http';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient, HttpResponse } from '@angular/common/http';
 import { FormBuilder } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { of, Subject, from } from 'rxjs';
@@ -57,10 +56,10 @@ describe('<%= entityAngularName %> Management Update Component', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [
-                HttpClientTestingModule,
                 <%= entityAngularName %>UpdateComponent,
             ],
             providers: [
+              provideHttpClient(),
               FormBuilder,
               {
                 provide: ActivatedRoute,

package/dist/generators/angular/templates/src/main/webapp/app/home/home.component.html.ejs

@@ -29,8 +29,8 @@
     <div>
       @if (account() !== null) {
         <div class="alert alert-success">
-        @if (account()) {
-          <span id="home-logged-message">__jhiTranslateTag__('home.logged.message', { "username": "account()!.login" })</span>
+        @if (account(); as accountRef) {
+          <span id="home-logged-message">__jhiTranslateTag__('home.logged.message', { "username": "accountRef.login" })</span>
         }
         </div>
       } @else {

package/dist/generators/angular/templates/src/main/webapp/app/layouts/error/error.component.html.ejs

@@ -25,9 +25,9 @@
     <div class="col-md-8">
       <h1>__jhiTranslateTag__('error.title')</h1>
 
-    @if (errorMessage()) {
-      <div class="alert alert-danger">{{ errorMessage() }}</div>
-    }
+      @if (errorMessage(); as errMessage) {
+        <div class="alert alert-danger">{{ errMessage }}</div>
+      }
     </div>
   </div>
 </div>

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

@@ -38,9 +38,9 @@ export default class ErrorComponent implements OnInit<% if (enableTranslation) {
 <%_ } _%>
 
 <%_ if (enableTranslation) { _%>
-  private translateService = inject(TranslateService);
+  private readonly translateService = inject(TranslateService);
 <%_ } _%>
-  private route = inject(ActivatedRoute);
+  private readonly route = inject(ActivatedRoute);
 
   ngOnInit(): void {
     this.route.data.subscribe(routeData => {

package/dist/generators/angular/templates/src/main/webapp/app/layouts/error/error.route.ts.ejs

@@ -18,17 +18,15 @@
 -%>
 import { Routes } from '@angular/router';
 
-import ErrorComponent from './error.component';
-
 export const errorRoute: Routes = [
   {
     path: 'error',
-    component: ErrorComponent,
+    loadComponent: () => import('./error.component'),
     title: 'error.title',
   },
   {
     path: 'accessdenied',
-    component: ErrorComponent,
+    loadComponent: () => import('./error.component'),
     data: {
       errorMessage: 'error.http.403',
     },
@@ -36,7 +34,7 @@ export const errorRoute: Routes = [
   },
   {
     path: '404',
-    component: ErrorComponent,
+    loadComponent: () => import('./error.component'),
     data: {
       errorMessage: 'error.http.404',
     },

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

@@ -52,6 +52,8 @@ describe('MainComponent', () => {
   let router: Router;
   let document: Document;
 
+  const navigateByUrlFn = (url: string) => () => router.navigateByUrl(url);
+
   beforeEach(
     waitForAsync(() => {
       TestBed.configureTestingModule({
@@ -114,7 +116,7 @@ describe('MainComponent', () => {
     describe('navigation end', () => {
       it('should set page title to default title if pageTitle is missing on routes', fakeAsync(() => {
         // WHEN
-        ngZone.run(() => router.navigateByUrl(''));
+        ngZone.run(navigateByUrlFn(''));
         tick();
 
         // THEN
@@ -126,7 +128,7 @@ describe('MainComponent', () => {
         router.resetConfig([{ path: '', title: parentRoutePageTitle, component: BlankComponent }]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl(''));
+        ngZone.run(navigateByUrlFn(''));
         tick();
 
         // THEN
@@ -139,14 +141,12 @@ describe('MainComponent', () => {
           {
             path: 'home',
             title: parentRoutePageTitle,
-            children: [
-              { path: '', title: childRoutePageTitle, component: BlankComponent },
-            ],
+            children: [{ path: '', title: childRoutePageTitle, component: BlankComponent }],
           },
         ]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl('home'));
+        ngZone.run(navigateByUrlFn('home'));
         tick();
 
         // THEN
@@ -159,14 +159,12 @@ describe('MainComponent', () => {
           {
             path: 'home',
             title: parentRoutePageTitle,
-            children: [
-              { path: '', component: BlankComponent },
-            ],
+            children: [{ path: '', component: BlankComponent }],
           },
         ]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl('home'));
+        ngZone.run(navigateByUrlFn('home'));
         tick();
 
         // THEN
@@ -181,7 +179,7 @@ describe('MainComponent', () => {
         translateService.onLangChange.emit(langChangeEvent);
 
         // THEN
-        expect(document.title).toBe(defaultPageTitle + ' translated');
+        expect(document.title).toBe(`${defaultPageTitle} translated`);
       });
 
       it('should set page title to root route pageTitle if there is no child routes', fakeAsync(() => {
@@ -190,11 +188,11 @@ describe('MainComponent', () => {
         router.resetConfig([{ path: '', title: parentRoutePageTitle, component: BlankComponent }]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl(''));
+        ngZone.run(navigateByUrlFn(''));
         tick();
 
         // THEN
-        expect(document.title).toBe(parentRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${parentRoutePageTitle} translated`);
 
         // GIVEN
         document.title = 'other title';
@@ -203,7 +201,7 @@ describe('MainComponent', () => {
         translateService.onLangChange.emit(langChangeEvent);
 
         // THEN
-        expect(document.title).toBe(parentRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${parentRoutePageTitle} translated`);
       }));
 
       it('should set page title to child route pageTitle if child routes exist and pageTitle is set for child route', fakeAsync(() => {
@@ -212,18 +210,16 @@ describe('MainComponent', () => {
           {
             path: 'home',
             title: parentRoutePageTitle,
-            children: [
-              { path: '', title: childRoutePageTitle, component: BlankComponent },
-            ],
+            children: [{ path: '', title: childRoutePageTitle, component: BlankComponent }],
           },
         ]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl('home'));
+        ngZone.run(navigateByUrlFn('home'));
         tick();
 
         // THEN
-        expect(document.title).toBe(childRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${childRoutePageTitle} translated`);
 
         // GIVEN
         document.title = 'other title';
@@ -232,7 +228,7 @@ describe('MainComponent', () => {
         translateService.onLangChange.emit(langChangeEvent);
 
         // THEN
-        expect(document.title).toBe(childRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${childRoutePageTitle} translated`);
       }));
 
       it('should set page title to parent route pageTitle if child routes exists but pageTitle is not set for child route data', fakeAsync(() => {
@@ -241,18 +237,16 @@ describe('MainComponent', () => {
           {
             path: 'home',
             title: parentRoutePageTitle,
-            children: [
-              { path: '', component: BlankComponent },
-            ],
+            children: [{ path: '', component: BlankComponent }],
           },
         ]);
 
         // WHEN
-        ngZone.run(() => router.navigateByUrl('home'));
+        ngZone.run(navigateByUrlFn('home'));
         tick();
 
         // THEN
-        expect(document.title).toBe(parentRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${parentRoutePageTitle} translated`);
 
         // GIVEN
         document.title = 'other title';
@@ -261,7 +255,7 @@ describe('MainComponent', () => {
         translateService.onLangChange.emit(langChangeEvent);
 
         // THEN
-        expect(document.title).toBe(parentRoutePageTitle + ' translated');
+        expect(document.title).toBe(`${parentRoutePageTitle} translated`);
       }));
     });
 <%_ } _%>
@@ -301,6 +295,5 @@ describe('MainComponent', () => {
 <%_ } _%>
 });
 
-@Component({template: ''})
-export class BlankComponent {
-}
+@Component({ template: '' })
+export class BlankComponent {}

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

@@ -53,12 +53,12 @@ export default class MainComponent implements OnInit {
   private translateService = inject(TranslateService);
   private rootRenderer = inject(RendererFactory2);
 <%_ } _%>
+<%_ if (enableTranslation) { _%>
 
   constructor() {
-<%_ if (enableTranslation) { _%>
     this.renderer = this.rootRenderer.createRenderer(document.querySelector('html'), null);
-<%_ } _%>
   }
+<%_ } _%>
 
   ngOnInit(): void {
     // try to log in automatically

package/dist/generators/angular/templates/src/main/webapp/app/layouts/navbar/active-menu.directive.ts.ejs

@@ -26,9 +26,9 @@ import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
 export default class ActiveMenuDirective implements OnInit {
   <%= jhiPrefix %>ActiveMenu = input();
 
-  private el = inject(ElementRef);
-  private renderer = inject(Renderer2);
-  private translateService = inject(TranslateService);
+  private readonly el = inject(ElementRef);
+  private readonly renderer = inject(Renderer2);
+  private readonly translateService = inject(TranslateService);
 
   ngOnInit(): void {
     this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {

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

@@ -108,7 +108,7 @@
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="admin-menu">
           <!-- jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here -->
-<%_ if (applicationTypeGateway && serviceDiscoveryAny) { _%>
+<%_ if (applicationTypeGateway && gatewayServicesApiAvailable) { _%>
           <li>
             <a class="dropdown-item" routerLink="/admin/gateway" routerLinkActive="active" (click)="collapseNavbar()">
               <fa-icon icon="road" [fixedWidth]="true"></fa-icon>
@@ -200,20 +200,21 @@
     }
 <%_ } _%>
       <li ngbDropdown class="nav-item dropdown pointer" display="dynamic" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+        @let accountRef = account();
         <a class="nav-link dropdown-toggle" ngbDropdownToggle href="javascript:void(0);" id="account-menu" data-cy="accountMenu">
-        @if (!account()?.imageUrl) {
+        @if (!accountRef?.imageUrl) {
           <span>
             <fa-icon icon="user"></fa-icon>
             <span>__jhiTranslateTag__('global.menu.account.main')</span>
           </span>
         } @else {
           <span>
-            <img [src]="account()!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
+            <img [src]="accountRef!.imageUrl" class="profile-image rounded-circle" alt="Avatar" />
           </span>
         }
         </a>
         <ul class="dropdown-menu" ngbDropdownMenu aria-labelledby="account-menu">
-          @if (account() !== null) {
+          @if (accountRef !== null) {
 <%_ if (generateUserManagement) { _%>
             <li>
               <a class="dropdown-item" routerLink="/account/settings" routerLinkActive="active" (click)="collapseNavbar()" data-cy="settings">

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

@@ -19,7 +19,8 @@
 jest.mock('app/login/login.service');
 
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
 <%_ if (enableTranslation) { _%>
 import { TranslateModule } from '@ngx-translate/core';
@@ -54,12 +55,11 @@ describe('Navbar Component', () => {
       TestBed.configureTestingModule({
         imports: [
           NavbarComponent,
-          HttpClientTestingModule,
 <%_ if (enableTranslation) { _%>
           TranslateModule.forRoot(),
 <%_ } _%>
         ],
-        providers: [LoginService],
+        providers: [provideHttpClient(), provideHttpClientTesting(), LoginService],
       })
         .overrideTemplate(NavbarComponent, '')
         .compileComponents();

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

@@ -150,7 +150,7 @@ export default class NavbarComponent implements OnInit {
         }
     <%_ } _%>
       },
-      error => {
+      (error: unknown) => {
         // eslint-disable-next-line no-console
         console.log('Error loading <%= remote.lowercaseBaseName %> entities', error);
       }

package/dist/generators/angular/templates/src/main/webapp/app/layouts/profiles/page-ribbon.component.spec.ts.ejs

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
 import { of } from 'rxjs';
 
 import { ProfileInfo } from 'app/layouts/profiles/profile-info.model';
@@ -12,15 +12,14 @@ describe('Page Ribbon Component', () => {
   let fixture: ComponentFixture<PageRibbonComponent>;
   let profileService: ProfileService;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientTestingModule, PageRibbonComponent],
-      })
-        .overrideTemplate(PageRibbonComponent, '')
-        .compileComponents();
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [PageRibbonComponent],
+      providers: [provideHttpClient()],
     })
-  );
+      .overrideTemplate(PageRibbonComponent, '')
+      .compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PageRibbonComponent);

package/dist/generators/angular/templates/src/main/webapp/app/layouts/profiles/profile-info.model.ts.ejs

@@ -28,6 +28,6 @@ export class ProfileInfo {
     public activeProfiles?: string[],
     public ribbonEnv?: string,
     public inProduction?: boolean,
-    public openAPIEnabled?: boolean
+    public openAPIEnabled?: boolean,
   ) {}
 }

package/dist/generators/angular/templates/src/main/webapp/app/layouts/profiles/profile.service.ts.ejs

@@ -53,7 +53,7 @@ export class ProfileService {
         }
         return profileInfo;
       }),
-      shareReplay()
+      shareReplay(),
     );
     return this.profileInfo$;
   }

package/dist/generators/angular/templates/src/main/webapp/app/login/login.component.html.ejs

@@ -20,11 +20,9 @@
   <div class="d-flex justify-content-center">
     <div class="col-lg-6 col-md-8 col-sm-10">
       <h1 data-cy="loginTitle">__jhiTranslateTag__('login.title')</h1>
-    @if (authenticationError()) {
-      <div class="alert alert-danger"
-        data-cy="loginError"
-      >__jhiTranslateTag__('login.messages.error.authentication')</div>
-    }
+      @if (authenticationError()) {
+        <div class="alert alert-danger" data-cy="loginError">__jhiTranslateTag__('login.messages.error.authentication')</div>
+      }
       <form class="form" (ngSubmit)="login()" [formGroup]="loginForm">
         <div class="mb-3">
           <label class="username-label" for="username">__jhiTranslateTag__('global.form.username.label')</label>
@@ -64,7 +62,9 @@
       </form>
 <%_ if (generateUserManagement) { _%>
       <div class="mt-3 alert alert-warning">
-        <a class="alert-link" routerLink="/account/reset/request" data-cy="forgetYourPasswordSelector">__jhiTranslateTag__('login.password.forgot')</a>
+        <a class="alert-link" routerLink="/account/reset/request" data-cy="forgetYourPasswordSelector"
+          >__jhiTranslateTag__('login.password.forgot')</a
+        >
       </div>
 
       <div class="alert alert-warning">

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

@@ -37,25 +37,23 @@ describe('LoginComponent', () => {
   let mockAccountService: AccountService;
   let mockLoginService: LoginService;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [LoginComponent],
-        providers: [
-          FormBuilder,
-          AccountService,
-          {
-            provide: LoginService,
-            useValue: {
-              login: jest.fn(() => of({})),
-            },
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [LoginComponent],
+      providers: [
+        FormBuilder,
+        AccountService,
+        {
+          provide: LoginService,
+          useValue: {
+            login: jest.fn(() => of({})),
           },
-        ],
-      })
-        .overrideTemplate(LoginComponent, '')
-        .compileComponents();
+        },
+      ],
     })
-  );
+      .overrideTemplate(LoginComponent, '')
+      .compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(LoginComponent);

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

@@ -67,7 +67,7 @@ export default class LoginComponent implements OnInit, AfterViewInit {
           this.router.navigate(['']);
         }
       },
-      error: () => (this.authenticationError.set(true)),
+      error: () => this.authenticationError.set(true),
     });
   }
 }

package/dist/generators/angular/templates/src/main/webapp/app/login/login.model.ts.ejs

@@ -17,5 +17,9 @@
  limitations under the License.
 -%>
 export class Login {
-  constructor(public username: string, public password: string, public rememberMe: boolean) {}
+  constructor(
+    public username: string,
+    public password: string,
+    public rememberMe: boolean,
+  ) {}
 }

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.html.ejs

@@ -17,13 +17,13 @@
  limitations under the License.
 -%>
 <div class="alerts" role="alert">
-@for (alert of alerts(); track $index) {
-  <div [ngClass]="setClasses(alert)">
-  @if (alert.message) {
-    <ngb-alert [type]="alert.type" (closed)="close(alert)">
-      <pre [innerHTML]="alert.message"></pre>
-    </ngb-alert>
+  @for (alert of alerts(); track $index) {
+    <div [ngClass]="setClasses(alert)">
+      @if (alert.message) {
+        <ngb-alert [type]="alert.type" (closed)="close(alert)">
+          <pre [innerHTML]="alert.message"></pre>
+        </ngb-alert>
+      }
+    </div>
   }
-  </div>
-}
 </div>

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs

@@ -57,7 +57,7 @@ export class AlertErrorComponent implements OnDestroy {
     });
   }
 
-  setClasses(alert: Alert): { [key: string]: boolean } {
+  setClasses(alert: Alert): Record<string, boolean> {
     const classes = { 'jhi-toast': Boolean(alert.toast) };
     if (alert.position) {
       return { ...classes, [alert.position]: true };
@@ -74,7 +74,7 @@ export class AlertErrorComponent implements OnDestroy {
     alert.close?.(this.alerts());
   }
 
-  private addErrorAlert(message?: string<% if (enableTranslation) { %>, translationKey?: string, translationParams?: { [key: string]: unknown }<% } %>): void {
+  private addErrorAlert(message?: string<% if (enableTranslation) { %>, translationKey?: string, translationParams?: Record<string, unknown><% } %>): void {
     this.alertService.addAlert({ type: 'danger', message<% if (enableTranslation) { %>, translationKey, translationParams<% } %> }, this.alerts());
   }
 
@@ -138,7 +138,7 @@ export class AlertErrorComponent implements OnDestroy {
   }
 
   private handleFieldsError(httpErrorResponse: HttpErrorResponse): void {
-    const fieldErrors = httpErrorResponse.error.fieldErrors;
+    const { fieldErrors } = httpErrorResponse.error;
     for (const fieldError of fieldErrors) {
       if (['Min', 'Max', 'DecimalMin', 'DecimalMax'].includes(fieldError.message)) {
         fieldError.message = 'Size';

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.model.ts.ejs

@@ -21,7 +21,7 @@ export class AlertError {
     public message: string,
     <%_ if (enableTranslation) { _%>
     public key?: string,
-    public params?: { [key: string]: unknown }
+    public params?: Record<string, unknown>
     <%_ } _%>
   ) {}
 }

package/dist/generators/angular/templates/src/main/webapp/app/shared/alert/alert.component.html.ejs

@@ -17,13 +17,13 @@
  limitations under the License.
 -%>
 <div class="alerts" role="alert">
-@for (alert of alerts(); track $index) {
-  <div [ngClass]="setClasses(alert)">
-  @if (alert.message) {
-    <ngb-alert [type]="alert.type" (closed)="close(alert)">
-      <pre [innerHTML]="alert.message"></pre>
-    </ngb-alert>
+  @for (alert of alerts(); track $index) {
+    <div [ngClass]="setClasses(alert)">
+      @if (alert.message) {
+        <ngb-alert [type]="alert.type" (closed)="close(alert)">
+          <pre [innerHTML]="alert.message"></pre>
+        </ngb-alert>
+      }
+    </div>
   }
-  </div>
-}
 </div>