Merge branch 'eneajaho-simplify-angular'

Author: krausest

frameworks/keyed/angular-nozone/angular.json

@@ -24,7 +24,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
             "outputPath": "dist/angular",
             "index": "src/index.html",

frameworks/keyed/angular-nozone/src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { NgFor } from '@angular/common';
-import { ChangeDetectorRef, Component, VERSION } from '@angular/core';
+import { ChangeDetectorRef, Component, VERSION, inject } from '@angular/core';
 
 interface Data {
     id: number;
@@ -13,15 +13,13 @@ interface Data {
     templateUrl: './app.component.html',
 })
 export class AppComponent {
+    private cdr = inject(ChangeDetectorRef);
+
     data: Array<Data> = [];
     selected?: number = undefined;
     id: number = 1;
     backup?: Array<Data> = undefined;
-    version: string;
-
-    constructor(private changeDetectorRef: ChangeDetectorRef) {
-        this.version = VERSION.full;
-    }
+    version = VERSION.full;
 
     buildData(count: number = 1000): Array<Data> {
         var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];
@@ -46,7 +44,7 @@ export class AppComponent {
     select(item: Data, event: Event) {
         event.preventDefault();
         this.selected = item.id;
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
 
     delete(item: Data, event: Event) {
@@ -57,41 +55,41 @@ export class AppComponent {
                 break;
             }
         }
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
 
     run() {
         this.data = this.buildData();
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
 
     add() {
         this.data = this.data.concat(this.buildData(1000));
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
 
     update() {
         for (let i = 0; i < this.data.length; i += 10) {
             this.data[i].label += ' !!!';
         }
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
     runLots() {
         this.data = this.buildData(10000);
         this.selected = undefined;
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
     clear() {
         this.data = [];
         this.selected = undefined;
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
     swapRows() {
         if (this.data.length > 998) {
             var a = this.data[1];
             this.data[1] = this.data[998];
             this.data[998] = a;
         }
-        this.changeDetectorRef.detectChanges();
+        this.cdr.detectChanges();
     }
 }

frameworks/keyed/angular-nozone/src/app/app.config.ts

@@ -1,6 +1,10 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { appConfig } from './app/app.config';
+import { NgZone, ɵNoopNgZone } from '@angular/core';
 
-bootstrapApplication(AppComponent, appConfig)
-  .catch((err) => console.error(err));
+bootstrapApplication(AppComponent, {
+  providers: [
+    // https://github.com/angular/angular/issues/47538
+    { provide: NgZone, useClass: ɵNoopNgZone }
+  ]
+});

frameworks/keyed/angular-nozone/src/main.ts

@@ -24,7 +24,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:browser-esbuild",
           "options": {
             "outputPath": "dist/angular",
             "index": "src/index.html",

frameworks/keyed/angular/angular.json

@@ -17,11 +17,7 @@ export class AppComponent {
     selected?: number = undefined;
     id: number = 1;
     backup?: Array<Data> = undefined;
-    version: string;
-
-    constructor() {
-        this.version = VERSION.full;
-    }
+    version = VERSION.full;
 
     buildData(count: number = 1000): Array<Data> {
         var adjectives = ["pretty", "large", "big", "small", "tall", "short", "long", "handsome", "plain", "quaint", "clean", "elegant", "easy", "angry", "crazy", "helpful", "mushy", "odd", "unsightly", "adorable", "important", "inexpensive", "cheap", "expensive", "fancy"];

frameworks/keyed/angular/src/app/app.component.ts

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