diff --git a/ci/typescript/create_angular_ng.sh b/ci/typescript/create_angular_ng.sh index 705c1d4..36df04b 100755 --- a/ci/typescript/create_angular_ng.sh +++ b/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 diff --git a/recipes/src/recipes/typescript/angular_ng_recipe.ts b/recipes/src/recipes/typescript/angular_ng_recipe.ts index 36ca7ac..31fc2ba 100644 --- a/recipes/src/recipes/typescript/angular_ng_recipe.ts +++ b/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: \\`\\`,\n" + " styles: [],\n" + "})\n\n" + - "export class AppComponent {}") + "export class App {}") ); this.add(new MergeJsonStep( diff --git a/typescript/angular_ng/README.md b/typescript/angular_ng/README.md index 6b7e72c..c0f7f6b 100644 --- a/typescript/angular_ng/README.md +++ b/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` diff --git a/typescript/angular_ng/created/README.md b/typescript/angular_ng/created/README.md index 950c517..5bac644 100644 --- a/typescript/angular_ng/created/README.md +++ b/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 diff --git a/typescript/angular_ng/created/angular.json b/typescript/angular_ng/created/angular.json index f90defe..3d98033 100644 --- a/typescript/angular_ng/created/angular.json +++ b/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" } } } diff --git a/typescript/angular_ng/created/package.json b/typescript/angular_ng/created/package.json index 6e3e3d6..9df58c5 100644 --- a/typescript/angular_ng/created/package.json +++ b/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" } } diff --git a/typescript/angular_ng/created/src/app/app.config.ts b/typescript/angular_ng/created/src/app/app.config.ts index d03bbbc..b956a9e 100644 --- a/typescript/angular_ng/created/src/app/app.config.ts +++ b/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 }), + + ] }; diff --git a/typescript/angular_ng/created/src/app/app.component.ts b/typescript/angular_ng/created/src/app/app.ts similarity index 89% rename from typescript/angular_ng/created/src/app/app.component.ts rename to typescript/angular_ng/created/src/app/app.ts index 48ed4ab..aeb81ff 100644 --- a/typescript/angular_ng/created/src/app/app.component.ts +++ b/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 {} diff --git a/typescript/angular_ng/created/src/main.ts b/typescript/angular_ng/created/src/main.ts index 35b00f3..5df75f9 100644 --- a/typescript/angular_ng/created/src/main.ts +++ b/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)); diff --git a/typescript/angular_ng/created/tsconfig.app.json b/typescript/angular_ng/created/tsconfig.app.json index 3775b37..264f459 100644 --- a/typescript/angular_ng/created/tsconfig.app.json +++ b/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" ] } diff --git a/typescript/angular_ng/created/tsconfig.json b/typescript/angular_ng/created/tsconfig.json index 5525117..5921438 100644 --- a/typescript/angular_ng/created/tsconfig.json +++ b/typescript/angular_ng/created/tsconfig.json @@ -3,7 +3,6 @@ { "compileOnSave": false, "compilerOptions": { - "outDir": "./dist/out-tsc", "strict": true, "noImplicitOverride": true, "noPropertyAccessFromIndexSignature": true, @@ -11,17 +10,22 @@ "noFallthroughCasesInSwitch": true, "skipLibCheck": true, "isolatedModules": true, - "esModuleInterop": true, "experimentalDecorators": true, - "moduleResolution": "bundler", "importHelpers": true, "target": "ES2022", - "module": "ES2022" + "module": "preserve" }, "angularCompilerOptions": { "enableI18nLegacyMessageIdFormat": false, "strictInjectionParameters": true, "strictInputAccessModifiers": true, + "typeCheckHostBindings": true, "strictTemplates": true - } + }, + "files": [], + "references": [ + { + "path": "./tsconfig.app.json" + } + ] }