feat: support angular@20 #292

pieh · 2025-04-11T05:33:45Z

Adjustments for Angular@20:

newly scaffolded Angular@20 project don't explicitly define outputPath which we rely on, so this adds default fallback for this case (dist/<project-name>) to make it as easy as possible to use Angular@20 on Netlify
Adding test fixtures and upgrading demo to use 20 (note that Angular@20 requires node@>=20.11 so I'm skipping tests and test setups below that version - we do have node 20 in test matrix version so we run tests against them. Additionally I do add node@22 to matrix to be have tests on current default)
don't suggest Common Engine with Angular@20 (it still works, but App Engine is much better overall, supporting way more features and integrates with dev server and it's no longer Developer Preview/experimental)

netlify · 2025-04-11T05:34:01Z

✅ Deploy Preview for plugin-angular-universal-demo ready!

Name	Link
🔨 Latest commit	`f650742`
🔍 Latest deploy log	https://app.netlify.com/projects/plugin-angular-universal-demo/deploys/68307de6c990940008a125df
😎 Deploy Preview	https://deploy-preview-292--plugin-angular-universal-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

pieh · 2025-04-11T06:12:33Z

demo/src/app/app.config.server.ts

 import { appConfig } from './app.config'
 import { serverRoutes } from './app.routes.server'

 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRoutesConfig(serverRoutes)],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],


This had to be migrated manually (checked how newly scaffolded project with npx @angular/cli@next new sets things up) as ng update @angular/cli @angular/core --next didn't cover it (initially it resulted in trying to import no longer existing provideServerRoutesConfig function)

Should this be called out somewhere that shows up in release notes? This might be relevant to folks upgrading, is that right?

We can also ask the Angular team if this is expected to not be handled

I'll check if migration handles that now (this comment was done very early on before there was any rc yet, so maybe something changed) but if it didn't change I'll check with Angular team

So this still happens (diff is what automatic migration with npx @angular/cli@next update @angular/cli @angular/core --next does):

And I also don't see a mention of it yet on https://next.angular.dev/update-guide?v=19.0-20.0&l=3 so I'll ask about this

update:
Angular 19.1 "renamed" provideServerRoutesConfig to provideServerRouting (keeping previous one for backward compat) so it was somewhat quirk of us scaffolding / migrating really early on

There is currently migration for renamed one, but not for "original" one and angular/angular-cli#30359 is looking to address this

So this will be handled automatically soon

pieh · 2025-04-11T07:18:25Z

Note - test on Node 18 fail because it's unsupported with Angular 20:

$ npm run build

> demo@0.0.0 build
> ng build --verbose

Node.js version v18.19.0 detected.
The Angular CLI requires a minimum Node.js version of v20.11.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.

Test setup would need adjustment to skip tests using Angular 20 when on not supported Node version to continue testing previous Angular major versions (or maybe drop testing this node version as it's no longer maintained anyway)

…ffolded projects setup

…in node version

pieh · 2025-05-20T09:55:14Z

.github/workflows/test.yml

-        node-version: [18.19.0, 20.13.1]
+        node-version: [18.19.1, 20.13.1]


see https://github.com/netlify/angular-runtime/actions/runs/15134325612/job/42542439173#step:6:1422 - this is just to get rid of that warning for pre-angular-20 fixtures (it requires adjustment to required checks)

serhalp

LGTM

serhalp · 2025-05-20T17:42:59Z

demo/.nvmrc

nit: could this use the more standard .node-version?

I think I'll remove it altogether and just bump node version in our demo site. This file is somewhat artifact of early (pre-rc) attempts where I didn't want to mess with existing site, but given we are close to merging 🤞 making adjustments on demo site seems fine now

removed completely in 9463872 after bumping node version in the project settings

serhalp · 2025-05-20T17:43:53Z

demo/src/app/app.config.server.ts

 import { appConfig } from './app.config'
 import { serverRoutes } from './app.routes.server'

 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRoutesConfig(serverRoutes)],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],


Should this be called out somewhere that shows up in release notes? This might be relevant to folks upgrading, is that right?

serhalp · 2025-05-20T17:44:13Z

demo/src/app/app.config.server.ts

 import { appConfig } from './app.config'
 import { serverRoutes } from './app.routes.server'

 const serverConfig: ApplicationConfig = {
-  providers: [provideServerRendering(), provideServerRoutesConfig(serverRoutes)],
+  providers: [provideServerRendering(withRoutes(serverRoutes))],


We can also ask the Angular team if this is expected to not be handled

serhalp · 2025-05-20T18:09:17Z

src/helpers/setUpEdgeFunction.js

+  let { outputPath } = workspaceType === 'nx' ? project.targets.build.options : project.architect.build.options
+
+  if (!outputPath && workspaceType === 'default') {
+    // outputPath might not be explicitly defined in angular.json
+    // so we will try default which is dist/<project-name>
+    outputPath = join('dist', projectName)
+  }
+
+  const isApplicationBuilder =
+    workspaceType === 'nx'
+      ? project.targets.build.executor.endsWith(':application')
+      : project.architect.build.builder.endsWith(':application')


nit: do project.targets.build and project.architect.build have the exact same shape? if so, we could do the nx check only one and hold the build object in a variable

They don't: build.executor vs build.builder in here.

This code was overall already there before this PR when it was introduced in https://github.com/netlify/angular-runtime/pull/263/files#diff-76ddf06bdc3bb03e611fc684812e5455f0c7bc846aae658cc44f8785a747f6ecL12-R24 - I just moved it because extracting projectName needed for fallback case was messy otherwise

serhalp · 2025-05-20T18:10:30Z

src/helpers/serverModuleHelpers.js

+    // Angular 20+ made App Engine stable, so we should not recommend Common Engine anymore
+    failBuild(
+      `server.ts doesn't seem to be Netlify compatible and is not known default. Please replace it with Netlify compatible server.ts:\n\n\`\`\`\n${NetlifyServerTsAppEngine}\`\`\``,
+    )


I wonder if this could link to something with more information? maybe just this repo's readme?

Added link to this and few other similar messages in dea254f

pieh · 2025-05-21T10:54:51Z

angular/angular-cli@d06ff3f there will be bump of min node from 20.11 to 20.19 released soon so adjusting checks / node version for test runner in 9463872

…t versions

github-actions bot added the type: chore work needed to keep the product and development running smoothly label Apr 11, 2025

pieh added 3 commits April 11, 2025 08:02

test: upgrade demo to 20-next

d1eb0de

chore(demo): ensure min supported node version

a8de33c

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

d023e2a

pieh force-pushed the chore/try-20 branch from 86b9c23 to d023e2a Compare April 11, 2025 06:02

pieh commented Apr 11, 2025

View reviewed changes

pieh added 14 commits April 18, 2025 11:09

Merge remote-tracking branch 'origin/main' into chore/try-20

074bc3c

chore: bump

f931f0b

chore: bump to rc.0

498862f

Merge remote-tracking branch 'origin/main' into chore/try-20

b3f6f44

chore: bump to newest rc

353e63a

Merge remote-tracking branch 'origin/main' into chore/try-20

32181e1

test: add 20-rc fixtures

c98527c

fix: add angular-20 server.ts signature

d308467

fix: handle case of outputPath not being explicitly defined

9f2ffc7

chore: remove outputPath from demo's angular.json to follow newly sca…

7fb6080

…ffolded projects setup

fix: nx handling

0c284ee

test: install new fixtures deps

1f18438

chore: skip angular@20 on not supported node versions

c7cdd32

chore: bump node18 version a bit to match node18 compatible angular m…

581d156

…in node version

pieh force-pushed the chore/try-20 branch from 3d434c8 to 581d156 Compare May 20, 2025 09:52

pieh commented May 20, 2025

View reviewed changes

chore: add node22 to test matrix

23ebfa0

pieh changed the title ~~test: try 20-next~~ feat: support angular@20 May 20, 2025

pieh marked this pull request as ready for review May 20, 2025 10:21

pieh requested a review from a team as a code owner May 20, 2025 10:21

github-actions bot added the type: feature code contributing to the implementation of a feature and/or user facing functionality label May 20, 2025

chore: don't suggest common engine for Angular 20

2e80a23

docs: refresh readme for Angular 20

9a50e78

serhalp previously approved these changes May 20, 2025

View reviewed changes

chore: bump min to 20.19

9463872

pieh dismissed serhalp’s stale review via 9463872 May 21, 2025 10:53

pieh added 3 commits May 22, 2025 13:26

fix: add link to repo readme for more details

dea254f

chore: upgrade demo and recreate angular-20 fixtures using most recen…

e154ae0

…t versions

Merge remote-tracking branch 'origin/main' into chore/try-20

189b651

pieh force-pushed the chore/try-20 branch from c62aec7 to 189b651 Compare May 23, 2025 11:57

chore: sync lock files

f650742

		node-version: [18.19.0, 20.13.1]
		node-version: [18.19.1, 20.13.1]

feat: support angular@20 #292

Are you sure you want to change the base?

feat: support angular@20 #292

Uh oh!

Conversation

pieh commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for plugin-angular-universal-demo ready!

Uh oh!

pieh Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pieh May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pieh commented Apr 11, 2025

Uh oh!

pieh May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serhalp left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pieh commented May 21, 2025

Uh oh!

Uh oh!

pieh commented Apr 11, 2025 •

edited

Loading

netlify bot commented Apr 11, 2025 •

edited

Loading

pieh Apr 11, 2025 •

edited

Loading

pieh May 21, 2025 •

edited

Loading

pieh May 20, 2025 •

edited

Loading