generator-jhipster 8.0.0-rc.1 → 8.1.0

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

@@ -0,0 +1,73 @@
+<%#
+ Copyright 2013-2023 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.
+-%>
+import { Component } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import locale from '@angular/common/locales/en';
+import dayjs from 'dayjs/esm';
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { NgbDatepickerConfig } from '@ng-bootstrap/ng-bootstrap';
+import { provideRouter } from '@angular/router';
+import { registerLocaleData } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import locale from '@angular/common/locales/en';
+import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import dayjs from 'dayjs/esm';
+import appRoutes from './app.routes';
+// jhipster-needle-angular-add-module-import JHipster will add new module here
+
+import { ApplicationConfigService } from 'app/core/config/application-config.service';
+import { fontAwesomeIcons } from './config/font-awesome-icons';
+<%_ if (enableTranslation) { _%>
+import { TranslationModule } from 'app/shared/language/translation.module';
+<%_ } _%>
+import MainComponent from './layouts/main/main.component';
+<%_ if (communicationSpringWebsocket) { _%>
+import { TrackerService } from './core/tracker/tracker.service';
+<%_ } _%>
+
+@Component({
+  selector: '<%= jhiPrefixDashed %>-app',
+  standalone: true,
+  template: '<<%= jhiPrefixDashed %>-main></<%= jhiPrefixDashed %>-main>',
+  imports: [
+    MainComponent,
+    // jhipster-needle-angular-add-module JHipster will add new module here
+  ],
+})
+export default class AppComponent {
+  constructor(
+    applicationConfigService: ApplicationConfigService,
+    iconLibrary: FaIconLibrary,
+<%_ if (communicationSpringWebsocket) { _%>
+    trackerService: TrackerService,
+<%_ } _%>
+    dpConfig: NgbDatepickerConfig
+  ) {
+<%_ if (communicationSpringWebsocket) { _%>
+    trackerService.setup();
+<%_ } _%>
+<%_ if (applicationTypeMicroservice) { _%>
+    applicationConfigService.setMicrofrontend();
+<%_ } _%>
+    applicationConfigService.setEndpointPrefix(SERVER_API_URL);
+    registerLocaleData(locale);
+    iconLibrary.addIcons(...fontAwesomeIcons);
+    dpConfig.minDate = { year: dayjs().subtract(100, 'year').year(), month: 1, day: 1 };
+  }
+}

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

@@ -0,0 +1,67 @@
+<%#
+ Copyright 2013-2023 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.
+-%>
+import { ApplicationConfig, LOCALE_ID, importProvidersFrom } from '@angular/core';
+import { BrowserModule, Title } from '@angular/platform-browser';
+import { RouterFeatures, TitleStrategy, provideRouter, withComponentInputBinding, withDebugTracing } from '@angular/router';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { HttpClientModule } from '@angular/common/http';
+
+import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
+
+import { DEBUG_INFO_ENABLED } from 'app/app.constants';
+import './config/dayjs';
+<%_ if (enableTranslation) { _%>
+import { TranslationModule } from 'app/shared/language/translation.module';
+<%_ } _%>
+import { httpInterceptorProviders } from 'app/core/interceptor/index';
+import FindLanguageFromKeyPipe from 'app/shared/language/find-language-from-key.pipe';
+import routes from './app.routes';
+// jhipster-needle-angular-add-module-import JHipster will add new module here
+import { NgbDateDayjsAdapter } from './config/datepicker-adapter';
+import { AppPageTitleStrategy } from './app-page-title-strategy';
+
+const routerFeatures: Array<RouterFeatures> = [withComponentInputBinding()];
+if (DEBUG_INFO_ENABLED) {
+  routerFeatures.push(withDebugTracing());
+}
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes, ...routerFeatures),
+    importProvidersFrom(BrowserModule),
+    // Set this to true to enable service worker (PWA)
+    importProvidersFrom(ServiceWorkerModule.register('ngsw-worker.js', { enabled: false })),
+<%_ if (enableTranslation) { _%>
+    importProvidersFrom(TranslationModule),
+<%_ } _%>
+    importProvidersFrom(HttpClientModule),
+    Title,
+<%_ if (authenticationTypeSession && communicationSpringWebsocket) { _%>
+    CookieService,
+<%_ } _%>
+    { provide: LOCALE_ID, useValue: '<%= angularLocaleId %>' },
+    { provide: NgbDateAdapter, useClass: NgbDateDayjsAdapter },
+<%_ if (enableI18nRTL) { _%>
+    FindLanguageFromKeyPipe,
+<%_ } _%>
+    httpInterceptorProviders,
+    { provide: TitleStrategy, useClass: AppPageTitleStrategy },
+    // jhipster-needle-angular-add-module JHipster will add new module here
+  ],
+};

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

@@ -0,0 +1,85 @@
+<%#
+ Copyright 2013-2023 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.
+-%>
+import { NgModule } from '@angular/core';
+import { Routes } from '@angular/router';
+
+import { errorRoute } from './layouts/error/error.route';
+import { Authority } from 'app/config/authority.constants';
+
+import HomeComponent from './home/home.component';
+import NavbarComponent from './layouts/navbar/navbar.component';
+<%_ if (!authenticationTypeOauth2) { _%>
+import LoginComponent from './login/login.component';
+<%_ } _%>
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+import { loadEntityRoutes } from './core/microfrontend';
+<%_ } _%>
+
+import { UserRouteAccessService } from 'app/core/auth/user-route-access.service';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: HomeComponent,
+    title: 'home.title',
+  },
+  {
+    path: '',
+    component: NavbarComponent,
+    outlet: 'navbar',
+  },
+<%_ if (!applicationTypeMicroservice) { _%>
+  {
+    path: 'admin',
+    data: {
+      authorities: [Authority.ADMIN],
+    },
+    canActivate: [UserRouteAccessService],
+    loadChildren: () => import('./admin/admin.routes'),
+  },
+<%_ } _%>
+<%_ if (generateUserManagement) { _%>
+  {
+    path: 'account',
+    loadChildren: () => import('./account/account.route'),
+  },
+<%_ } _%>
+<%_ if (!authenticationTypeOauth2) { _%>
+  {
+    path: 'login',
+    component: LoginComponent,
+    title: 'login.title',
+  },
+<%_ } _%>
+  {
+    path: '<%= applicationTypeMicroservice ? lowercaseBaseName : '' %>',
+    loadChildren: () => import(`./entities/entity.routes`),
+  },
+<%_ if (applicationTypeGateway && microfrontend) { _%>
+  <%_ for (const remote of microfrontends) { _%>
+  {
+    path: '<%= remote.lowercaseBaseName %>',
+    loadChildren: () => loadEntityRoutes('<%= remote.lowercaseBaseName %>'),
+  },
+  <%_ } _%>
+<%_ } _%>
+  ...errorRoute,
+];
+
+export default routes;

package/dist/generators/angular/templates/src/main/webapp/app/core/microfrontend/index.ts.ejs

@@ -16,6 +16,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
+// eslint-disable @typescript-eslint/no-unsafe-return
 import { Type } from '@angular/core';
 import { loadRemoteModule } from '@angular-architects/module-federation-runtime';
 
@@ -35,9 +36,9 @@ export const loadTranslationModule = async (service: string): Promise<Type<any>>
     exposedModule: './translation-module',
   }).then(({ LazyTranslationModule }) => LazyTranslationModule);
 
-export const loadEntityModule = async (service: string): Promise<Type<any>> =>
-  loadRemoteModule<{ EntityRoutingModule: Type<any> }>({
+export const loadEntityRoutes = (service: string): Promise<Type<any>> =>
+  loadRemoteModule<Type<any>>({
     type: 'module',
     remoteEntry: `./services/${service}/remoteEntry.js`,
-    exposedModule: './entity-routing',
-  }).then(({ EntityRoutingModule }) => EntityRoutingModule);
+    exposedModule: './entity-routes',
+  });

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

@@ -296,7 +296,7 @@ describe('Alert service test', () => {
       }
     ));
 
-    it('should produce a info message with provided key if transltion key does not exist in translations and message is not provided', inject(
+    it('should produce a info message with provided key if translation key does not exist in translations and message is not provided', inject(
       [AlertService, TranslateService],
       (service: AlertService) => {
         expect(service.addAlert({ type: 'info', translationKey: 'hello.jhipster' })).toEqual(

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

@@ -48,7 +48,7 @@ export class DataUtils {
    */
   openFile(data: string, contentType: string | null | undefined): void {
     contentType = contentType ?? '';
-    
+
     const byteCharacters = Buffer.from(data, 'base64').toString('binary');
     const byteNumbers = new Array(byteCharacters.length);
     for (let i = 0; i < byteCharacters.length; i++) {
@@ -73,7 +73,7 @@ export class DataUtils {
    * @param editForm the form group where the input field is located
    * @param field the field name to set the file's 'base 64 data' on
    * @param isImage boolean representing if the file represented by the event is an image
-   * @returns an observable that loads file to form field and completes if sussessful
+   * @returns an observable that loads file to form field and completes if successful
    *      or returns error as FileLoadError on failure
    */
   loadFileToForm(event: Event, editForm: FormGroup, field: string, isImage: boolean): Observable<void> {

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

@@ -32,13 +32,13 @@ describe('Event Manager tests', () => {
   });
 
   describe('EventManager', () => {
-    let recievedEvent: EventWithContent<unknown> | string | null;
+    let receivedEvent: EventWithContent<unknown> | string | null;
 
     beforeEach(() => {
       TestBed.configureTestingModule({
         providers: [EventManager],
       });
-      recievedEvent = null;
+      receivedEvent = null;
     });
 
     it('should not fail when nosubscriber and broadcasting', inject([EventManager], (eventManager: EventManager) => {
@@ -50,53 +50,53 @@ describe('Event Manager tests', () => {
       [EventManager],
       (eventManager: EventManager) => {
         // GIVEN
-        eventManager.subscribe('modifier', (event: EventWithContent<unknown> | string) => (recievedEvent = event));
+        eventManager.subscribe('modifier', (event: EventWithContent<unknown> | string) => (receivedEvent = event));
 
         // WHEN
         eventManager.broadcast({ name: 'unrelatedModifier', content: 'unrelated modification' });
         // THEN
-        expect(recievedEvent).toBeNull();
+        expect(receivedEvent).toBeNull();
 
         // WHEN
         eventManager.broadcast({ name: 'modifier', content: 'modified something' });
         // THEN
-        expect(recievedEvent).toEqual({ name: 'modifier', content: 'modified something' });
+        expect(receivedEvent).toEqual({ name: 'modifier', content: 'modified something' });
       }
     ));
 
     it('should create an observable and callback when broadcasted string', inject([EventManager], (eventManager: EventManager) => {
       // GIVEN
-      eventManager.subscribe('modifier', (event: EventWithContent<unknown> | string) => (recievedEvent = event));
+      eventManager.subscribe('modifier', (event: EventWithContent<unknown> | string) => (receivedEvent = event));
 
       // WHEN
       eventManager.broadcast('unrelatedModifier');
       // THEN
-      expect(recievedEvent).toBeNull();
+      expect(receivedEvent).toBeNull();
 
       // WHEN
       eventManager.broadcast('modifier');
       // THEN
-      expect(recievedEvent).toEqual('modifier');
+      expect(receivedEvent).toEqual('modifier');
     }));
 
     it('should subscribe to multiple events', inject([EventManager], (eventManager: EventManager) => {
       // GIVEN
-      eventManager.subscribe(['modifier', 'modifier2'], (event: EventWithContent<unknown> | string) => (recievedEvent = event));
+      eventManager.subscribe(['modifier', 'modifier2'], (event: EventWithContent<unknown> | string) => (receivedEvent = event));
 
       // WHEN
       eventManager.broadcast('unrelatedModifier');
       // THEN
-      expect(recievedEvent).toBeNull();
+      expect(receivedEvent).toBeNull();
 
       // WHEN
       eventManager.broadcast({ name: 'modifier', content: 'modified something' });
       // THEN
-      expect(recievedEvent).toEqual({ name: 'modifier', content: 'modified something' });
+      expect(receivedEvent).toEqual({ name: 'modifier', content: 'modified something' });
 
       // WHEN
       eventManager.broadcast('modifier2');
       // THEN
-      expect(recievedEvent).toEqual('modifier2');
+      expect(receivedEvent).toEqual('modifier2');
     }));
   });
 });

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

@@ -22,7 +22,7 @@ const enumImports = this.generateEntityClientEnumImports(fields);
 <%_ if (anyFieldIsDateDerived) { _%>
 import dayjs from 'dayjs/esm';
 <%_ } _%>
-<%_ for (const relationshipsByType of Object.values(differentRelationships).filter(relationshipsByType => relationshipsByType.some(relationship => (relationship.ownerSide || relationship.relationshipManyToMany) && relationship.otherEntity.entityAngularName !== entityAngularName))) {
+<%_ for (const relationshipsByType of Object.values(differentRelationships).filter(relationshipsByType => relationshipsByType.some(relationship => relationship.otherEntity.entityAngularName !== entityAngularName))) {
       const { otherEntity } = relationshipsByType[0];
 _%>
 import { I<%- otherEntity.entityAngularName %> } from 'app/entities/<%= otherEntity.entityClientRootFolder %><%= otherEntity.entityFolderName %>/<%= otherEntity.entityFileName %>.model';
@@ -41,10 +41,10 @@ _%>
   <%= fieldName %>ContentType<% if (!id /* && !fieldValidationRequired */) { %>?<% } %>: string<% if (!id /* && !fieldValidationRequired */) { %> | null<% } %>,
   <%_ } _%>
 <%_ } _%>
-<%_ for (const relationship of relationships.filter(relationship => relationship.ownerSide || relationship.relationshipManyToMany)) {
-      const { propertyName, relationshipRequired, otherEntity, id, collection, otherEntityField } = relationship;
+<%_ for (const relationship of relationships) {
+      const { propertyName, relationshipRequired, otherEntity, collection, otherEntityField } = relationship;
 _%>
-  <%= propertyName %>?: Pick<I<%= otherEntity.entityAngularName %>, '<%= otherEntity.primaryKey.name %>'<% if (otherEntity.primaryKey.name !== otherEntityField) { %> | '<%= otherEntityField %>'<% } %>><% if (collection) { %>[]<% } %> | null;
+  <%= propertyName %>?: <% if (!otherEntity.embedded && (dtoMapstruct || otherEntity.builtInUser)) { %>Pick<<% } %>I<%= otherEntity.entityAngularName %><% if (!otherEntity.embedded && (dtoMapstruct || otherEntity.builtInUser)) { %>, '<%= otherEntity.primaryKey.name %>'<% if (otherEntity.primaryKey.name !== otherEntityField) { %> | '<%= otherEntityField %>'<% } %>><% } %><% if (collection) { %>[]<% } %> | null;
 <%_ } _%>
 }
 <%_ if (primaryKey) { _%>

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

@@ -16,7 +16,8 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-<form *ngIf="<%= entityInstance %>" name="deleteForm" (ngSubmit)="confirmDelete(<%= entityInstance %>.<%= primaryKey.name %>!)">
+@if (<%= entityInstance %>) {
+<form name="deleteForm" (ngSubmit)="confirmDelete(<%= entityInstance %>.<%= primaryKey.name %>!)">
     <div class="modal-header">
         <h4 class="modal-title" data-cy="<%= entityInstance %>DeleteDialogHeading" <%= jhiPrefix %>Translate="entity.delete.title">__jhiTransformTranslate__('entity.delete.title')</h4>
 
@@ -39,3 +40,4 @@
         </button>
     </div>
 </form>
+}

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

@@ -18,7 +18,8 @@
 -%>
 <div class="d-flex justify-content-center">
   <div class="col-8">
-    <div *ngIf="<%= entityInstance %>">
+  @if (<%= entityInstance %>) {
+    <div>
       <h2 data-cy="<%= entityInstance %>DetailsHeading"><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.detail.title">__jhiTransformTranslate__('<%- i18nKeyPrefix %>.detail.title')</span></h2>
 
       <hr>
@@ -38,17 +39,21 @@ _%>
           <%# TODO: import enum and use its key as label _%>
           <span <%= jhiPrefix %>Translate="{{ '<%= frontendAppName %>.<%= fieldType %>.' + <%= entityInstance %>.<%= fieldName %> }}">{{ <%= entityInstance %>.<%= fieldName %> }}</span>
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeImage) { _%>
-          <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
-          <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)">
-            <img [src]="'data:' + <%= entityInstance %>.<%= fieldName %>ContentType + ';base64,' + <%= entityInstance %>.<%= fieldName %>" style="max-width: 100%;" alt="<%= entityInstance %> image"/>
-          </a>
-          {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
+        @if (<%= entityInstance %>.<%= 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 %> image"/>
+            </a>
+            {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
           </div>
+        }
     <%_ } else if (field.fieldTypeBinary && field.blobContentTypeAny) { _%>
-          <div *ngIf="<%= entityInstance %>.<%= fieldName %>">
-          <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open">__jhiTransformTranslate__('entity.action.open')</a>
-          {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
+        @if (<%= entityInstance %>.<%= fieldName %>) {
+          <div>
+            <a (click)="openFile(<%= entityInstance %>.<%= fieldName %>, <%= entityInstance %>.<%= fieldName %>ContentType)" <%= jhiPrefix %>Translate="entity.action.open">__jhiTransformTranslate__('entity.action.open')</a>
+            {{ <%= entityInstance %>.<%= fieldName %>ContentType }}, {{ byteSize(<%= entityInstance %>.<%= fieldName %>) }}
           </div>
+        }
     <%_ } else if (field.fieldTypeDuration) { _%>
           <span>{{ <%= entityInstance %>.<%= fieldName %> | duration }} ({{<%= entityInstance %>.<%= fieldName %> }})</span>
     <%_ } else if (field.fieldTypeTimed) { _%>
@@ -62,34 +67,40 @@ _%>
 <%_ } _%>
 <%_
 for (const relationship of relationships.filter(rel => !rel.otherEntityIsEmbedded)) {
-    const ownerSide = relationship.ownerSide;
+    const { persistableRelationship } = relationship;
     const relationshipName = relationship.relationshipName;
     const relationshipFieldName = relationship.relationshipFieldName;
     const relationshipFieldNamePlural = relationship.relationshipFieldNamePlural;
     const relationshipNameHumanized = relationship.relationshipNameHumanized;
     const otherEntityStateName = relationship.otherEntityStateName;
     const otherEntityField = relationship.otherEntityField;
-    if (ownerSide) {
+    if (persistableRelationship) {
 _%>
         <dt><span <%= jhiPrefix %>Translate="<%= i18nKeyPrefix %>.<%= relationshipName %>">__jhiTransformTranslate__('<%- i18nKeyPrefix %>.<%- relationshipName %>')</span></dt>
         <dd>
     <%_ if (relationship.otherEntityUser) { _%>
       <%_ if (relationship.collection) { _%>
-          <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
+        @for (<%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
+          <span>
             {{ <%= relationshipFieldName %>.<%= otherEntityField %> }}{{ last ? '' : ', ' }}
           </span>
+        }
       <%_ } else { _%>
           <span>{{ <%= entityInstance %>.<%= relationshipFieldName %>?.<%= otherEntityField %> }}</span>
       <%_ } _%>
     <%_ } else { _%>
       <%_ if (relationship.collection) { _%>
-          <span *ngFor="let <%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; let last = last">
+        @for (<%= relationshipFieldName %> of <%= entityInstance %>.<%= relationshipFieldNamePlural %>; track $index; let last = $last) {
+          <span>
             <a [routerLink]="['/<%= otherEntityStateName %>', <%= relationshipFieldName %>.<%= relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= relationshipFieldName %>.<%= otherEntityField %> }}</a>{{ last ? '' : ', ' }}
           </span>
+        }
       <%_ } else { _%>
-          <div *ngIf="<%= entityInstance + '.' + relationshipFieldName %>">
+        @if (<%= entityInstance + '.' + relationshipFieldName %>) {
+          <div>
             <a [routerLink]="['/<%= otherEntityStateName %>', <%= entityInstance + '.' + relationshipFieldName + '.' + relationship.otherEntity.primaryKey.name %>, 'view']">{{ <%= entityInstance %>.<%= relationshipFieldName %>.<%= otherEntityField %> }}</a>
           </div>
+        }
       <%_ } _%>
     <%_ } _%>
         </dd>
@@ -114,5 +125,6 @@ _%>
       </button>
 <%_ } _%>
     </div>
+    }
   </div>
 </div>