feat(nx): upgrade nx 20 and angular 19

2026-02-10 12:53:03 -05:00 · 2024-12-06 21:34:43 +01:00
parent bdc6d9ede4
commit f3be3eedff
143 changed files with 7652 additions and 7864 deletions
--- a/apps/angular/1-projection/project.json
+++ b/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
--- a/apps/angular/1-projection/src/app/app.component.ts
+++ b/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 {}
--- a/apps/angular/1-projection/src/app/component/city-card/city-card.component.ts
+++ b/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 {
--- a/apps/angular/1-projection/src/app/component/student-card/student-card.component.ts
+++ b/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 {
--- a/apps/angular/1-projection/src/app/component/teacher-card/teacher-card.component.ts
+++ b/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 {
--- a/apps/angular/1-projection/src/app/ui/card/card.component.ts
+++ b/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 {
--- a/apps/angular/1-projection/src/main.ts
+++ b/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));
--- a/apps/angular/10-utility-wrapper-pipe/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/13-highly-customizable-css/src/app/page.component.ts
+++ b/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>
--- a/apps/angular/13-highly-customizable-css/src/app/static-text.component.ts
+++ b/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>
--- a/apps/angular/16-master-dependency-injection/src/app/app.component.ts
+++ b/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',
--- a/apps/angular/21-anchor-navigation/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/21-anchor-navigation/src/app/foo.component.ts
+++ b/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: `
--- a/apps/angular/21-anchor-navigation/src/app/home.component.ts
+++ b/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: `
--- a/apps/angular/22-router-input/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/22-router-input/src/app/home.component.ts
+++ b/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>
--- a/apps/angular/22-router-input/src/app/test.component.ts
+++ b/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>
--- a/apps/angular/3-directive-enhancement/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/31-module-to-standalone/src/app/app.component.ts
+++ b/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 {}
--- a/apps/angular/32-change-detection-bug/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/32-change-detection-bug/src/app/main-navigation.component.ts
+++ b/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">
--- a/apps/angular/33-decoupling-components/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/39-injection-token/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/39-injection-token/src/app/phone.component.ts
+++ b/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">
--- a/apps/angular/39-injection-token/src/app/timer-container.component.ts
+++ b/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">
--- a/apps/angular/39-injection-token/src/app/video.component.ts
+++ b/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">
--- a/apps/angular/4-typed-context-outlet/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/4-typed-context-outlet/src/app/list.component.ts
+++ b/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">
--- a/apps/angular/4-typed-context-outlet/src/app/person.component.ts
+++ b/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: `
--- a/apps/angular/44-view-transition/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/44-view-transition/src/app/blog/blog.component.ts
+++ b/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
--- a/apps/angular/44-view-transition/src/app/blog/thumbnail-header.component.ts
+++ b/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">
--- a/apps/angular/44-view-transition/src/app/blog/thumbnail.component.ts
+++ b/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]">
--- a/apps/angular/44-view-transition/src/app/post/post-header.component.ts
+++ b/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">
--- a/apps/angular/44-view-transition/src/app/post/post.component.ts
+++ b/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,
--- a/apps/angular/45-react-in-angular/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/46-simple-animations/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/5-crud-application/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/52-lazy-load-component/src/app/app.component.ts
+++ b/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);
--- a/apps/angular/52-lazy-load-component/src/app/placeholder.component.ts
+++ b/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 {}
--- a/apps/angular/52-lazy-load-component/src/app/top.component.ts
+++ b/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 {}
--- a/apps/angular/55-back-button-navigation/src/app/app.component.ts
+++ b/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',
--- a/apps/angular/55-back-button-navigation/src/app/dialog/dialog.component.ts
+++ b/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,
--- a/apps/angular/55-back-button-navigation/src/app/home/home.component.ts
+++ b/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',
--- a/apps/angular/55-back-button-navigation/src/app/sensitive-action/sensitive-action.component.ts
+++ b/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',
--- a/apps/angular/55-back-button-navigation/src/app/simple-action/simple-action.component.ts
+++ b/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',
--- a/apps/angular/55-back-button-navigation/src/styles.scss
+++ b/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);
--- a/apps/angular/6-structural-directive/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/6-structural-directive/src/app/dashboard/admin.component.ts
+++ b/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>
--- a/apps/angular/6-structural-directive/src/app/information.component.ts
+++ b/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>
--- a/apps/angular/6-structural-directive/src/app/login.component.ts
+++ b/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: `
--- a/apps/angular/8-pure-pipe/src/app/app.component.ts
+++ b/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: `
--- a/apps/angular/9-wrap-function-pipe/src/app/app.component.ts
+++ b/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: `