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-teacher-card />
-      <app-student-card></app-student-card>
+      <app-student-card />
-      <app-city-card></app-city-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,

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

@@ -3,7 +3,6 @@ import { MatButtonModule } from '@angular/material/button';
 import { RouterLink } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [MatButtonModule, RouterLink],
   selector: 'app-home',
   templateUrl: './home.component.html',

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

@@ -4,7 +4,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
-  standalone: true,
   imports: [MatButtonModule],
   selector: 'app-sensitive-action',
   templateUrl: './sensitive-action.component.html',

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

@@ -4,7 +4,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { DialogComponent } from '../dialog/dialog.component';
 
 @Component({
-  standalone: true,
   imports: [MatButtonModule],
   selector: 'app-simple-action',
   templateUrl: './simple-action.component.html',

apps/angular/55-back-button-navigation/src/styles.scss

@@ -6,7 +6,8 @@
 @tailwind components;
 @tailwind utilities;
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 $theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $theme-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

apps/angular/6-structural-directive/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/6-structural-directive/src/app/dashboard/admin.component.ts

@@ -4,7 +4,6 @@ import { ButtonComponent } from '../button.component';
 
 @Component({
   selector: 'app-dashboard',
-  standalone: true,
   imports: [RouterLink, ButtonComponent],
   template: `
     <p>dashboard for Admin works!</p>

apps/angular/6-structural-directive/src/app/information.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.store';
 
 @Component({
   selector: 'app-information',
-  standalone: true,
   imports: [CommonModule],
   template: `
     <h2 class="mt-10 text-xl">Information Panel</h2>

apps/angular/6-structural-directive/src/app/login.component.ts

@@ -14,7 +14,6 @@ import {
 import { UserStore } from './user.store';
 
 @Component({
-  standalone: true,
   imports: [InformationComponent, RouterLink, ButtonComponent],
   selector: 'app-login',
   template: `

apps/angular/8-pure-pipe/src/app/app.component.ts

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

apps/angular/9-wrap-function-pipe/src/app/app.component.ts

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

apps/forms/41-control-value-accessor/src/app/app.component.ts

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

apps/forms/41-control-value-accessor/src/app/feedback-form/feedback-form.component.ts

@@ -8,7 +8,6 @@ import {
 import { RatingControlComponent } from '../rating-control/rating-control.component';
 
 @Component({
-  standalone: true,
   imports: [RatingControlComponent, ReactiveFormsModule],
   selector: 'app-feedback-form',
   templateUrl: 'feedback-form.component.html',

apps/forms/48-avoid-losing-form-data/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { RouterOutlet } from '@angular/router';
 import { NavComponent } from './ui/nav.component';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet, NavComponent],
   selector: 'app-root',
   template: `

apps/forms/48-avoid-losing-form-data/src/app/pages/join.component.ts

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormComponent } from '../ui/form.component';
 
 @Component({
-  standalone: true,
   imports: [FormComponent],
   template: `
     <section class="mx-auto	max-w-screen-sm">

apps/forms/48-avoid-losing-form-data/src/app/ui/form.component.ts

@@ -3,7 +3,6 @@ import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-form',
-  standalone: true,
   imports: [ReactiveFormsModule],
   template: `
     <form [formGroup]="form" (ngSubmit)="onSubmit()" class="space-y-4">

apps/forms/48-avoid-losing-form-data/src/app/ui/nav.component.ts

@@ -3,7 +3,6 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
 
 @Component({
   selector: 'app-nav',
-  standalone: true,
   imports: [RouterLink, RouterLinkActive],
   template: `
     <nav

apps/ngrx/2-effect-vs-selector/src/app/app.component.ts

@@ -15,7 +15,6 @@ import { loadUsers } from './store/user/user.actions';
 
 @Component({
   selector: 'app-root',
-  standalone: true,
   imports: [NgFor, AsyncPipe],
   template: `
     <h1>Activity Board</h1>

apps/ngrx/7-power-of-effect/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { Store } from '@ngrx/store';
 import { appActions } from './app.actions';
 
 @Component({
-  standalone: true,
   imports: [RouterOutlet, RouterLink],
   selector: 'app-root',
   template: `

apps/ngrx/7-power-of-effect/src/app/app.config.ts

@@ -1,5 +1,9 @@
 import { FakeBackendService } from '@angular-challenges/power-of-effect/backend';
-import { APP_INITIALIZER, ApplicationConfig, inject } from '@angular/core';
+import {
+  ApplicationConfig,
+  inject,
+  provideAppInitializer,
+} from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter } from '@angular/router';
 import { provideEffects } from '@ngrx/effects';
@@ -27,22 +31,20 @@ export const appConfig: ApplicationConfig = {
     provideStore(REDUCERS),
     provideEffects([TeacherEffects, StudentEffects]),
     provideRouter(ROUTES),
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      const initializerFn = (() => {
-      multi: true,
-      useFactory: () => {
         const service = inject(FakeBackendService);
         return () => service.start();
-      },
+      })();
-    },
+      return initializerFn();
-    {
+    }),
-      provide: APP_INITIALIZER,
+    provideAppInitializer(() => {
-      multi: true,
+      const initializerFn = (() => {
-      useFactory: () => {
         const service = inject(NotificationService);
         return () => service.init();
-      },
+      })();
-    },
+      return initializerFn();
+    }),
     provideAnimations(),
   ],
 };

apps/ngrx/7-power-of-effect/src/app/school/school.component.ts

@@ -5,7 +5,6 @@ import { provideComponentStore } from '@ngrx/component-store';
 import { SchoolStore } from './school.store';
 
 @Component({
-  standalone: true,
   imports: [NgFor, AsyncPipe],
   providers: [provideComponentStore(SchoolStore)],
   selector: 'school',

apps/ngrx/7-power-of-effect/src/app/student/student.component.ts

@@ -5,7 +5,6 @@ import { Store } from '@ngrx/store';
 import { StudentSelectors } from './store/student.selectors';
 
 @Component({
-  standalone: true,
   imports: [NgFor, AsyncPipe],
   selector: 'student',
   template: `

apps/ngrx/7-power-of-effect/src/app/teacher/teacher.component.ts

@@ -5,7 +5,6 @@ import { Store } from '@ngrx/store';
 import { TeacherSelectors } from './store/teacher.selectors';
 
 @Component({
-  standalone: true,
   imports: [NgFor, AsyncPipe],
   selector: 'teacher',
   template: `

apps/nx/42-static-vs-dynamic-import/src/app/app.component.ts

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

apps/performance/12-optimize-change-detection/src/app/app.component.ts

@@ -3,7 +3,6 @@ import { Component, HostListener } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
 @Component({
-  standalone: true,
   imports: [NgIf, AsyncPipe],
   selector: 'app-root',
   template: `

apps/performance/34-default-vs-onpush/src/app/app.component.ts

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

apps/performance/34-default-vs-onpush/src/app/person-list.component.ts

@@ -10,7 +10,6 @@ import { MatListModule } from '@angular/material/list';
 
 @Component({
   selector: 'app-person-list',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,

apps/performance/34-default-vs-onpush/src/app/random.component.ts

@@ -3,7 +3,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-random',
-  standalone: true,
   template: `
     <div cd-flash>I do nothing but I'm here</div>
   `,

apps/performance/35-memoization/src/app/app.component.ts

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

apps/performance/35-memoization/src/app/person-list.component.ts

@@ -17,7 +17,6 @@ const fibonacci = (num: number): number => {
 
 @Component({
   selector: 'app-person-list',
-  standalone: true,
   imports: [
     CommonModule,
     FormsModule,

apps/performance/36-ngfor-optimization/src/app/app.component.ts

@@ -6,7 +6,6 @@ import { PersonService } from './list.service';
 import { PersonListComponent } from './person-list.component';
 
 @Component({
-  standalone: true,
   imports: [
     PersonListComponent,
     FormsModule,

apps/performance/36-ngfor-optimization/src/app/person-list.component.ts

@@ -5,7 +5,6 @@ import { Person } from './person.model';
 
 @Component({
   selector: 'app-person-list',
-  standalone: true,
   imports: [CommonModule],
   template: `
     <div

apps/performance/37-optimize-big-list/src/app/app.component.ts

@@ -8,7 +8,6 @@ import { PersonService } from './list.service';
 import { PersonListComponent } from './person-list.component';
 
 @Component({
-  standalone: true,
   imports: [
     NgIf,
     PersonListComponent,

apps/performance/37-optimize-big-list/src/app/person-list.component.ts

@@ -6,7 +6,6 @@ import { Person } from './person.model';
 
 @Component({
   selector: 'app-person-list',
-  standalone: true,
   imports: [CommonModule, NgForTrackByModule],
   template: `
     <div class="relative h-[300px] overflow-hidden">

apps/performance/40-web-workers/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { HeavyCalculationService } from './heavy-calculation.service';
 import { UnknownPersonComponent } from './unknown-person/unknown-person.component';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, UnknownPersonComponent],
   providers: [HeavyCalculationService],
   selector: 'app-root',

apps/rxjs/11-high-order-operator-bug/src/app/app.component.ts

@@ -6,7 +6,6 @@ import { AppService } from './app.service';
 import { TopicType } from './localDB.service';
 
 @Component({
-  standalone: true,
   selector: 'button-delete-topic',
   imports: [AsyncPipe],
   template: `
@@ -36,7 +35,6 @@ export class ButtonDeleteComponent {
 }
 
 @Component({
-  standalone: true,
   imports: [AsyncPipe, NgFor, ButtonDeleteComponent],
   selector: 'app-root',
   template: `

apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts

@@ -18,7 +18,6 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
     </div>
   `,
   imports: [MatDialogModule, MatButtonModule, NgFor],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TopicModalComponent {

apps/rxjs/14-race-condition/src/styles.scss

@@ -2,7 +2,8 @@
 
 @use '@angular/material' as mat;
 
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 
 $theme-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
 $theme-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);

apps/rxjs/38-catch-error/src/app/app.component.ts

@@ -6,7 +6,6 @@ import { FormsModule } from '@angular/forms';
 import { Subject, concatMap, map } from 'rxjs';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, FormsModule],
   selector: 'app-root',
   template: `

apps/rxjs/49-hold-to-save-button/src/app/app.component.ts

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

apps/signal/30-interop-rxjs-signal/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/signal/30-interop-rxjs-signal/src/app/detail/detail.component.ts

@@ -5,7 +5,6 @@ import { Photo } from '../photo.model';
 
 @Component({
   selector: 'app-photos',
-  standalone: true,
   imports: [DatePipe, RouterLink],
   template: `
     <img src="{{ photo.url_m }}" alt="{{ photo.title }}" class="image" />

apps/signal/30-interop-rxjs-signal/src/app/list/photos.component.ts

@@ -13,7 +13,6 @@ import { PhotoStore } from './photos.store';
 
 @Component({
   selector: 'app-photos',
-  standalone: true,
   imports: [
     ReactiveFormsModule,
     MatFormFieldModule,

apps/signal/30-interop-rxjs-signal/src/app/list/photos.store.ts

@@ -1,10 +1,10 @@
-import { Injectable, inject } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import {
   ComponentStore,
   OnStateInit,
   OnStoreInit,
-  tapResponse,
 } from '@ngrx/component-store';
+import { tapResponse } from '@ngrx/operators';
 import { pipe } from 'rxjs';
 import { filter, mergeMap, tap } from 'rxjs/operators';
 import { Photo } from '../photo.model';

apps/signal/43-signal-input/src/app/app.component.ts

@@ -1,10 +1,8 @@
-import { JsonPipe } from '@angular/common';
 import { Component } from '@angular/core';
 import { UserComponent } from './user.component';
 
 @Component({
-  standalone: true,
+  imports: [UserComponent],
-  imports: [UserComponent, JsonPipe],
   selector: 'app-root',
   template: `
     <div class="flex flex-col gap-3">

apps/signal/43-signal-input/src/app/user.component.ts

@@ -16,7 +16,6 @@ const ageToCategory = (age: number): Category => {
 
 @Component({
   selector: 'app-user',
-  standalone: true,
   imports: [TitleCasePipe],
   template: `
     {{ fullName | titlecase }} plays tennis in the {{ category }} category!!

apps/signal/50-bug-in-effect/src/app/app.component.ts

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

apps/signal/51-function-call-effect/src/app/action.component.ts

@@ -9,7 +9,6 @@ import { FormsModule } from '@angular/forms';
 import { UserService } from './user.service';
 
 @Component({
-  standalone: true,
   imports: [FormsModule],
   selector: 'app-actions',
   template: `

apps/signal/51-function-call-effect/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { ActionsComponent } from './action.component';
 import { UserService } from './user.service';
 
 @Component({
-  standalone: true,
   imports: [FormsModule, ActionsComponent],
   selector: 'app-root',
   template: `

apps/signal/53-big-signal-performance/src/app/address.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
 
 @Component({
   selector: 'address-user',
-  standalone: true,
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Address:

apps/signal/53-big-signal-performance/src/app/app.component.ts

@@ -6,7 +6,6 @@ import { NoteComponent } from './note.component';
 import { UserFormComponent } from './user-form.component';
 
 @Component({
-  standalone: true,
   selector: 'app-root',
   template: `
     <name />

apps/signal/53-big-signal-performance/src/app/job.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
 
 @Component({
   selector: 'job',
-  standalone: true,
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Job:

apps/signal/53-big-signal-performance/src/app/name.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
 
 @Component({
   selector: 'name',
-  standalone: true,
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Name: {{ userService.user().name }}

apps/signal/53-big-signal-performance/src/app/note.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
 
 @Component({
   selector: 'note',
-  standalone: true,
   template: `
     <div cd-flash class="m-4 block border border-gray-500 p-4">
       Note: {{ userService.user().note }}

apps/signal/53-big-signal-performance/src/app/user-form.component.ts

@@ -4,7 +4,6 @@ import { UserStore } from './user.service';
 
 @Component({
   selector: 'user-form',
-  standalone: true,
   imports: [ReactiveFormsModule],
   template: `
     <form [formGroup]="form" (ngSubmit)="submit()" class="flex flex-col gap-4">

apps/signal/54-pipe-observable-to-signal/src/app/app.component.ts

@@ -4,7 +4,6 @@ import { ProductRowComponent } from './product-row.component';
 import { products } from './product.model';
 
 @Component({
-  standalone: true,
   imports: [TableComponent, ProductRowComponent],
   selector: 'app-root',
   template: `

apps/signal/54-pipe-observable-to-signal/src/app/product-row.component.ts

@@ -10,7 +10,6 @@ import { CurrencyService } from './currency.service';
 import { Product } from './product.model';
 
 @Component({
-  standalone: true,
   selector: 'tr[product-row]',
   template: `
     <td>{{ productInfo.name }}</td>