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"
  ]
 }