From 9f793be31c39fd46c4c73c898123b13857e24143 Mon Sep 17 00:00:00 2001 From: Quentin Date: Sun, 17 Dec 2023 17:53:41 +0100 Subject: [PATCH] [Angular] Angular DI: Using Inject instead of Constructor (part 2) --- ...entityFile_-delete-dialog.component.ts.ejs | 5 ++-- .../_entityFile_-detail.component.ts.ejs | 8 +++--- .../list/_entityFile_.component.ts.ejs | 18 ++++++------- .../service/_entityFile_.service.ts.ejs | 7 +++--- .../_entityFile_-update.component.ts.ejs | 25 ++++++++++--------- .../shared/alert/alert-error.component.ts.ejs | 18 ++++++++----- .../shared/language/translation.module.ts.ejs | 20 +++++++-------- .../shared/sort/sort-by.directive.spec.ts.ejs | 10 +++++--- 8 files changed, 59 insertions(+), 52 deletions(-) diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/delete/_entityFile_-delete-dialog.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/delete/_entityFile_-delete-dialog.component.ts.ejs index 64b73962f72..c74188d3067 100644 --- a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/delete/_entityFile_-delete-dialog.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/delete/_entityFile_-delete-dialog.component.ts.ejs @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @@ -33,7 +33,8 @@ import { ITEM_DELETED_EVENT } from 'app/config/navigation.constants'; export class <%= entityAngularName %>DeleteDialogComponent { <%= entityInstance %>?: I<%= entityAngularName %>; - constructor(protected <%= entityInstance %>Service: <%= entityAngularName %>Service, protected activeModal: NgbActiveModal) {} + protected <%= entityInstance %>Service = inject(<%= entityAngularName %>Service); + protected activeModal = inject(NgbActiveModal); cancel(): void { this.activeModal.dismiss(); diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/detail/_entityFile_-detail.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/detail/_entityFile_-detail.component.ts.ejs index eb7d01c76f9..710e2c05638 100644 --- a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/detail/_entityFile_-detail.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/detail/_entityFile_-detail.component.ts.ejs @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component, Input } from '@angular/core'; +import { Component, inject, Input } from '@angular/core'; import { ActivatedRoute, RouterModule } from '@angular/router'; import SharedModule from 'app/shared/shared.module'; @@ -35,12 +35,10 @@ import { DataUtils } from 'app/core/util/data-util.service'; export class <%= entityAngularName %>DetailComponent { @Input() <%= entityInstance %>: I<%= entityAngularName %> | null = null; - constructor( <%_ if (anyFieldIsBlobDerived) { _%> - protected dataUtils: DataUtils, + protected dataUtils = inject(DataUtils); <%_ } _%> - protected activatedRoute: ActivatedRoute - ) {} + protected activatedRoute = inject(ActivatedRoute); <%_ if (anyFieldIsBlobDerived) { _%> byteSize(base64String: string): string { diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.component.ts.ejs index 0478d413a0a..7ba961366bb 100644 --- a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/list/_entityFile_.component.ts.ejs @@ -29,7 +29,7 @@ const componentName = entityAngularName + 'Component'; _%> -import { Component, OnInit } from '@angular/core'; +import { Component, inject, OnInit } from '@angular/core'; <%_ if (!paginationNo) { _%> import { HttpHeaders } from '@angular/common/http'; <%_ } _%> @@ -139,22 +139,20 @@ export class <%= componentName %> implements OnInit { <%- include('infinite-scroll-template'); -%> <%_ } _%> - constructor( - protected <%= entityInstance %>Service: <%= entityAngularName %>Service, - protected activatedRoute: ActivatedRoute, - public router: Router, + public router = inject(Router); + protected <%= entityInstance %>Service = inject(<%= entityAngularName %>Service); + protected activatedRoute = inject(ActivatedRoute); <%_ if (paginationNo) { _%> - protected sortService: SortService, + protected sortService = inject(SortService); <%_ } else if (paginationInfiniteScroll) { _%> - protected parseLinks: ParseLinks, + protected parseLinks = inject(ParseLinks); <%_ } _%> <%_ if (anyFieldIsBlobDerived) { _%> - protected dataUtils: DataUtils, + protected dataUtils = inject(DataUtils); <%_ } _%> <%_ if (!readOnly) { _%> - protected modalService: NgbModal + protected modalService = inject(NgbModal); <%_ } _%> - ) {} <%_ if (paginationInfiniteScroll) { _%> reset(): void { diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/service/_entityFile_.service.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/service/_entityFile_.service.ts.ejs index c392037906d..87b8135e722 100644 --- a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/service/_entityFile_.service.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/service/_entityFile_.service.ts.ejs @@ -22,7 +22,7 @@ if (paginationPagination || paginationInfiniteScroll) { searchType = 'SearchWithPagination'; } _%> -import { Injectable } from '@angular/core'; +import { inject, Injectable } from '@angular/core'; import { HttpClient, HttpResponse } from '@angular/common/http'; import { Observable<%_ if (searchEngineAny) { _%>, asapScheduler, scheduled<%_ } _%> } from 'rxjs'; @@ -75,13 +75,14 @@ export type EntityArrayResponseType = HttpResponse[]>; @Injectable({ providedIn: 'root' }) export class <%= entityAngularName %>Service { + protected http = inject(HttpClient); + protected applicationConfigService = inject(ApplicationConfigService); + protected resourceUrl = this.applicationConfigService.getEndpointFor('api/<%= entityApiUrl %>'<% if ((applicationTypeGateway || applicationTypeMicroservice) && locals.microserviceName) { %>, '<%= microserviceName.toLowerCase() %>'<% } %>); <%_ if (searchEngineAny) { _%> protected resourceSearchUrl = this.applicationConfigService.getEndpointFor('api/<%= entityApiUrl %>/_search'<% if ((applicationTypeGateway || applicationTypeMicroservice) && locals.microserviceName) { %>, '<%= microserviceName.toLowerCase() %>'<% } %>); <%_ } _%> - constructor(protected http: HttpClient, protected applicationConfigService: ApplicationConfigService) {} - <%_ if (!readOnly) { _%> create(<%= entityInstance %>: New<%= entityAngularName %>): Observable { <%_ if (anyFieldIsDateDerived) { _%> diff --git a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.ts.ejs index f8b1d7922ad..468b66f0312 100644 --- a/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/entities/_entityFolder_/update/_entityFile_-update.component.ts.ejs @@ -22,7 +22,7 @@ .map(relationships => relationships.filter(rel => rel.persistableRelationship)) .filter(relationships => relationships.length > 0); _%> -import { Component, OnInit<% if (anyFieldHasImageContentType) { %>, ElementRef<% } %> } from '@angular/core'; +import { Component, inject, OnInit<% if (anyFieldHasImageContentType) { %>, ElementRef<% } %> } from '@angular/core'; import { HttpResponse } from '@angular/common/http'; import { ActivatedRoute } from '@angular/router'; import { Observable } from 'rxjs'; @@ -88,32 +88,33 @@ export class <%= entityAngularName %>UpdateComponent implements OnInit { <%_ } _%> <%_ } _%> - editForm: <%= entityAngularName %>FormGroup = this.<%= entityInstance %>FormService.create<%= entityAngularName %>FormGroup(); - - constructor( <%_ if (anyFieldIsBlobDerived) { _%> - protected dataUtils: DataUtils, - protected eventManager: EventManager, + protected dataUtils = inject(DataUtils); + protected eventManager = inject(EventManager); <%_ } _%> - protected <%= entityInstance %>Service: <%= entityAngularName %>Service, - protected <%= entityInstance %>FormService: <%= entityAngularName %>FormService, + protected <%= entityInstance %>Service = inject(<%= entityAngularName %>Service); + protected <%= entityInstance %>FormService = inject(<%= entityAngularName %>FormService); <%_ Object.keys(differentRelationships).forEach(key => { if (differentRelationships[key].some(rel => rel.persistableRelationship)) { const uniqueRel = differentRelationships[key][0]; if (uniqueRel.otherEntityAngularName !== entityAngularName) { _%> - protected <%= uniqueRel.otherEntityName %>Service: <%= uniqueRel.otherEntityAngularName %>Service, + protected <%= uniqueRel.otherEntityName %>Service = inject(<%= uniqueRel.otherEntityAngularName %>Service); <%_ } } }); _%> <%_ if (anyFieldHasImageContentType) { _%> - protected elementRef: ElementRef, + protected elementRef = inject(ElementRef); <%_ } _%> - protected activatedRoute: ActivatedRoute, - ) {} + protected activatedRoute = inject(ActivatedRoute); + + // eslint-disable-next-line @typescript-eslint/member-ordering + editForm: <%= entityAngularName %>FormGroup = this.<%= entityInstance %>FormService.create<%= entityAngularName %>FormGroup(); + + constructor() {} <%_ for (const relationshipsByEntity of Object.values(differentRelationships).filter(arr => arr.some(rel => rel.persistableRelationship && rel.otherEntity.primaryKey))) { const { otherEntity } = relationshipsByEntity[0]; _%> diff --git a/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs b/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs index 249293019f3..67ee7da4256 100644 --- a/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/shared/alert/alert-error.component.ts.ejs @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component, OnDestroy } from '@angular/core'; +import { Component, inject, OnDestroy } from '@angular/core'; import { HttpErrorResponse } from '@angular/common/http'; import { Subscription } from 'rxjs'; import { CommonModule } from '@angular/common'; @@ -40,13 +40,19 @@ export class AlertErrorComponent implements OnDestroy { errorListener: Subscription; httpErrorListener: Subscription; - constructor(private alertService: AlertService, private eventManager: EventManager<% if (enableTranslation) { %>, translateService: TranslateService<% } %>) { - this.errorListener = eventManager.subscribe('<%= frontendAppName %>.error', (response: EventWithContent | string) => { + private alertService = inject(AlertService); + private eventManager = inject(EventManager); +<% if (enableTranslation) { %> + private translateService = inject(TranslateService); +<% } %> + + constructor() { + this.errorListener = this.eventManager.subscribe('<%= frontendAppName %>.error', (response: EventWithContent | string) => { const errorResponse = (response as EventWithContent).content; this.addErrorAlert(errorResponse.message<% if (enableTranslation) { %>, errorResponse.key, errorResponse.params<% } %>); }); - this.httpErrorListener = eventManager.subscribe('<%= frontendAppName %>.httpError', (response: EventWithContent | string) => { + this.httpErrorListener = this.eventManager.subscribe('<%= frontendAppName %>.httpError', (response: EventWithContent | string) => { const httpErrorResponse = (response as EventWithContent).content; switch (httpErrorResponse.status) { // connection refused, server not reachable @@ -71,7 +77,7 @@ export class AlertErrorComponent implements OnDestroy { } if (errorHeader) { <%_ if (enableTranslation) { _%> - const alertData = entityKey ? { entityName: translateService.instant(`global.menu.entities.${entityKey}`) } : undefined; + const alertData = entityKey ? { entityName: this.translateService.instant(`global.menu.entities.${entityKey}`) } : undefined; <%_ } _%> this.addErrorAlert(errorHeader<% if (enableTranslation) { %>, errorHeader, alertData<% } %>); } else if (httpErrorResponse.error !== '' && httpErrorResponse.error.fieldErrors) { @@ -84,7 +90,7 @@ export class AlertErrorComponent implements OnDestroy { const convertedField: string = fieldError.field.replace(/\[\d*\]/g, '[]'); const fieldName: string = <%_ if (enableTranslation) { _%> - translateService.instant(`<%= frontendAppName %>.${fieldError.objectName as string}.${convertedField}`); + this.translateService.instant(`<%= frontendAppName %>.${fieldError.objectName as string}.${convertedField}`); <%_ } else { _%> convertedField.charAt(0).toUpperCase() + convertedField.slice(1); <%_ } _%> diff --git a/generators/angular/templates/src/main/webapp/app/shared/language/translation.module.ts.ejs b/generators/angular/templates/src/main/webapp/app/shared/language/translation.module.ts.ejs index 5c8d1dafd4e..cc922a9d0d4 100644 --- a/generators/angular/templates/src/main/webapp/app/shared/language/translation.module.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/shared/language/translation.module.ts.ejs @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { NgModule } from '@angular/core'; +import { inject, NgModule } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateService, TranslateLoader, MissingTranslationHandler } from '@ngx-translate/core'; <%_ if (applicationTypeMicroservice) { _%>import { TranslateHttpLoader } from '@ngx-translate/http-loader';<%_ } _%> @@ -42,11 +42,11 @@ function lazyTranslatePartialLoader(http: HttpClient): TranslateLoader { ], }) export class LazyTranslationModule { - constructor( - private translateService: TranslateService, - private translateLoader: TranslateLoader, - stateStorageService: StateStorageService - ) { + private translateService = inject(TranslateService); + private translateLoader = inject(TranslateLoader); + private stateStorageService = inject(StateStorageService); + + constructor() { const currentLang = translateService.store.currentLang; this.translateLoader.getTranslation(currentLang).subscribe(translation => { this.translateService.setTranslation(currentLang, translation); @@ -71,10 +71,10 @@ export class LazyTranslationModule { ], }) export class TranslationModule { - constructor( - private translateService: TranslateService, - private stateStorageService: StateStorageService - ) { + private translateService = inject(TranslateService); + private stateStorageService = inject(StateStorageService); + + constructor() { this.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 = this.stateStorageService.getLocale() ?? '<%= nativeLanguage %>'; diff --git a/generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs b/generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs index 348cb86fe2c..3c14c11a42f 100644 --- a/generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs +++ b/generators/angular/templates/src/main/webapp/app/shared/sort/sort-by.directive.spec.ts.ejs @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. -%> -import { Component, DebugElement } from '@angular/core'; +import { Component, DebugElement, inject } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { FaIconComponent, FaIconLibrary } from '@fortawesome/angular-fontawesome'; @@ -42,9 +42,11 @@ class TestSortByDirectiveComponent { sortAllowed = true; transition = jest.fn(); - constructor(library: FaIconLibrary) { - library.addIconPacks(fas); - library.addIcons(faSort, faSortDown, faSortUp); + private library = inject(FaIconLibrary); + + constructor() { + this.library.addIconPacks(fas); + this.library.addIcons(faSort, faSortDown, faSortUp); } }