Update angular recipe (#40)

Author: ianthomas23

ci/typescript/create_angular_ng.sh

@@ -18,7 +18,7 @@ function merge-json() {
 npm install -g @angular/cli
 
 # 2. Create Angular application
-ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css
+ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css --zoneless=false
 
 # 3. Build and serve the initial project
 # npm run build
@@ -64,8 +64,8 @@ export class BokehJSComponent implements OnInit {
 }
 EOF
 
-# 6. Replace src/app/app.component.ts so that it uses the BokehJSComponent
-cat > src/app/app.component.ts << EOF
+# 6. Replace src/app/app.ts so that it uses the BokehJSComponent
+cat > src/app/app.ts << EOF
 import { Component } from '@angular/core'
 import { BokehJSComponent } from './bokeh-js/bokeh-js.component';
 
@@ -76,7 +76,7 @@ import { BokehJSComponent } from './bokeh-js/bokeh-js.component';
   styles: [],
 })
 
-export class AppComponent {}
+export class App {}
 EOF
 
 # 7. Remove some build warnings by allowing non ESM imports by adding to angular.json

recipes/src/recipes/typescript/angular_ng_recipe.ts

@@ -18,7 +18,7 @@ export class AngularNgRecipe extends Recipe {
 
     this.add(new CommandStep(
       'Create Angular application',
-      ['ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css']
+      ['ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css --zoneless=false']
     ));
 
     this.add(new CommandStep(
@@ -55,8 +55,8 @@ export class AngularNgRecipe extends Recipe {
     );
 
     this.add(new ReplaceFileStep(
-      'Replace `src/app/app.component.ts` so that it uses the `BokehJSComponent`',
-      'src/app/app.component.ts',
+      'Replace `src/app/app.ts` so that it uses the `BokehJSComponent`',
+      'src/app/app.ts',
       "import { Component } from '@angular/core'\n" +
       "import { BokehJSComponent } from './bokeh-js/bokeh-js.component';\n\n" +
       "@Component({\n" +
@@ -65,7 +65,7 @@ export class AngularNgRecipe extends Recipe {
       "  template: \\`<app-bokeh-js></app-bokeh-js>\\`,\n" +
       "  styles: [],\n" +
       "})\n\n" +
-      "export class AppComponent {}")
+      "export class App {}")
     );
 
     this.add(new MergeJsonStep(

typescript/angular_ng/README.md

@@ -11,7 +11,7 @@ The Angular web framework includes its own builder `ng` in the `@angular/cli` pa
 2. Create Angular application
 
     ```bash
-    ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css
+    ng new angular_ng --directory ./ --minimal --routing=false --skip-git --ssr=false --style=css --zoneless=false
     ```
 
 3. Build and serve the initial project
@@ -65,7 +65,7 @@ The Angular web framework includes its own builder `ng` in the `@angular/cli` pa
     }
     ```
 
-6. Replace `src/app/app.component.ts` so that it uses the `BokehJSComponent` containing
+6. Replace `src/app/app.ts` so that it uses the `BokehJSComponent` containing
 
     ```ts
     import { Component } from '@angular/core'
@@ -78,7 +78,7 @@ The Angular web framework includes its own builder `ng` in the `@angular/cli` pa
       styles: [],
     })
 
-    export class AppComponent {}
+    export class App {}
     ```
 
 7. Remove some build warnings by allowing non ESM imports by adding to `angular.json`

typescript/angular_ng/created/README.md

@@ -1,6 +1,6 @@
 # AngularNg
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.9.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.1.
 
 ## Development server
 

typescript/angular_ng/created/angular.json

@@ -38,10 +38,8 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/angular_ng",
-            "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
               "zone.js"
@@ -56,7 +54,6 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": [],
             "allowedCommonJsDependencies": [
               "@bokeh/bokehjs",
               "mathjax-full",
@@ -77,7 +74,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "angular_ng:build:production"
@@ -89,7 +86,7 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         }
       }
     }

typescript/angular_ng/created/package.json

@@ -9,22 +9,21 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^19.2.0",
-    "@angular/compiler": "^19.2.0",
-    "@angular/core": "^19.2.0",
-    "@angular/forms": "^19.2.0",
-    "@angular/platform-browser": "^19.2.0",
-    "@angular/platform-browser-dynamic": "^19.2.0",
-    "@angular/router": "^19.2.0",
+    "@angular/common": "^20.0.0",
+    "@angular/compiler": "^20.0.0",
+    "@angular/core": "^20.0.0",
+    "@angular/forms": "^20.0.0",
+    "@angular/platform-browser": "^20.0.0",
+    "@angular/router": "^20.0.0",
     "@bokeh/bokehjs": "file:../../../../bokeh-bokehjs-3.8.0-dev.1.tgz",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.9",
-    "@angular/cli": "^19.2.9",
-    "@angular/compiler-cli": "^19.2.0",
-    "typescript": "~5.7.2"
+    "@angular/build": "^20.0.1",
+    "@angular/cli": "^20.0.1",
+    "@angular/compiler-cli": "^20.0.0",
+    "typescript": "~5.8.2"
   }
 }

typescript/angular_ng/created/src/app/app.config.ts

@@ -1,5 +1,9 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    
+  ]
 };

typescript/angular_ng/created/src/app/app.component.ts renamed to typescript/angular_ng/created/src/app/app.ts

@@ -8,4 +8,4 @@ import { BokehJSComponent } from './bokeh-js/bokeh-js.component';
   styles: [],
 })
 
-export class AppComponent {}
+export class App {}

typescript/angular_ng/created/src/main.ts

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

typescript/angular_ng/created/tsconfig.app.json

@@ -6,10 +6,10 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts"
-  ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts"
   ]
 }