generator-jhipster 8.6.0 → 8.7.0

package/dist/generators/angular/templates/src/main/webapp/app/core/util/alert.service.spec.ts.ejs

@@ -57,7 +57,7 @@ describe('Alert service test', () => {
           timeout: 3000,
           toast: true,
           position: 'top left',
-        })
+        }),
       ).toEqual(
         expect.objectContaining({
           type: 'success',
@@ -66,7 +66,7 @@ describe('Alert service test', () => {
           timeout: 3000,
           toast: true,
           position: 'top left',
-        } as Alert)
+        } as Alert),
       );
 
       expect(service.get().length).toBe(1);
@@ -78,7 +78,7 @@ describe('Alert service test', () => {
           timeout: 3000,
           toast: true,
           position: 'top left',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -94,8 +94,8 @@ describe('Alert service test', () => {
               toast: true,
               position: 'top left',
             },
-            extAlerts
-          )
+            extAlerts,
+          ),
         ).toEqual(
           expect.objectContaining({
             type: 'success',
@@ -104,7 +104,7 @@ describe('Alert service test', () => {
             timeout: 3000,
             toast: true,
             position: 'top left',
-          } as Alert)
+          } as Alert),
         );
 
         expect(extAlerts.length).toBe(1);
@@ -116,9 +116,9 @@ describe('Alert service test', () => {
             timeout: 3000,
             toast: true,
             position: 'top left',
-          } as Alert)
+          } as Alert),
         );
-      }
+      },
     ));
 
     it('should produce an alert object with correct id', inject([AlertService], (service: AlertService) => {
@@ -128,7 +128,7 @@ describe('Alert service test', () => {
           type: 'success',
           message: 'Hello JHipster success',
           id: 1,
-        } as Alert)
+        } as Alert),
       );
 
       expect(service.get().length).toBe(2);
@@ -137,7 +137,7 @@ describe('Alert service test', () => {
           type: 'success',
           message: 'Hello JHipster success',
           id: 1,
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -150,7 +150,7 @@ describe('Alert service test', () => {
           type: 'success',
           message: 'Hello JHipster success',
           id: 2,
-        } as Alert)
+        } as Alert),
       );
 
       expect(service.get().length).toBe(3);
@@ -161,7 +161,7 @@ describe('Alert service test', () => {
           type: 'info',
           message: 'Hello Jhipster info 2',
           id: 1,
-        } as Alert)
+        } as Alert),
       );
       alert2.close?.(service.get());
       expect(service.get().length).toBe(1);
@@ -170,7 +170,7 @@ describe('Alert service test', () => {
           type: 'success',
           message: 'Hello JHipster success',
           id: 2,
-        } as Alert)
+        } as Alert),
       );
       alert0.close?.(service.get());
       expect(service.get().length).toBe(0);
@@ -205,8 +205,8 @@ describe('Alert service test', () => {
             toast: true,
             position: 'top left',
           },
-          []
-        )
+          [],
+        ),
       ).toEqual(
         expect.objectContaining({
           type: 'success',
@@ -215,7 +215,7 @@ describe('Alert service test', () => {
           timeout: 3000,
           toast: true,
           position: 'top left',
-        } as Alert)
+        } as Alert),
       );
 
       expect(service.get().length).toBe(0);
@@ -226,7 +226,7 @@ describe('Alert service test', () => {
         expect.objectContaining({
           type: 'success',
           message: 'Hello Jhipster',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -236,7 +236,7 @@ describe('Alert service test', () => {
           type: 'success',
           message: 'Hello Jhipster',
           position: 'bottom left',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -245,7 +245,7 @@ describe('Alert service test', () => {
         expect.objectContaining({
           type: 'danger',
           message: 'Hello Jhipster',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -254,7 +254,7 @@ describe('Alert service test', () => {
         expect.objectContaining({
           type: 'warning',
           message: 'Hello Jhipster',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -263,7 +263,7 @@ describe('Alert service test', () => {
         expect.objectContaining({
           type: 'info',
           message: 'Hello Jhipster',
-        } as Alert)
+        } as Alert),
       );
     }));
 
@@ -279,9 +279,9 @@ describe('Alert service test', () => {
           expect.objectContaining({
             type: 'info',
             message: 'Translated message',
-          } as Alert)
+          } as Alert),
         );
-      }
+      },
     ));
 
     it('should produce a info message with provided message if key does not exists', inject(
@@ -291,9 +291,9 @@ describe('Alert service test', () => {
           expect.objectContaining({
             type: 'info',
             message: 'Hello Jhipster',
-          } as Alert)
+          } as Alert),
         );
-      }
+      },
     ));
 
     it('should produce a info message with provided key if translation key does not exist in translations and message is not provided', inject(

package/dist/generators/angular/templates/src/main/webapp/app/core/util/alert.service.ts.ejs

@@ -27,12 +27,12 @@ import { translationNotFoundMessage } from 'app/config/translation.config';
 export type AlertType = 'success' | 'danger' | 'warning' | 'info';
 
 export interface Alert {
-  id?: number;
+  id: number;
   type: AlertType;
   message?: string;
 <%_ if (enableTranslation) { _%>
   translationKey?: string;
-  translationParams?: { [key: string]: unknown };
+  translationParams?: Record<string, unknown>;
 <%_ } _%>
   timeout?: number;
   toast?: boolean;
@@ -75,8 +75,8 @@ export class AlertService {
    *                   Else adding `alert` to `extAlerts`.
    * @returns  Added alert
    */
-  addAlert(alert: Alert, extAlerts?: Alert[]): Alert {
-    alert.id = this.alertId++;
+  addAlert(alertToAdd: Omit<Alert, 'id'>, extAlerts?: Alert[]): Alert {
+    const alert: Alert = { ...alertToAdd, id: this.alertId++ };
 
 <%_ if (enableTranslation) { _%>
     if (alert.translationKey) {
@@ -94,13 +94,13 @@ export class AlertService {
     alert.timeout = alert.timeout ?? this.timeout;
     alert.toast = alert.toast ?? this.toast;
     alert.position = alert.position ?? this.position;
-    alert.close = (alertsArray: Alert[]) => this.closeAlert(alert.id!, alertsArray);
+    alert.close = (alertsArray: Alert[]) => this.closeAlert(alert.id, alertsArray);
 
     (extAlerts ?? this.alerts).push(alert);
 
     if (alert.timeout > 0) {
       setTimeout(() => {
-        this.closeAlert(alert.id!, extAlerts ?? this.alerts);
+        this.closeAlert(alert.id, extAlerts ?? this.alerts);
       }, alert.timeout);
     }
 

package/dist/generators/angular/templates/src/main/webapp/app/core/util/data-util.service.ts.ejs

@@ -60,9 +60,9 @@ export class DataUtils {
     });
     const fileURL = window.URL.createObjectURL(blob);
     const win = window.open(fileURL);
-    win!.onload = function() {
-        URL.revokeObjectURL(fileURL);
-    }
+    win!.onload = function () {
+      URL.revokeObjectURL(fileURL);
+    };
   }
 
   /**
@@ -89,7 +89,7 @@ export class DataUtils {
           };
           observer.error(error);
         } else {
-          const fieldContentType: string = field + 'ContentType';
+          const fieldContentType = `${field}ContentType`;
           this.toBase64(file, (base64Data: string) => {
             editForm.patchValue({
               [field]: base64Data,
@@ -143,6 +143,6 @@ export class DataUtils {
   }
 
   private formatAsBytes(size: number): string {
-    return size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' bytes'; // NOSONAR
+    return `${size.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ')} bytes`; // NOSONAR
   }
 }

package/dist/generators/angular/templates/src/main/webapp/app/core/util/event-manager.service.spec.ts.ejs

@@ -61,7 +61,7 @@ describe('Event Manager tests', () => {
         eventManager.broadcast({ name: 'modifier', content: 'modified something' });
         // THEN
         expect(receivedEvent).toEqual({ name: 'modifier', content: 'modified something' });
-      }
+      },
     ));
 
     it('should create an observable and callback when broadcasted string', inject([EventManager], (eventManager: EventManager) => {

package/dist/generators/angular/templates/src/main/webapp/app/core/util/event-manager.service.ts.ejs

@@ -21,7 +21,10 @@ import { Observable, Observer, Subscription } from 'rxjs';
 import { filter, share } from 'rxjs/operators';
 
 export class EventWithContent<T> {
-  constructor(public name: string, public content: T) {}
+  constructor(
+    public name: string,
+    public content: T,
+  ) {}
 }
 
 /**
@@ -67,7 +70,7 @@ export class EventManager {
             }
           }
           return false;
-        })
+        }),
       )
       .subscribe(callback);
   }

package/dist/generators/angular/templates/src/main/webapp/app/core/util/operators.ts.ejs

@@ -16,13 +16,12 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-
 /*
  * Function used to workaround https://github.com/microsoft/TypeScript/issues/16069
  * es2019 alternative `const filteredArr = myArr.flatMap((x) => x ? x : []);`
  */
-export function isPresent<T>(t: T | undefined | null | void): t is T {
+export function isPresent<T>(t: T | undefined | null): t is T {
   return t !== undefined && t !== null;
 }
 
-export const filterNaN = (input: number): number => isNaN(input) ? 0 : input;
+export const filterNaN = (input: number): number => (isNaN(input) ? 0 : input);

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

@@ -28,7 +28,7 @@ export class ParseLinks {
   /**
    * Method to parse the links
    */
-  parseAll(header: string): { [key: string]: { [key: string]: string | undefined } | undefined } {
+  parseAll(header: string): Record<string, Record<string, string | undefined> | undefined> {
     if (header.length === 0) {
       throw new Error('input must not be of zero length');
     }
@@ -46,7 +46,7 @@ export class ParseLinks {
         }
 
         const url: string = section[0].replace(/<(.*)>/, '$1').trim(); // NOSONAR
-        const queryString: { [key: string]: string } = {};
+        const queryString: Record<string, string> = {};
 
         url.replace(/([^?=&]+)(=([^&]*))?/g, (_$0: string, $1: string | undefined, _$2: string | undefined, $3: string | undefined) => {
           if ($1 !== undefined && $3 !== undefined) {
@@ -64,9 +64,9 @@ export class ParseLinks {
   /**
    * Method to parse the links
    */
-  parse(header: string): { [key: string]: number } {
+  parse(header: string): Record<string, number> {
     const sections = this.parseAll(header);
-    const links: { [key: string]: number } = {};
+    const links: Record<string, number> = {};
     for (const [name, queryParams] of Object.entries(sections)) {
       if (queryParams?.page !== undefined) {
         links[name] = parseInt(queryParams.page, 10);

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

@@ -19,18 +19,13 @@
 import { Routes } from '@angular/router';
 
 import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
-import { <%= entityAngularName %>Component } from './list/<%= entityFileName %>.component';
-import { <%= entityAngularName %>DetailComponent } from './detail/<%= entityFileName %>-detail.component';
-<%_ if (!readOnly) { _%>
-import { <%= entityAngularName %>UpdateComponent } from './update/<%= entityFileName %>-update.component';
-<%_ } _%>
 import <%= entityAngularName %>Resolve from './route/<%= entityFileName %>-routing-resolve.service';
 import { ASC } from 'app/config/navigation.constants';
 
 const <%= entityInstance %>Route: Routes = [
   {
     path: '',
-    component: <%= entityAngularName %>Component,
+    loadComponent: () => import('./list/<%= entityFileName %>.component').then(m => m.<%= entityAngularName %>Component),
     data: {
 <%_ if (primaryKey.typeLong && primaryKey.autoGenerate) { _%>
       defaultSort: '<%- primaryKey.name %>,' + ASC,
@@ -39,11 +34,11 @@ const <%= entityInstance %>Route: Routes = [
       authorities: [<%- entityAngularReadAuthorities %>],
 <%_ } _%>
     },
-    canActivate: [UserRouteAccessService]
+    canActivate: [UserRouteAccessService],
   },
   {
     path: ':<%= primaryKey.name %>/view',
-    component: <%= entityAngularName %>DetailComponent,
+    loadComponent: () => import('./detail/<%= entityFileName %>-detail.component').then(m => m.<%= entityAngularName %>DetailComponent),
     resolve: {
       <%= entityInstance %>: <%= entityAngularName %>Resolve
     },
@@ -57,7 +52,7 @@ const <%= entityInstance %>Route: Routes = [
 <%_ if (!readOnly) { _%>
   {
     path: 'new',
-    component: <%= entityAngularName %>UpdateComponent,
+    loadComponent: () => import('./update/<%= entityFileName %>-update.component').then(m => m.<%= entityAngularName %>UpdateComponent),
     resolve: {
       <%= entityInstance %>: <%= entityAngularName %>Resolve
     },
@@ -72,7 +67,7 @@ const <%= entityInstance %>Route: Routes = [
 <%_ if (!readOnly && updatableEntity) { _%>
   {
     path: ':<%= primaryKey.name %>/edit',
-    component: <%= entityAngularName %>UpdateComponent,
+    loadComponent: () => import('./update/<%= entityFileName %>-update.component').then(m => m.<%= entityAngularName %>UpdateComponent),
     resolve: {
       <%= entityInstance %>: <%= entityAngularName %>Resolve
     },

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

@@ -18,7 +18,7 @@
 -%>
 <div class="d-flex justify-content-center">
   <div class="col-8">
-  @if (<%= entityInstance %>()) {
+  @if (<%= entityInstance %>(); as <%= entityInstance %>Ref) {
     <div>
       <h2 data-cy="<%= entityInstance %>DetailsHeading"><span>__jhiTranslateTag__('<%- i18nKeyPrefix %>.detail.title')</span></h2>
 
@@ -37,31 +37,31 @@ _%>
         <dd>
     <%_ if (field.fieldIsEnum) { _%>
           <%# TODO: import enum and use its key as label _%>
-          <span>__jhiTranslateTagEnum__('<%= frontendAppName %>.<%= fieldType %>', { "value": "<%= entityInstance %>()!.<%= fieldName %> ?? 'null'" })</span>
+          <span>__jhiTranslateTagEnum__('<%= frontendAppName %>.<%= fieldType %>', { "value": "<%= entityInstance %>Ref.<%= fieldName %> ?? 'null'" })</span>
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
-        @if (<%= entityInstance %>()!.<%= fieldName %>) {
+        @if (<%= entityInstance %>Ref.<%= fieldName %>) {
           <div>
-            <a (click)="openFile(<%= entityInstance %>()!.<%= fieldName %> ?? '', <%= entityInstance %>()!.<%= fieldName %>ContentType)">
-              <img [src]="'data:' + <%= entityInstance %>()!.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>()!.<%= fieldName %>" style="max-width: 100%;" alt="<%= entityInstance %>"/>
+            <a (click)="openFile(<%= entityInstance %>Ref.<%= fieldName %> ?? '', <%= entityInstance %>Ref.<%= fieldName %>ContentType)">
+              <img [src]="'data:' + <%= entityInstance %>Ref.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>Ref.<%= fieldName %>" style="max-width: 100%;" alt="<%= entityInstance %>"/>
             </a>
-            {{ <%= entityInstance %>()!.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>()!.<%= fieldName %> ?? '') }}
+            {{ <%= entityInstance %>Ref.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>Ref.<%= fieldName %> ?? '') }}
           </div>
         }
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
-        @if (<%= entityInstance %>()!.<%= fieldName %>) {
+        @if (<%= entityInstance %>Ref.<%= fieldName %>) {
           <div>
-            <a (click)="openFile(<%= entityInstance %>()!.<%= fieldName %> ?? '', <%= entityInstance %>()!.<%= fieldName %>ContentType)">__jhiTranslateTag__('entity.action.open')</a>
-            {{ <%= entityInstance %>()!.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>()!.<%= fieldName %> ?? '') }}
+            <a (click)="openFile(<%= entityInstance %>Ref.<%= fieldName %> ?? '', <%= entityInstance %>Ref.<%= fieldName %>ContentType)">__jhiTranslateTag__('entity.action.open')</a>
+            {{ <%= entityInstance %>Ref.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>Ref.<%= fieldName %> ?? '') }}
           </div>
         }
     <%_ } else if (field.fieldTypeDuration) { _%>
-          <span>{{ <%= entityInstance %>()!.<%= fieldName %> | duration }} ({{<%= entityInstance %>()!.<%= fieldName %> }})</span>
+          <span>{{ <%= entityInstance %>Ref.<%= fieldName %> | duration }} ({{<%= entityInstance %>Ref.<%= fieldName %> }})</span>
     <%_ } else if (field.fieldTypeTimed) { _%>
-          <span>{{ <%= entityInstance %>()!.<%= fieldName %> | formatMediumDatetime }}</span>
+          <span>{{ <%= entityInstance %>Ref.<%= fieldName %> | formatMediumDatetime }}</span>
     <%_ } else if (field.fieldTypeLocalDate) { _%>
-          <span>{{ <%= entityInstance %>()!.<%= fieldName %> | formatMediumDate }}</span>
+          <span>{{ <%= entityInstance %>Ref.<%= fieldName %> | formatMediumDate }}</span>
     <%_ } else { _%>
-          <span>{{ <%= entityInstance %>()!.<%= fieldName %> }}</span>
+          <span>{{ <%= entityInstance %>Ref.<%= fieldName %> }}</span>
     <%_ } _%>
         </dd>
 <%_ } _%>
@@ -79,17 +79,17 @@ _%>
         <dd>
     <%_ if (relationship.otherEntityUser) { _%>
       <%_ if (relationship.collection) { _%>
-        @for (<%= relationshipFieldName %> of <%= entityInstance %>()!.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
+        @for (<%= relationshipFieldName %> of <%= entityInstance %>Ref.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
           <span>
             {{ <%= relationshipFieldName %>.<%= otherEntityField %> }}{{ last ? '' : ', ' }}
           </span>
         }
       <%_ } else { _%>
-          <span>{{ <%= entityInstance %>()!.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</span>
+          <span>{{ <%= entityInstance %>Ref.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</span>
       <%_ } _%>
     <%_ } else { _%>
       <%_ if (relationship.collection) { _%>
-        @for (<%= relationshipFieldName %> of <%= entityInstance %>()!.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
+        @for (<%= relationshipFieldName %> of <%= entityInstance %>Ref.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
           <span>
             <a [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
           </span>
@@ -97,7 +97,7 @@ _%>
       <%_ } else { _%>
         @if (<%= entityInstance + '()!.' + relationshipFieldName %>) {
           <div>
-            <a [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= entityInstance + '()!.' + relationshipFieldName + '?.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>()!.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>
+            <a [routerLink]="['/<%= relationship.otherEntity.entityPage %>', <%= entityInstance + '()!.' + relationshipFieldName + '?.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>Ref.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</a>
           </div>
         }
       <%_ } _%>
@@ -118,7 +118,7 @@ _%>
 <%_ if (!readOnly && updatableEntity) { _%>
 
       <button type="button"
-          [routerLink]="['/<%= entityPage %>', <%= entityInstance %>()!.<%= primaryKey.name %>, 'edit']"
+          [routerLink]="['/<%= entityPage %>', <%= entityInstance %>Ref.<%= primaryKey.name %>, 'edit']"
           class="btn btn-primary">
         <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span>__jhiTranslateTag__('entity.action.edit')</span>
       </button>

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

@@ -46,7 +46,7 @@ describe('<%= entityAngularName %> Management Detail Component', () => {
           [
             {
               path: '**',
-              component: <%= entityAngularName %>DetailComponent,
+              loadComponent: () => import('./<%= entityFileName %>-detail.component').then(m => m.<%= entityAngularName %>DetailComponent),
               resolve: { <%= entityInstance %>: () => of(<%- testEntity %>) },
             },
           ],

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

@@ -132,7 +132,7 @@ export class <%= componentName %> implements OnInit {
 <%- include('pagination-template'); -%>
 <%_ } else if (paginationInfiniteScroll) { _%>
     itemsPerPage = ITEMS_PER_PAGE;
-    links: WritableSignal<{ [key: string]: undefined | { [key: string]: string | undefined } }> = signal({});
+    links: WritableSignal<Record<string, undefined | Record<string, string | undefined>>> = signal({});
     hasMorePage = computed(() => !!this.links().next);
     isFirstFetch = computed(() => Object.keys(this.links()).length === 0);
 <%_ } _%>
@@ -302,7 +302,7 @@ export class <%= componentName %> implements OnInit {
         if (data) {
           for (const d of data) {
   <%_ if (primaryKey) { _%>
-            if (<%= entityInstancePlural %>New.map(op => op.<%= primaryKey.name %>).indexOf(d.<%= primaryKey.name %>) === -1) {
+            if (<%= entityInstancePlural %>New.some(op => op.<%= primaryKey.name %> === d.<%= primaryKey.name %>)) {
   <%_ } _%>
               <%= entityInstancePlural %>New.push(d);
   <%_ if (primaryKey) { _%>

package/dist/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/route/_entityFile_-routing-resolve.service.ts.ejs

@@ -38,7 +38,7 @@ const <%= entityInstance %>Resolve = (route: ActivatedRouteSnapshot): Observable
             inject(Router).navigate(['404']);
             return EMPTY;
           }
-        })
+        }),
       );
   }
   return of(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/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.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',
     },