Skip to content

Commit 050c484

Browse files
armando-navarroarmando-navarro
committed
chore(sample): carry the sample app to Angular 21
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.
1 parent ee6a038 commit 050c484

9 files changed

Lines changed: 3741 additions & 4387 deletions

File tree

‎sample/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Ng19Test
1+
# Ng21Test
22

3-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
44

55
## Development server
66

‎sample/angular.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": 1,
44
"newProjectRoot": "projects",
55
"projects": {
6-
"ng20-test": {
6+
"ng21-test": {
77
"projectType": "application",
88
"schematics": {},
99
"root": "",
@@ -13,7 +13,7 @@
1313
"build": {
1414
"builder": "@angular/build:application",
1515
"options": {
16-
"outputPath": "dist/ng20-test",
16+
"outputPath": "dist/ng21-test",
1717
"index": "src/index.html",
1818
"browser": "src/main.ts",
1919
"tsConfig": "tsconfig.app.json",
@@ -60,10 +60,10 @@
6060
"builder": "@angular/build:dev-server",
6161
"configurations": {
6262
"production": {
63-
"buildTarget": "ng20-test:build:production"
63+
"buildTarget": "ng21-test:build:production"
6464
},
6565
"development": {
66-
"buildTarget": "ng20-test:build:development"
66+
"buildTarget": "ng21-test:build:development"
6767
}
6868
},
6969
"defaultConfiguration": "development"

‎sample/package-lock.json‎

Lines changed: 3687 additions & 4331 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/package.json‎

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
{
2-
"name": "ng20-test",
2+
"name": "ng21-test",
33
"version": "0.0.0",
44
"scripts": {
55
"ng": "ng",
66
"start": "npx --yes firebase-tools@latest emulators:exec --import seed \"ng serve\"",
77
"build": "ng build",
88
"watch": "ng build --watch --configuration development",
99
"test": "ng test",
10-
"serve:ssr:ng20-test": "node dist/ng20-test/server/server.mjs"
10+
"serve:ssr:ng21-test": "node dist/ng21-test/server/server.mjs"
1111
},
1212
"private": true,
1313
"dependencies": {
14-
"@angular/animations": "^20.2.4",
15-
"@angular/common": "^20.2.4",
16-
"@angular/compiler": "^20.2.4",
17-
"@angular/core": "^20.2.4",
18-
"@angular/fire": "file:../angular-fire-20.0.0.tgz",
19-
"@angular/forms": "^20.2.4",
20-
"@angular/platform-browser": "^20.2.4",
21-
"@angular/platform-browser-dynamic": "^20.2.4",
22-
"@angular/platform-server": "^20.2.4",
23-
"@angular/router": "^20.2.4",
24-
"@angular/ssr": "^20.2.2",
14+
"@angular/common": "^21.0.0",
15+
"@angular/compiler": "^21.0.0",
16+
"@angular/core": "^21.0.0",
17+
"@angular/fire": "file:../angular-fire-21.0.0-rc.0.tgz",
18+
"@angular/forms": "^21.0.0",
19+
"@angular/platform-browser": "^21.0.0",
20+
"@angular/platform-server": "^21.0.0",
21+
"@angular/router": "^21.0.0",
22+
"@angular/ssr": "^21.0.0",
2523
"cookie-parser": "^1.4.7",
2624
"cookie-store": "^4.0.0-next.4",
2725
"express": "^4.18.2",
@@ -31,14 +29,14 @@
3129
"tslib": "^2.3.0"
3230
},
3331
"devDependencies": {
34-
"@angular/build": "^20.2.2",
35-
"@angular/cli": "^20.2.2",
36-
"@angular/compiler-cli": "^20.2.4",
32+
"@angular/build": "^21.0.0",
33+
"@angular/cli": "^21.0.0",
34+
"@angular/compiler-cli": "^21.0.0",
3735
"@types/cookie-parser": "^1.4.8",
3836
"@types/express": "^4.17.17",
3937
"@types/jasmine": "~5.1.0",
4038
"@types/js-cookie": "^3.0.6",
41-
"@types/node": "^18.18.0",
39+
"@types/node": "^22.0.0",
4240
"jasmine-core": "~5.4.0",
4341
"karma": "~6.4.0",
4442
"karma-chrome-launcher": "~3.2.0",

‎sample/src/app/app.component.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ describe('AppComponent', () => {
2626
expect(app).toBeTruthy();
2727
});
2828

29-
it(`should have the 'ng20-test' title`, () => {
29+
it(`should have the 'ng21-test' title`, () => {
3030
const fixture = TestBed.createComponent(AppComponent);
3131
const app = fixture.componentInstance;
32-
expect(app.title).toEqual('ng20-test');
32+
expect(app.title).toEqual('ng21-test');
3333
});
3434

3535
it('should render title', () => {

‎sample/src/app/app.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,5 @@ import { UpboatsComponent } from './upboats/upboats.component';
3737
`,
3838
})
3939
export class AppComponent {
40-
title = 'ng20-test';
40+
title = 'ng21-test';
4141
}

‎sample/src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Ng20Test</title>
5+
<title>Ng21Test</title>
66
<base href="/">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" type="image/x-icon" href="favicon.ico">

‎sample/src/main.server.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { bootstrapApplication } from '@angular/platform-browser';
1+
import { bootstrapApplication, type BootstrapContext } from '@angular/platform-browser';
22
import { AppComponent } from './app/app.component';
33
import { config } from './app/app.config.server';
44

5-
const bootstrap = () => bootstrapApplication(AppComponent, config);
5+
const bootstrap = (context: BootstrapContext) =>
6+
bootstrapApplication(AppComponent, config, context);
67

78
export default bootstrap;

‎sample/src/test.ts‎

Lines changed: 26 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1-
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2-
3-
import 'zone.js';
4-
import 'zone.js/testing';
5-
6-
import { getTestBed } from '@angular/core/testing';
7-
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
8-
import { getAuth, provideAuth } from '@angular/fire/auth';
9-
import {
10-
BrowserDynamicTestingModule,
11-
platformBrowserDynamicTesting,
12-
} from '@angular/platform-browser-dynamic/testing';
13-
import { environment } from './environments/environment';
14-
15-
// First, initialize the Angular testing environment.
16-
getTestBed().initTestEnvironment(
17-
BrowserDynamicTestingModule,
18-
platformBrowserDynamicTesting()
19-
);
20-
21-
// Setup Firebase for testing after test environment is initialized
22-
getTestBed().configureTestingModule({
23-
providers: [
24-
provideFirebaseApp(() => initializeApp(environment.firebase)),
25-
provideAuth(() => getAuth()),
26-
],
27-
});
1+
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2+
3+
import { provideZonelessChangeDetection } from '@angular/core';
4+
import { getTestBed } from '@angular/core/testing';
5+
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
6+
import { getAuth, provideAuth } from '@angular/fire/auth';
7+
import {
8+
BrowserTestingModule,
9+
platformBrowserTesting,
10+
} from '@angular/platform-browser/testing';
11+
import { environment } from './environments/environment';
12+
13+
// First, initialize the Angular testing environment.
14+
getTestBed().initTestEnvironment(
15+
BrowserTestingModule,
16+
platformBrowserTesting()
17+
);
18+
19+
// Setup Firebase for testing after test environment is initialized
20+
getTestBed().configureTestingModule({
21+
providers: [
22+
provideZonelessChangeDetection(),
23+
provideFirebaseApp(() => initializeApp(environment.firebase)),
24+
provideAuth(() => getAuth()),
25+
],
26+
});

0 commit comments

Comments
 (0)