feat(nx): upgrade nx 20 and angular 19

.eslintrc.json

@@ -6,6 +6,7 @@
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
+        "@angular-eslint/no-host-metadata-property": "off",
         "@nx/enforce-module-boundaries": [
           "error",
           {
@@ -18,12 +19,6 @@
               }
             ]
           }
-        ],
-        "@angular-eslint/no-host-metadata-property": [
-          "error",
-          {
-            "allowStatic": true
-          }
         ]
       }
     },

apps/angular/1-projection/project.json

@@ -7,12 +7,12 @@
   "tags": [],
   "targets": {
     "build": {
-      "executor": "@angular-devkit/build-angular:application",
+      "executor": "@angular-devkit/build-angular:browser",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/apps/angular/1-projection",
         "index": "apps/angular/1-projection/src/index.html",
-        "browser": "apps/angular/1-projection/src/main.ts",
+        "main": "apps/angular/1-projection/src/main.ts",
         "polyfills": ["apps/angular/1-projection/src/polyfills.ts"],
         "tsConfig": "apps/angular/1-projection/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
@@ -41,7 +41,9 @@
           "outputHashing": "all"
         },
         "development": {
+          "buildOptimizer": false,
           "optimization": false,
+          "vendorChunk": true,
           "extractLicenses": false,
           "sourceMap": true,
           "namedChunks": true

apps/angular/1-projection/src/app/app.component.ts

@@ -7,12 +7,11 @@ import { TeacherCardComponent } from './component/teacher-card/teacher-card.comp
   selector: 'app-root',
   template: `
     <div class="grid grid-cols-3 gap-3">
-      <app-teacher-card></app-teacher-card>
-      <app-student-card></app-student-card>
-      <app-city-card></app-city-card>
+      <app-teacher-card />
+      <app-student-card />
+      <app-city-card />
     </div>
   `,
-  standalone: true,
   imports: [TeacherCardComponent, StudentCardComponent, CityCardComponent],
 })
 export class AppComponent {}

apps/angular/1-projection/src/app/component/city-card/city-card.component.ts

@@ -3,7 +3,6 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-city-card',
   template: 'TODO City',
-  standalone: true,
   imports: [],
 })
 export class CityCardComponent implements OnInit {

apps/angular/1-projection/src/app/component/student-card/student-card.component.ts

@@ -13,7 +13,6 @@ import { CardComponent } from '../../ui/card/card.component';
       [type]="cardType"
       customClass="bg-light-green"></app-card>
   `,
-  standalone: true,
   styles: [
     `
       ::ng-deep .bg-light-green {

apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts

@@ -20,7 +20,6 @@ import { CardComponent } from '../../ui/card/card.component';
       }
     `,
   ],
-  standalone: true,
   imports: [CardComponent],
 })
 export class TeacherCardComponent implements OnInit {

apps/angular/1-projection/src/app/ui/card/card.component.ts

@@ -36,7 +36,6 @@ import { ListItemComponent } from '../list-item/list-item.component';
       </button>
     </div>
   `,
-  standalone: true,
   imports: [NgIf, NgFor, ListItemComponent],
 })
 export class CardComponent {

apps/angular/1-projection/src/main.ts

@@ -1,4 +1,4 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent).catch((err) => console.error(err));

apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 import { PersonUtils } from './person.utils';
 
 @Component({
-  standalone: true,
   imports: [NgFor],
   selector: 'app-root',
   template: `

apps/angular/13-highly-customizable-css/src/app/page.component.ts

@@ -5,7 +5,6 @@ import { TextComponent } from './text.component';
 
 @Component({
   selector: 'page',
-  standalone: true,
   imports: [TextStaticComponent, TextComponent],
   template: `
     <static-text></static-text>

apps/angular/13-highly-customizable-css/src/app/static-text.component.ts

@@ -6,7 +6,6 @@ export type StaticTextType = 'normal' | 'warning' | 'error';
 
 @Component({
   selector: 'static-text',
-  standalone: true,
   imports: [TextComponent],
   template: `
     <text [font]="font" [color]="color">This is a static text</text>

apps/angular/16-master-dependency-injection/src/app/app.component.ts

@@ -23,7 +23,6 @@ export class ProductDirective {
 }
 
 @Component({
-  standalone: true,
   imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
   providers: [CurrencyService],
   selector: 'app-root',

apps/angular/21-anchor-navigation/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet],
   selector: 'app-root',
   template: `

apps/angular/21-anchor-navigation/src/app/foo.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
-  standalone: true,
   imports: [NavButtonComponent],
   selector: 'app-foo',
   template: `

apps/angular/21-anchor-navigation/src/app/home.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { NavButtonComponent } from './nav-button.component';
 
 @Component({
-  standalone: true,
   imports: [NavButtonComponent],
   selector: 'app-home',
   template: `

apps/angular/22-router-input/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RouterLink, RouterModule } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterLink, RouterModule, ReactiveFormsModule],
   selector: 'app-root',
   template: `

apps/angular/22-router-input/src/app/home.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 @Component({
   selector: 'app-home',
-  standalone: true,
   imports: [],
   template: `
     <div>Home</div>

apps/angular/22-router-input/src/app/test.component.ts

@@ -5,7 +5,6 @@ import { map } from 'rxjs';
 
 @Component({
   selector: 'app-subscription',
-  standalone: true,
   imports: [AsyncPipe],
   template: `
     <div>TestId: {{ testId$ | async }}</div>

apps/angular/3-directive-enhancement/src/app/app.component.ts

@@ -6,7 +6,6 @@ interface Person {
 }
 
 @Component({
-  standalone: true,
   imports: [NgFor, NgIf],
   selector: 'app-root',
   template: `

apps/angular/31-module-to-standalone/src/app/app.component.ts

@@ -25,5 +25,6 @@ import { Component } from '@angular/core';
   host: {
     class: 'flex flex-col p-4 gap-3',
   },
+  standalone: false,
 })
 export class AppComponent {}

apps/angular/32-change-detection-bug/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet],
   selector: 'app-root',
   template: `

apps/angular/32-change-detection-bug/src/app/main-navigation.component.ts

@@ -10,7 +10,6 @@ interface MenuItem {
 
 @Component({
   selector: 'app-nav',
-  standalone: true,
   imports: [RouterLink, RouterLinkActive, NgFor],
   template: `
     <ng-container *ngFor="let menu of menus">
@@ -38,7 +37,6 @@ export class NavigationComponent {
 }
 
 @Component({
-  standalone: true,
   imports: [NavigationComponent, NgIf, AsyncPipe],
   template: `
     <ng-container *ngIf="info$ | async as info">

apps/angular/33-decoupling-components/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { BtnHelmetDirective } from '@angular-challenges/decoupling/helmet';
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   imports: [BtnDisabledDirective, BtnHelmetDirective],
   selector: 'app-root',
   template: `

apps/angular/39-injection-token/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
   template: `

apps/angular/39-injection-token/src/app/phone.component.ts

@@ -3,7 +3,6 @@ import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-phone',
-  standalone: true,
   imports: [TimerContainerComponent],
   template: `
     <div class="flex gap-2">

apps/angular/39-injection-token/src/app/timer-container.component.ts

@@ -3,7 +3,6 @@ import { DEFAULT_TIMER } from './data';
 import { TimerComponent } from './timer.component';
 @Component({
   selector: 'timer-container',
-  standalone: true,
   imports: [TimerComponent],
   template: `
     <div class="flex gap-2">

apps/angular/39-injection-token/src/app/video.component.ts

@@ -3,7 +3,6 @@ import { TimerContainerComponent } from './timer-container.component';
 
 @Component({
   selector: 'app-video',
-  standalone: true,
   imports: [TimerContainerComponent],
   template: `
     <div class="flex gap-2">

apps/angular/4-typed-context-outlet/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { ListComponent } from './list.component';
 import { PersonComponent } from './person.component';
 
 @Component({
-  standalone: true,
   imports: [NgTemplateOutlet, PersonComponent, ListComponent],
   selector: 'app-root',
   template: `

apps/angular/4-typed-context-outlet/src/app/list.component.ts

@@ -9,7 +9,6 @@ import {
 
 @Component({
   selector: 'list',
-  standalone: true,
   imports: [CommonModule],
   template: `
     <div *ngFor="let item of list; index as i">

apps/angular/4-typed-context-outlet/src/app/person.component.ts

@@ -7,7 +7,6 @@ interface Person {
 }
 
 @Component({
-  standalone: true,
   imports: [NgTemplateOutlet],
   selector: 'person',
   template: `

apps/angular/44-view-transition/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet],
   selector: 'app-root',
   template: `

apps/angular/44-view-transition/src/app/blog/blog.component.ts

@@ -4,7 +4,6 @@ import { ThumbnailComponent } from './thumbnail.component';
 
 @Component({
   selector: 'blog',
-  standalone: true,
   imports: [ThumbnailComponent],
   template: `
     <div

apps/angular/44-view-transition/src/app/blog/thumbnail-header.component.ts

@@ -3,7 +3,6 @@ import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'thumbnail-header',
-  standalone: true,
   imports: [NgOptimizedImage],
   template: `
     <div class="flex gap-3">

apps/angular/44-view-transition/src/app/blog/thumbnail.component.ts

@@ -6,7 +6,6 @@ import { ThumbnailHeaderComponent } from './thumbnail-header.component';
 
 @Component({
   selector: 'blog-thumbnail',
-  standalone: true,
   imports: [NgOptimizedImage, ThumbnailHeaderComponent, RouterLinkWithHref],
   template: `
     <a [routerLink]="['post', post().id]">

apps/angular/44-view-transition/src/app/post/post-header.component.ts

@@ -3,7 +3,6 @@ import { Component, input } from '@angular/core';
 
 @Component({
   selector: 'post-header',
-  standalone: true,
   imports: [NgOptimizedImage],
   template: `
     <div class="relative">

apps/angular/44-view-transition/src/app/post/post.component.ts

@@ -12,7 +12,6 @@ import { PostHeaderComponent } from './post-header.component';
 
 @Component({
   selector: 'post',
-  standalone: true,
   imports: [
     ThumbnailHeaderComponent,
     NgOptimizedImage,

apps/angular/45-react-in-angular/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { PostComponent } from './react/post.component';
 type Post = { title: string; description: string };
 
 @Component({
-  standalone: true,
   imports: [PostComponent],
   selector: 'app-root',
   template: `

apps/angular/46-simple-animations/src/app/app.component.ts

@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   imports: [],
   selector: 'app-root',
   styles: `

apps/angular/5-crud-application/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { Component, OnInit } from '@angular/core';
 import { randText } from '@ngneat/falso';
 
 @Component({
-  standalone: true,
   imports: [CommonModule],
   selector: 'app-root',
   template: `

apps/angular/52-lazy-load-component/src/app/app.component.ts

@@ -16,6 +16,7 @@ import { Component, signal } from '@angular/core';
       }
     </div>
   `,
+  standalone: false,
 })
 export class AppComponent {
   topLoaded = signal(false);

apps/angular/52-lazy-load-component/src/app/placeholder.component.ts

@@ -13,5 +13,6 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
+  standalone: false,
 })
 export class PlaceholderComponent {}

apps/angular/52-lazy-load-component/src/app/top.component.ts

@@ -13,5 +13,6 @@ import { Component } from '@angular/core';
       height: 50%;
     }
   `,
+  standalone: false,
 })
 export class TopComponent {}

apps/angular/55-back-button-navigation/src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
   templateUrl: './app.component.html',

apps/angular/55-back-button-navigation/src/app/dialog/dialog.component.ts

@@ -11,7 +11,6 @@ import {
 @Component({
   selector: 'app-dialog-dialog',
   templateUrl: './dialog.component.html',
-  standalone: true,
   imports: [
     MatButtonModule,
     MatDialogActions,