Fix linting errors

Author: jeroenheijmans

src/app/app-menu.component.ts

@@ -1,11 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { AuthService } from './core/auth.service';
 
 @Component({
-    selector: 'app-menu',
-    template: `<nav class="navbar navbar-expand-sm navbar-light bg-light">
+  selector: 'app-menu',
+  template: `<nav class="navbar navbar-expand-sm navbar-light bg-light">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" routerLink="basics/home">Home</a>
@@ -40,25 +40,27 @@ import { AuthService } from './core/auth.service';
         <button href="#" (click)="logout()" class="btn btn-link">(log out)</button>
       }
     </nav>`,
-    standalone: false
+  standalone: false
 })
 export class AppMenuComponent {
+  private authService = inject(AuthService);
+
   isAuthenticated$: Observable<boolean>;
 
-  constructor(private authService: AuthService) {
-    this.isAuthenticated$ = authService.isAuthenticated$;
+  constructor() {
+    this.isAuthenticated$ = this.authService.isAuthenticated$;
   }
 
   login() {
- this.authService.login();
-}
+    this.authService.login();
+  }
   logout() {
- this.authService.logout();
-}
+    this.authService.logout();
+  }
 
   get email(): string {
     return this.authService.identityClaims
-    ? (this.authService.identityClaims as any)['email']
-    : '-';
+      ? (this.authService.identityClaims as any)['email']
+      : '-';
   }
 }

src/app/app.component.ts

@@ -1,14 +1,14 @@
 /* eslint-disable brace-style */
 /* eslint-disable max-len */
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { AuthService } from './core/auth.service';
 
 @Component({
-    selector: 'app-root',
-    template: `<div class="container-fluid">
+  selector: 'app-root',
+  template: `<div class="container-fluid">
     <app-menu></app-menu>
     <div class="container-fluid mt-2">
       <h1>Welcome</h1>
@@ -41,16 +41,16 @@ import { AuthService } from './core/auth.service';
       </table>
     </div>
   </div>`,
-    standalone: false
+  standalone: false
 })
 export class AppComponent {
+  private authService = inject(AuthService);
+
   isAuthenticated$: Observable<boolean>;
   isDoneLoading$: Observable<boolean>;
   canActivateProtectedRoutes$: Observable<boolean>;
 
-  constructor(
-    private authService: AuthService,
-  ) {
+  constructor() {
     this.isAuthenticated$ = this.authService.isAuthenticated$;
     this.isDoneLoading$ = this.authService.isDoneLoading$;
     this.canActivateProtectedRoutes$ = this.authService.canActivateProtectedRoutes$;

src/app/core/auth-guard-with-forced-login.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { filter, switchMap, tap } from 'rxjs/operators';
@@ -7,11 +7,8 @@ import { AuthService } from './auth.service';
 
 @Injectable()
 export class AuthGuardWithForcedLogin {
+  private authService = inject(AuthService);
 
-  constructor(
-    private authService: AuthService,
-  ) {
-  }
 
   canActivate(
     route: ActivatedRouteSnapshot,

src/app/core/auth-guard.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
@@ -7,9 +7,7 @@ import { AuthService } from './auth.service';
 
 @Injectable()
 export class AuthGuard {
-  constructor(
-    private authService: AuthService,
-  ) { }
+  private authService = inject(AuthService);
 
   canActivate(
     route: ActivatedRouteSnapshot,

src/app/core/auth.service.ts

@@ -1,13 +1,16 @@
 /* eslint-disable brace-style */
 
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Router } from '@angular/router';
 import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService {
+  private oauthService = inject(OAuthService);
+  private router = inject(Router);
+
 
   private isAuthenticatedSubject$ = new BehaviorSubject<boolean>(false);
   public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
@@ -35,10 +38,7 @@ export class AuthService {
     this.router.navigateByUrl('/should-login');
   }
 
-  constructor(
-    private oauthService: OAuthService,
-    private router: Router,
-  ) {
+  constructor() {
     // Useful for debugging:
     this.oauthService.events.subscribe(event => {
       if (event instanceof OAuthErrorEvent) {

src/app/core/core.module.ts

@@ -1,5 +1,5 @@
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { ModuleWithProviders, NgModule, Optional, SkipSelf, inject, provideAppInitializer } from '@angular/core';
+import { ModuleWithProviders, NgModule, inject, provideAppInitializer } from '@angular/core';
 import { AuthConfig, OAuthModule, OAuthModuleConfig, OAuthStorage } from 'angular-oauth2-oidc';
 import { authAppInitializerFactory } from './auth-app-initializer.factory';
 import { authConfig } from './auth-config';
@@ -37,7 +37,9 @@ export class CoreModule {
     };
   }
 
-  constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
+  constructor() {
+    const parentModule = inject(CoreModule, { optional: true, skipSelf: true });
+
     if (parentModule) {
       throw new Error('CoreModule is already loaded. Import it in the AppModule only');
     }

src/app/feature-basics/admin1.component.ts

@@ -1,21 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiService } from '../shared/api.service';
 
 @Component({
-    selector: 'app-admin',
-    template: `<p class="alert alert-danger">
+  selector: 'app-admin',
+  template: `<p class="alert alert-danger">
     This is the <strong>⚙ ADMIN</strong> component.
     It will not redirect you to the login server.
     - {{ apiResponse | async }}
   </p>`,
-    standalone: false
+  standalone: false
 })
 export class Admin1Component implements OnInit {
-  apiResponse!: Observable<string>;
+  private apiService = inject(ApiService);
 
-  constructor(private apiService: ApiService) { }
+  apiResponse!: Observable<string>;
 
   ngOnInit() {
     this.apiResponse = this.apiService.getProtectedApiResponse();

src/app/feature-basics/home.component.ts

@@ -1,20 +1,20 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiService } from '../shared/api.service';
 
 @Component({
-    selector: 'app-home',
-    template: `<p class="alert alert-primary">
+  selector: 'app-home',
+  template: `<p class="alert alert-primary">
     This is the <strong>🏠 HOME</strong> component.
     - {{ apiResponse | async }}
   </p>`,
-    standalone: false
+  standalone: false
 })
 export class HomeComponent implements OnInit {
-  apiResponse!: Observable<string>;
+  private apiService = inject(ApiService);
 
-  constructor(private apiService: ApiService) { }
+  apiResponse!: Observable<string>;
 
   ngOnInit() {
     this.apiResponse = this.apiService.getProtectedApiResponse();

src/app/feature-extras/admin2.component.ts

@@ -1,21 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { ApiService } from '../shared/api.service';
 
 @Component({
-    selector: 'app-admin',
-    template: `<p class="alert alert-danger">
+  selector: 'app-admin',
+  template: `<p class="alert alert-danger">
     This is the <strong>🔧 ADMIN 2</strong> component.
     It will redirect you to login if needed.
     - {{ apiResponse | async }}
   </p>`,
-    standalone: false
+  standalone: false
 })
 export class Admin2Component implements OnInit {
-  apiResponse!: Observable<string>;
+  private apiService = inject(ApiService);
 
-  constructor(private apiService: ApiService) { }
+  apiResponse!: Observable<string>;
 
   ngOnInit() {
     this.apiResponse = this.apiService.getProtectedApiResponse();

src/app/shared/api.service.ts

@@ -1,11 +1,11 @@
 import { HttpClient, HttpErrorResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
 @Injectable()
 export class ApiService {
-  constructor(private http: HttpClient) { }
+  private http = inject(HttpClient);
 
   getProtectedApiResponse(): Observable<string> {
     return this.http.get<any>('https://demo.duendesoftware.com/api/test')