feat: support angular@20 (#292)

* test: upgrade demo to 20-next

* chore(demo): ensure min supported node version

* chore: manual migration of app.config.server.ts

* chore: bump

* chore: bump to rc.0

* chore: bump to newest rc

* test: add 20-rc fixtures

* fix: add angular-20 server.ts signature

* fix: handle case of outputPath not being explicitly defined

* chore: remove outputPath from demo's angular.json to follow newly scaffolded projects setup

* fix: nx handling

* test: install new fixtures deps

* chore: skip angular@20 on not supported node versions

* chore: bump node18 version a bit to match node18 compatible angular min node version

* chore: add node22 to test matrix

* chore: don't suggest common engine for Angular 20

* docs: refresh readme for Angular 20

* chore: bump min to 20.19

* fix: add link to repo readme for more details

* chore: upgrade demo and recreate angular-20 fixtures using most recent versions

* chore: sync lock files

Author: pieh

.github/workflows/test.yml

@@ -12,12 +12,16 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-        node-version: [18.19.0, 20.13.1]
+        node-version: [18.19.1, 20.19.1, 22]
         exclude:
           - os: macOS-latest
-            node-version: 18.19.0
+            node-version: 18.19.1
           - os: windows-latest
-            node-version: 18.19.0
+            node-version: 18.19.1
+          - os: macOS-latest
+            node-version: 20.19.1
+          - os: windows-latest
+            node-version: 20.19.1
       fail-fast: false
 
     steps:
@@ -31,6 +35,6 @@ jobs:
         name: NPM Install
       - name: Linting
         run: npm run format:ci
-        if: "${{ matrix.node-version == '20.13.1' }}"
+        if: "${{ matrix.node-version == '20.19.1' }}"
       - name: Run tests
         run: npm run test

README.md

@@ -33,13 +33,13 @@ Netlify automatically detects Angular projects and sets up the latest version of
 
 There's no further configuration needed from Netlify users.
 
-### For Angular 19
+### For Angular 19 and Angular 20
 
 If you are using Server-Side Rendering you will need to install Angular Runtime in your Angular project to be able to import required utilities to successfully deploy request handler to Netlify. See [Manual Installation](#manual-installation) for installations details. See [Request handling](#request-handling) for more information about request handler.
 
 ### Manual Installation
 
-If you need to pin this plugin to a specific version or if you are using Server-Side Rendering with Angular 19, you will need to install the plugin manually.
+If you need to pin this plugin to a specific version or if you are using Server-Side Rendering with Angular 19 or Angular 20, you will need to install the plugin manually.
 
 Install it via your package manager:
 
@@ -77,9 +77,10 @@ To test this in local development, run your Angular project using `netlify serve
 ```sh
 netlify serve
 ```
-### App Engine Developer Preview usage with Angular@19
 
-If you opt into the App Engine Developer Preview accessing `Request` and `Context` objects is streamlined. Instead of custom Netlify prefixed providers, you should use the standardized injection tokens for those provided by `@angular/core` instead:
+### App Engine usage
+
+With App Engine accessing `Request` and `Context` objects is streamlined. Instead of custom Netlify prefixed providers, you should use the standardized injection tokens for those provided by `@angular/core` instead:
 
 ```diff
 +import { REQUEST, REQUEST_CONTEXT } from '@angular/core'
@@ -101,6 +102,8 @@ export class FooComponent {
 }
 ```
 
+Note that App Engine in Angular 19 is in Developer Preview and requires explicit opt-in.
+
 ## Request handling
 
 Starting with Angular@19. The build plugin makes use of the `server.ts` file to handle requests. The default Angular scaffolding generates incompatible code for Netlify so the build plugin will swap it for compatible `server.ts` file automatically if it detects default version being used. 
@@ -111,52 +114,52 @@ Make sure you have `@netlify/angular-runtime` version 2.2.0 or later installed i
 
 If you need to customize the request handling, you can do so by copying one of code snippets below to your `server.ts` file.
 
-If you did not opt into the App Engine Developer Preview:
+If you are using Angular 20 or Angular 19 with App Engine Developer Preview:
 
 ```ts
-import { CommonEngine } from '@angular/ssr/node'
-import { render } from '@netlify/angular-runtime/common-engine.mjs'
+import { AngularAppEngine, createRequestHandler } from '@angular/ssr'
+import { getContext } from '@netlify/angular-runtime/context.mjs'
 
-const commonEngine = new CommonEngine()
+const angularAppEngine = new AngularAppEngine()
+
+export async function netlifyAppEngineHandler(request: Request): Promise<Response> {
+  const context = getContext()
 
-export async function netlifyCommonEngineHandler(request: Request, context: any): Promise<Response> {
   // Example API endpoints can be defined here.
   // Uncomment and define endpoints as necessary.
   // const pathname = new URL(request.url).pathname;
   // if (pathname === '/api/hello') {
   //   return Response.json({ message: 'Hello from the API' });
   // }
 
-  return await render(commonEngine)
+  const result = await angularAppEngine.handle(request, context)
+  return result || new Response('Not found', { status: 404 })
 }
+
+/**
+ * The request handler used by the Angular CLI (dev-server and during build).
+ */
+export const reqHandler = createRequestHandler(netlifyAppEngineHandler)
 ```
 
-If you opted into the App Engine Developer Preview:
+If you are using Angular 19 and did not opt into the App Engine Developer Preview:
 
 ```ts
-import { AngularAppEngine, createRequestHandler } from '@angular/ssr'
-import { getContext } from '@netlify/angular-runtime/context.mjs'
-
-const angularAppEngine = new AngularAppEngine()
+import { CommonEngine } from '@angular/ssr/node'
+import { render } from '@netlify/angular-runtime/common-engine.mjs'
 
-export async function netlifyAppEngineHandler(request: Request): Promise<Response> {
-  const context = getContext()
+const commonEngine = new CommonEngine()
 
+export async function netlifyCommonEngineHandler(request: Request, context: any): Promise<Response> {
   // Example API endpoints can be defined here.
   // Uncomment and define endpoints as necessary.
   // const pathname = new URL(request.url).pathname;
   // if (pathname === '/api/hello') {
   //   return Response.json({ message: 'Hello from the API' });
   // }
 
-  const result = await angularAppEngine.handle(request, context)
-  return result || new Response('Not found', { status: 404 })
+  return await render(commonEngine)
 }
-
-/**
- * The request handler used by the Angular CLI (dev-server and during build).
- */
-export const reqHandler = createRequestHandler(netlifyAppEngineHandler)
 ```
 
 ### Limitations

demo.test.mjs

@@ -1,19 +1,28 @@
 import assert from 'node:assert'
+import { versions } from 'node:process'
 import { test } from 'node:test'
 
-test('edge function config', async () => {
-  const { config } = await import('./demo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs')
+import { satisfies } from 'semver'
 
-  const excludedPathsWithMaskedHashes = config.excludedPath.map((path) => path.replace(/-[A-Z\d]{8}\./, '-HASHHASH.'))
+test(
+  'edge function config',
+  {
+    skip: !satisfies(versions.node, '>=20.11'),
+  },
+  async () => {
+    const { config } = await import('./demo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs')
 
-  assert.deepEqual(excludedPathsWithMaskedHashes, [
-    '/.netlify/*',
-    '/favicon.ico',
-    '/heroes/index.html',
-    '/index.csr.html',
-    '/main-HASHHASH.js',
-    '/polyfills-HASHHASH.js',
-    '/styles-HASHHASH.css',
-    '/heroes',
-  ])
-})
+    const excludedPathsWithMaskedHashes = config.excludedPath.map((path) => path.replace(/-[A-Z\d]{8}\./, '-HASHHASH.'))
+
+    assert.deepEqual(excludedPathsWithMaskedHashes, [
+      '/.netlify/*',
+      '/favicon.ico',
+      '/heroes/index.html',
+      '/index.csr.html',
+      '/main-HASHHASH.js',
+      '/polyfills-HASHHASH.js',
+      '/styles-HASHHASH.css',
+      '/heroes',
+    ])
+  },
+)

demo/angular.json

@@ -11,9 +11,8 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/demo",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
@@ -59,7 +58,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "demo:build:production"
@@ -71,13 +70,13 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
             "buildTarget": "demo:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -99,5 +98,31 @@
   },
   "cli": {
     "analytics": false
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }