chore(workspace): update sample app to Angular 20#3671
Conversation
There was a problem hiding this comment.
new file courtesy of grok-code-fast-1, we're doing something similar in other sample apps in the project, but if there's something here we don't need, let's call that out
|
|
||
| if (isMainModule(import.meta.url)) { | ||
| // eslint-disable-next-line @typescript-eslint/dot-notation | ||
| const port = process.env['PORT'] || 4000; |
There was a problem hiding this comment.
both process.env.PORT (trying to access a property on an index type) and process.env['PORT'] (please use dot notation) have some sort of error associated with it, I went with this option
we may want to take a look at lint rules in the future
| @defer (hydrate on idle) { <app-database /> } @placeholder { Database! | ||
| … } @defer (hydrate on idle) { <app-firestore /> } @placeholder { | ||
| Firestore! … } @defer (hydrate on idle) { <app-functions /> } | ||
| @placeholder { Functions! … } @defer (hydrate on idle) { | ||
| <app-messaging /> } @placeholder { Messaging! … } @defer (hydrate on | ||
| idle) { <app-remote-config /> } @placeholder { Remote Config! … } | ||
| @defer (hydrate never) { <app-storage /> } @placeholder { Storage! … | ||
| } @defer (hydrate on idle) { <app-upboats /> } @placeholder { … } |
There was a problem hiding this comment.
I'd recommend we start using prettier for formatting (something to think about)
| "scripts": { | ||
| "ng": "ng", | ||
| "start": "firebase emulators:exec --import seed \"ng serve\"", | ||
| "start": "npx --yes firebase-tools@latest emulators:exec --import seed \"ng serve\"", |
There was a problem hiding this comment.
maybe someone had firebase-tools installed globally, but I don't and I'd prefer to follow the pattern I see in the root package.json of installing this on demand
alternatively, we could install the package in the devDependencies and keep it up to date
|
@jamesdaniels any feedback for this PR? |
|
@jamesdaniels should we try to get this in before v21 comes along? 🤓 |
Continues the Angular 19 to 20 update in this PR up to Angular 21, so the sample matches the workspace library (which is on Angular 21). - bump all @angular/* to ^21.0.0 and @angular/fire to the Angular 21 build; drop the unused, deprecated @angular/animations and the deprecated @angular/platform-browser-dynamic; bump @types/node to ^22 for the Node 22 runtime. - main.server.ts: pass the BootstrapContext that Angular 21 requires for the server bootstrap. Without it, build-time route extraction fails with NG0401. - test.ts: reconcile the test setup with the app's zoneless mode. Drop the zone.js imports, switch to @angular/platform-browser/testing, and provide zoneless change detection so fixture.detectChanges works. - rename the project ng20-test to ng21-test throughout: package.json name and serve:ssr script, angular.json project key/outputPath/buildTargets, the index.html and README titles, and AppComponent.title with its spec. Builds and unit tests pass against the Angular 21 library.
|
Thanks for this, @markgoho, and for opening #3669 to track it. I picked this up to get it into the Angular 21 release, and I pushed a few commits to your branch to carry it the rest of the way. Rather than land it at Angular 20, I took it straight to Angular 21 so the sample matches the library (the workspace is on 21 now). The sample pins On top of your 19 to 20 work, the 20 to 21 commit:
|
2 participants
Checklist
yarn install,yarn testrun successfully? yes, for thesampledirectoryDescription
Updating sample app to Angular 20
Author's Notes
test.tsfile -- it kept complaining about needing Zone.js even though this is a zoneless app, since there's only 3 tests, we may want to explore Vitest as an alternative--no-verifywhen committing this, there are ~350 lint errors in the repo and I didn't want to include those fixes in this change