chore: inject() function migration

Author: hakimio

.global/integration-app.style.scss

@@ -13,11 +13,13 @@ $ng-app-variable-theme: mat.m2-define-light-theme(
             accent: $ng-app-variable-accent,
             warn: $ng-app-variable-warn,
         ),
+        typography: mat.m2-define-typography-config(),
         density: -1,
     )
 );
 
 @include mat.all-component-themes($ng-app-variable-theme);
+@include mat.typography-hierarchy($ng-app-variable-theme);
 @include mat.form-field-density(-4);
 
 html,

apps/cdk-demo/src/samples/guide/guide.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
 import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
 import {AmountFormat, InputFilter} from '@angular-ru/cdk/directives';
@@ -20,12 +20,12 @@ import {REG_EXP_ONLY_NUMBERS} from './properties/constants';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class GuideComponent {
+    private readonly fb = inject(FormBuilder);
+
     public value = 'abc';
     public valueNumbers = '123';
     public filterRegExp = /[a-z]+/;
     public onlyNumbers: RegExp = REG_EXP_ONLY_NUMBERS;
     public amountForm: FormGroup = this.fb.group({sum: null});
     public filterControl: FormControl = new FormControl(this.value);
-
-    constructor(private readonly fb: FormBuilder) {}
 }

apps/excel-demo/src/app.component.ts

@@ -1,4 +1,9 @@
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    ViewEncapsulation,
+} from '@angular/core';
 import {MatButton} from '@angular/material/button';
 import {MatDivider, MatList, MatListItem} from '@angular/material/list';
 import {MatDrawer, MatDrawerContainer, MatDrawerContent} from '@angular/material/sidenav';
@@ -34,6 +39,9 @@ interface A {
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
+    protected excel = inject(ExcelService);
+    private readonly translate = inject(TranslateService);
+
     public data: A[] = [
         {
             id: 'id',
@@ -45,10 +53,7 @@ export class AppComponent {
         },
     ];
 
-    constructor(
-        protected excel: ExcelService,
-        private readonly translate: TranslateService,
-    ) {
+    constructor() {
         this.translate.setDefaultLang('ru');
     }
 

apps/http-demo/src/samples/guide/guide.component.ts

@@ -1,4 +1,10 @@
-import {ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 
@@ -10,9 +16,9 @@ import {ApiClient} from '../../services/clients/api.client';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class GuideComponent implements OnInit, OnDestroy {
-    private readonly destroy$ = new Subject<void>();
+    private readonly apiClient = inject(ApiClient);
 
-    constructor(private readonly apiClient: ApiClient) {}
+    private readonly destroy$ = new Subject<void>();
 
     public ngOnInit(): void {
         this.fetchData();

apps/logger-demo/src/app.component.ts

@@ -13,7 +13,12 @@ import {
     TraceLog,
     WarnLog,
 } from '@angular-ru/cdk/logger';
-import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ViewEncapsulation,
+    inject,
+} from '@angular/core';
 
 @Component({
     selector: 'app-root',
@@ -23,6 +28,8 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
     encapsulation: ViewEncapsulation.None,
 })
 export class AppComponent {
+    private readonly logger = inject(LoggerService);
+
     @Logger() public loggerInjection!: LoggerService;
     @TraceLog() public trace!: LogFn;
     @DebugLog() public debug!: LogFn;
@@ -37,8 +44,6 @@ export class AppComponent {
     private readonly warnIsWork: string = 'warn is worked';
     private readonly errorIsWork: string = 'error is worked';
 
-    constructor(private readonly logger: LoggerService) {}
-
     public exampleBasicMethods(): void {
         this.logger.clear();
         this.log('log is worked');

apps/ngxs-demo/src/amount/amount.component.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 import {AmountState} from './amount.state';
@@ -11,8 +11,6 @@ import {PriceState} from './price.state';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AmountComponent {
-    constructor(
-        public price: PriceState,
-        public amount: AmountState,
-    ) {}
+    public price = inject(PriceState);
+    public amount = inject(AmountState);
 }

apps/ngxs-demo/src/amount/amount.state.ts

@@ -1,4 +1,4 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {Computed, StateRepository} from '@angular-ru/ngxs/decorators';
 import {NgxsDataRepository} from '@angular-ru/ngxs/repositories';
 import {State} from '@ngxs/store';
@@ -12,9 +12,7 @@ import {PriceState} from './price.state';
 })
 @Injectable()
 export class AmountState extends NgxsDataRepository<number> {
-    constructor(private readonly price: PriceState) {
-        super();
-    }
+    private readonly price = inject(PriceState);
 
     @Computed()
     public get sum(): number {

apps/ngxs-demo/src/app.component.ts

@@ -1,5 +1,11 @@
 import {AsyncPipe, JsonPipe} from '@angular/common';
-import {ChangeDetectionStrategy, Component, isDevMode, OnInit} from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    inject,
+    isDevMode,
+    OnInit,
+} from '@angular/core';
 import {RouterLink, RouterOutlet} from '@angular/router';
 import {Store} from '@ngxs/store';
 import {Observable} from 'rxjs';
@@ -11,12 +17,12 @@ import {Observable} from 'rxjs';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
+    private readonly store = inject(Store);
+
     public snapshot$: Observable<unknown> = this.store.select(
         (state: unknown): unknown => state,
     );
 
-    constructor(private readonly store: Store) {}
-
     public ngOnInit(): void {
         // eslint-disable-next-line no-console
         console.log('[isDevMode]', isDevMode());

apps/ngxs-demo/src/app.config.ts

@@ -15,7 +15,7 @@ import {
 import {provideNgxsDataPlugin} from '@angular-ru/ngxs';
 import {withNgxsDataStorage} from '@angular-ru/ngxs/storage';
 import {withNgxsLoggerPlugin} from '@ngxs/logger-plugin';
-import {provideStore} from '@ngxs/store';
+import {provideStore, withNgxsNoopExecutionStrategy} from '@ngxs/store';
 
 import {environment} from '../environments/environment';
 import {routes} from './app.routes';
@@ -43,6 +43,7 @@ export const appConfig: ApplicationConfig = {
                 developmentMode: !environment.production,
             },
             withNgxsLoggerPlugin(),
+            withNgxsNoopExecutionStrategy(),
         ),
         provideNgxsDataPlugin(withNgxsDataStorage()),
     ],

apps/ngxs-demo/src/article/article.component.ts

@@ -1,5 +1,5 @@
 import {AsyncPipe} from '@angular/common';
-import {ChangeDetectionStrategy, Component, OnDestroy} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject, OnDestroy} from '@angular/core';
 import {MatButton, MatIconButton} from '@angular/material/button';
 import {MatDialog} from '@angular/material/dialog';
 import {MatIcon} from '@angular/material/icon';
@@ -48,12 +48,10 @@ import {ArticleDialogComponent} from './dialog/article-dialog.component';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleComponent implements OnDestroy {
-    private readonly destroy$ = new Subject<void>();
+    public dialog = inject(MatDialog);
+    public articleEntities = inject(ArticleEntitiesState);
 
-    constructor(
-        public dialog: MatDialog,
-        public articleEntities: ArticleEntitiesState,
-    ) {}
+    private readonly destroy$ = new Subject<void>();
 
     public ngOnDestroy(): void {
         this.destroy$.next();