From 1a0e8a37483bfbf428c52832e86b2a6ccd4a85c1 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:45:54 +0000
Subject: [PATCH 1/6] test: add integration test for defer with input on SSR
with zones
Add an integration test to verify defer block behavior with input handling during server-side rendering (SSR).
(cherry picked from commit 202fb1a8aa7953e75d06f4a66b09a6f7874d4119)
---
.../platform-server/e2e/src/defer-spec.ts | 27 +++++++++++++++++++
.../ngmodule/src/app/app-routing.module.ts | 5 ++++
.../projects/ngmodule/src/app/app.module.ts | 8 ++++--
.../ngmodule/src/app/defer/defer.component.ts | 22 +++++++++++++++
.../src/app/defer/hydrated.component.ts | 9 +++++++
.../projects/standalone/src/app/app.config.ts | 8 ++++--
.../projects/standalone/src/app/app.routes.ts | 5 ++++
.../src/app/defer/defer.component.ts | 21 +++++++++++++++
.../src/app/defer/hydrated.component.ts | 9 +++++++
9 files changed, 110 insertions(+), 4 deletions(-)
create mode 100644 integration/platform-server/e2e/src/defer-spec.ts
create mode 100644 integration/platform-server/projects/ngmodule/src/app/defer/defer.component.ts
create mode 100644 integration/platform-server/projects/ngmodule/src/app/defer/hydrated.component.ts
create mode 100644 integration/platform-server/projects/standalone/src/app/defer/defer.component.ts
create mode 100644 integration/platform-server/projects/standalone/src/app/defer/hydrated.component.ts
diff --git a/integration/platform-server/e2e/src/defer-spec.ts b/integration/platform-server/e2e/src/defer-spec.ts
new file mode 100644
index 000000000000..ac1862ff2683
--- /dev/null
+++ b/integration/platform-server/e2e/src/defer-spec.ts
@@ -0,0 +1,27 @@
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('Defer E2E Tests', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('defer');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should text in defered component with input', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
+
+ await bootstrapClientApp();
+
+ // Retest the contents after the client bootstraps.
+ expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
+ });
+});
diff --git a/integration/platform-server/projects/ngmodule/src/app/app-routing.module.ts b/integration/platform-server/projects/ngmodule/src/app/app-routing.module.ts
index a9004326381b..716f88bfe836 100644
--- a/integration/platform-server/projects/ngmodule/src/app/app-routing.module.ts
+++ b/integration/platform-server/projects/ngmodule/src/app/app-routing.module.ts
@@ -2,6 +2,7 @@ import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {HelloWorldComponent} from './helloworld/hello-world.component';
import {TransferStateComponent} from './transferstate/transfer-state.component';
+import {DeferComponent} from './defer/defer.component';
const routes: Routes = [
{
@@ -35,6 +36,10 @@ const routes: Routes = [
},
},
},
+ {
+ path: 'defer',
+ component: DeferComponent,
+ },
];
@NgModule({
diff --git a/integration/platform-server/projects/ngmodule/src/app/app.module.ts b/integration/platform-server/projects/ngmodule/src/app/app.module.ts
index a51b8a0cb22a..c304b5b9a18d 100644
--- a/integration/platform-server/projects/ngmodule/src/app/app.module.ts
+++ b/integration/platform-server/projects/ngmodule/src/app/app.module.ts
@@ -1,5 +1,9 @@
import {NgModule} from '@angular/core';
-import {BrowserModule, provideClientHydration} from '@angular/platform-browser';
+import {
+ BrowserModule,
+ provideClientHydration,
+ withIncrementalHydration,
+} from '@angular/platform-browser';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
@@ -7,7 +11,7 @@ import {AppComponent} from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
- providers: [provideClientHydration()],
+ providers: [provideClientHydration(withIncrementalHydration())],
bootstrap: [AppComponent],
})
export class AppModule {}
diff --git a/integration/platform-server/projects/ngmodule/src/app/defer/defer.component.ts b/integration/platform-server/projects/ngmodule/src/app/defer/defer.component.ts
new file mode 100644
index 000000000000..22fdcda22ff9
--- /dev/null
+++ b/integration/platform-server/projects/ngmodule/src/app/defer/defer.component.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import {Component} from '@angular/core';
+import {HydratedComponent} from './hydrated.component';
+
+@Component({
+ selector: 'app-defer',
+ standalone: true,
+ imports: [HydratedComponent],
+ template: `
+ @defer (hydrate never) {
+ {{title()}} works!
`,
+})
+export class HydratedComponent {
+ title = input.required();
+}
diff --git a/integration/platform-server/projects/standalone/src/app/app.config.ts b/integration/platform-server/projects/standalone/src/app/app.config.ts
index 4089ff36edb5..b7310f645d2f 100644
--- a/integration/platform-server/projects/standalone/src/app/app.config.ts
+++ b/integration/platform-server/projects/standalone/src/app/app.config.ts
@@ -1,10 +1,14 @@
import {provideHttpClient} from '@angular/common/http';
import {ApplicationConfig} from '@angular/core';
-import {provideClientHydration} from '@angular/platform-browser';
+import {provideClientHydration, withIncrementalHydration} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
import {routes} from './app.routes';
export const appConfig: ApplicationConfig = {
- providers: [provideRouter(routes), provideClientHydration(), provideHttpClient()],
+ providers: [
+ provideRouter(routes),
+ provideClientHydration(withIncrementalHydration()),
+ provideHttpClient(),
+ ],
};
diff --git a/integration/platform-server/projects/standalone/src/app/app.routes.ts b/integration/platform-server/projects/standalone/src/app/app.routes.ts
index 9f71d1f48528..72c90fb0e7d3 100644
--- a/integration/platform-server/projects/standalone/src/app/app.routes.ts
+++ b/integration/platform-server/projects/standalone/src/app/app.routes.ts
@@ -1,6 +1,7 @@
import {Routes} from '@angular/router';
import {HelloWorldComponent} from './helloworld/hello-world.component';
import {TransferStateComponent} from './transferstate/transfer-state.component';
+import {DeferComponent} from './defer/defer.component';
export const routes: Routes = [
{
@@ -34,4 +35,8 @@ export const routes: Routes = [
},
},
},
+ {
+ path: 'defer',
+ component: DeferComponent,
+ },
];
diff --git a/integration/platform-server/projects/standalone/src/app/defer/defer.component.ts b/integration/platform-server/projects/standalone/src/app/defer/defer.component.ts
new file mode 100644
index 000000000000..3a11c0d6e419
--- /dev/null
+++ b/integration/platform-server/projects/standalone/src/app/defer/defer.component.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import {Component} from '@angular/core';
+import {HydratedComponent} from './hydrated.component';
+
+@Component({
+ selector: 'app-defer',
+ imports: [HydratedComponent],
+ template: `
+ @defer (hydrate never) {
+ {{title()}} works!
`,
+})
+export class HydratedComponent {
+ title = input.required();
+}
From 48cf46f55b2d5e24d44682256ef5355b8c33945a Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Tue, 29 Apr 2025 09:51:45 +0000
Subject: [PATCH 2/6] test: add integration test for platform-server with
zoneless
Add an integration test to verify SSR with zoneless
(cherry picked from commit c88b29c506cffbf46cd2459e0bbcc3a532332a29)
---
.bazelignore | 1 +
.../platform-server-zoneless/.editorconfig | 16 +
.../platform-server-zoneless/.gitignore | 42 +
.../platform-server-zoneless/BUILD.bazel | 6 +
.../platform-server-zoneless/README.md | 27 +
.../platform-server-zoneless/angular.json | 110 +
.../e2e/protractor.conf.js | 43 +
.../e2e/src/defer-spec.ts | 27 +
.../e2e/src/helloworld-spec.ts | 38 +
.../http-transferstate-lazy-on-init-spec.ts | 44 +
.../e2e/src/http-transferstate-lazy-spec.ts | 46 +
.../e2e/src/transferstate-spec.ts | 34 +
.../platform-server-zoneless/e2e/src/util.ts | 31 +
.../e2e/tsconfig.json | 13 +
.../platform-server-zoneless/package.json | 49 +
.../projects/standalone/prerender.ts | 44 +
.../projects/standalone/server.ts | 55 +
.../standalone/src/app/app.component.ts | 11 +
.../standalone/src/app/app.config.server.ts | 9 +
.../projects/standalone/src/app/app.config.ts | 15 +
.../projects/standalone/src/app/app.routes.ts | 42 +
.../src/app/defer/defer.component.ts | 21 +
.../src/app/defer/hydrated.component.ts | 9 +
.../app/helloworld/hello-world.component.ts | 27 +
.../http-transfer-state-on-init.component.ts | 29 +
.../http-transfer-state.component.ts | 38 +
.../transferstate/transfer-state.component.ts | 39 +
.../projects/standalone/src/assets/.gitkeep | 0
.../projects/standalone/src/favicon.ico | Bin 0 -> 1642 bytes
.../projects/standalone/src/index.html | 13 +
.../projects/standalone/src/main.server.ts | 7 +
.../projects/standalone/src/main.ts | 7 +
.../projects/standalone/src/styles.css | 1 +
.../projects/standalone/tsconfig.app.json | 15 +
.../projects/standalone/tsconfig.spec.json | 14 +
.../platform-server-zoneless/tsconfig.json | 33 +
.../platform-server-zoneless/yarn.lock | 7853 +++++++++++++++++
37 files changed, 8809 insertions(+)
create mode 100644 integration/platform-server-zoneless/.editorconfig
create mode 100644 integration/platform-server-zoneless/.gitignore
create mode 100644 integration/platform-server-zoneless/BUILD.bazel
create mode 100644 integration/platform-server-zoneless/README.md
create mode 100644 integration/platform-server-zoneless/angular.json
create mode 100644 integration/platform-server-zoneless/e2e/protractor.conf.js
create mode 100644 integration/platform-server-zoneless/e2e/src/defer-spec.ts
create mode 100644 integration/platform-server-zoneless/e2e/src/helloworld-spec.ts
create mode 100644 integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts
create mode 100644 integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts
create mode 100644 integration/platform-server-zoneless/e2e/src/transferstate-spec.ts
create mode 100644 integration/platform-server-zoneless/e2e/src/util.ts
create mode 100644 integration/platform-server-zoneless/e2e/tsconfig.json
create mode 100644 integration/platform-server-zoneless/package.json
create mode 100644 integration/platform-server-zoneless/projects/standalone/prerender.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/server.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/app.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/app.config.server.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/app.config.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/app.routes.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/defer/defer.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/defer/hydrated.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/helloworld/hello-world.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/app/transferstate/transfer-state.component.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/assets/.gitkeep
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/favicon.ico
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/index.html
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/main.server.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/main.ts
create mode 100644 integration/platform-server-zoneless/projects/standalone/src/styles.css
create mode 100644 integration/platform-server-zoneless/projects/standalone/tsconfig.app.json
create mode 100644 integration/platform-server-zoneless/projects/standalone/tsconfig.spec.json
create mode 100644 integration/platform-server-zoneless/tsconfig.json
create mode 100644 integration/platform-server-zoneless/yarn.lock
diff --git a/.bazelignore b/.bazelignore
index 3f8f9df52ffd..6393bbc53f60 100644
--- a/.bazelignore
+++ b/.bazelignore
@@ -26,6 +26,7 @@ integration/ng_update_migrations/node_modules
integration/ng-add-localize/node_modules
integration/nodenext_resolution/node_modules
integration/platform-server/node_modules
+integration/platform-server-zoneless/node_modules
integration/platform-server-hydration/node_modules
integration/service-worker-schema/node_modules
integration/side-effects/node_modules
diff --git a/integration/platform-server-zoneless/.editorconfig b/integration/platform-server-zoneless/.editorconfig
new file mode 100644
index 000000000000..59d9a3a3e73f
--- /dev/null
+++ b/integration/platform-server-zoneless/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/integration/platform-server-zoneless/.gitignore b/integration/platform-server-zoneless/.gitignore
new file mode 100644
index 000000000000..0711527ef9d5
--- /dev/null
+++ b/integration/platform-server-zoneless/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/integration/platform-server-zoneless/BUILD.bazel b/integration/platform-server-zoneless/BUILD.bazel
new file mode 100644
index 000000000000..45298ffe0143
--- /dev/null
+++ b/integration/platform-server-zoneless/BUILD.bazel
@@ -0,0 +1,6 @@
+load("//integration:index.bzl", "ng_integration_test")
+
+ng_integration_test(
+ name = "test",
+ setup_chromium = True,
+)
diff --git a/integration/platform-server-zoneless/README.md b/integration/platform-server-zoneless/README.md
new file mode 100644
index 000000000000..fdca83d5a89c
--- /dev/null
+++ b/integration/platform-server-zoneless/README.md
@@ -0,0 +1,27 @@
+# PlatformServer
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 16.0.0-rc.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/integration/platform-server-zoneless/angular.json b/integration/platform-server-zoneless/angular.json
new file mode 100644
index 000000000000..96f07b1e64b6
--- /dev/null
+++ b/integration/platform-server-zoneless/angular.json
@@ -0,0 +1,110 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "standalone": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "projects/standalone",
+ "sourceRoot": "projects/standalone/src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular/build:application",
+ "options": {
+ "namedChunks": true,
+ "outputPath": "dist/standalone",
+ "index": "projects/standalone/src/index.html",
+ "browser": "projects/standalone/src/main.ts",
+ "server": "projects/standalone/src/main.server.ts",
+ "ssr": {
+ "entry": "projects/standalone/server.ts"
+ },
+ "tsConfig": "projects/standalone/tsconfig.app.json",
+ "assets": [
+ "projects/standalone/src/favicon.ico",
+ "projects/standalone/src/assets"
+ ],
+ "styles": [
+ "projects/standalone/src/styles.css"
+ ],
+ "progress": false,
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular/build:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "standalone:build:production"
+ },
+ "development": {
+ "buildTarget": "standalone:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:private-protractor",
+ "options": {
+ "port": 0,
+ "protractorConfig": "e2e/protractor.conf.js",
+ "webdriverUpdate": false,
+ "baseUrl": "http://localhost:4206"
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular/build:extract-i18n",
+ "options": {
+ "buildTarget": "standalone:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "progress": false,
+ "tsConfig": "projects/standalone/tsconfig.spec.json",
+ "assets": [
+ "projects/standalone/src/favicon.ico",
+ "projects/standalone/src/assets"
+ ],
+ "styles": [
+ "projects/standalone/src/styles.css"
+ ],
+ "scripts": []
+ }
+ }
+ }
+ }
+ },
+ "cli": {
+ "analytics": false,
+ "cache": {
+ "enabled": false
+ }
+ }
+}
diff --git a/integration/platform-server-zoneless/e2e/protractor.conf.js b/integration/platform-server-zoneless/e2e/protractor.conf.js
new file mode 100644
index 000000000000..b7b164a74714
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/protractor.conf.js
@@ -0,0 +1,43 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+const {SpecReporter} = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: ['./src/**/*-spec.ts'],
+ chromeDriver: process.env.CHROMEDRIVER_BIN,
+ SELENIUM_PROMISE_MANAGER: false,
+ capabilities: {
+ browserName: 'chrome',
+ chromeOptions: {
+ binary: process.env.CHROME_BIN,
+ // See /integration/README.md#browser-tests for more info on these args
+ args: [
+ '--no-sandbox',
+ '--headless',
+ '--disable-gpu',
+ '--disable-dev-shm-usage',
+ '--hide-scrollbars',
+ '--mute-audio',
+ ],
+ },
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4206/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function () {},
+ },
+ onPrepare() {
+ require('ts-node').register({
+ project: require('path').join(__dirname, './tsconfig.json'),
+ });
+ jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
+ },
+};
diff --git a/integration/platform-server-zoneless/e2e/src/defer-spec.ts b/integration/platform-server-zoneless/e2e/src/defer-spec.ts
new file mode 100644
index 000000000000..ac1862ff2683
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/defer-spec.ts
@@ -0,0 +1,27 @@
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('Defer E2E Tests', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('defer');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should text in defered component with input', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
+
+ await bootstrapClientApp();
+
+ // Retest the contents after the client bootstraps.
+ expect(await element(by.css('p')).getText()).toEqual('Hydrate Never works!');
+ });
+});
diff --git a/integration/platform-server-zoneless/e2e/src/helloworld-spec.ts b/integration/platform-server-zoneless/e2e/src/helloworld-spec.ts
new file mode 100644
index 000000000000..af4fff264474
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/helloworld-spec.ts
@@ -0,0 +1,38 @@
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('Hello world E2E Tests', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('helloworld');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should display: Hello world!', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('div')).getText()).toEqual('Hello world!');
+
+ await bootstrapClientApp();
+
+ // Retest the contents after the client bootstraps.
+ expect(await element(by.css('div')).getText()).toEqual('Hello world!');
+ });
+
+ it('should re-use component styles rendered on the server', async () => {
+ expect(await element(by.css('style[ng-app-id="ng"]')).getText()).not.toBeNull();
+
+ await bootstrapClientApp();
+
+ // Make sure the server styles get reused by the client.
+ expect(await element(by.css('style[ng-app-id="ng"]')).isPresent()).toBeFalsy();
+ expect(await element(by.css('style[ng-style-reused]')).isPresent()).toBeTruthy();
+ expect(await element(by.css('style')).getText()).toBe('');
+ });
+});
diff --git a/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts
new file mode 100644
index 000000000000..f83658d3bceb
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-on-init-spec.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('Http TransferState Lazy On Init', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('http-transferstate-lazy-on-init');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should transfer http state in lazy component', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
+
+ // Bootstrap the client side app and retest the contents
+ await bootstrapClientApp();
+ expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
+
+ // Validate that there were no HTTP calls to '/api'.
+ const requests = await browser.executeScript(() => {
+ return performance.getEntriesByType('resource');
+ });
+ const apiRequests = (requests as {name: string}[])
+ .filter(({name}) => name.includes('/api'))
+ .map(({name}) => name);
+
+ expect(apiRequests).toEqual([]);
+ });
+});
diff --git a/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts
new file mode 100644
index 000000000000..6bda07e5e941
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/http-transferstate-lazy-spec.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('Http TransferState Lazy', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('http-transferstate-lazy');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should transfer http state in lazy component', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
+ expect(await element(by.css('div.two')).getText()).toBe('API 2 response');
+
+ // Bootstrap the client side app and retest the contents
+ await bootstrapClientApp();
+ expect(await element(by.css('div.one')).getText()).toBe('API 1 response');
+ expect(await element(by.css('div.two')).getText()).toBe('API 2 response');
+
+ // Validate that there were no HTTP calls to '/api'.
+ const requests = await browser.executeScript(() => {
+ return performance.getEntriesByType('resource');
+ });
+ const apiRequests = (requests as {name: string}[])
+ .filter(({name}) => name.includes('/api'))
+ .map(({name}) => name);
+
+ expect(apiRequests).toEqual([]);
+ });
+});
diff --git a/integration/platform-server-zoneless/e2e/src/transferstate-spec.ts b/integration/platform-server-zoneless/e2e/src/transferstate-spec.ts
new file mode 100644
index 000000000000..6ae9aaeb7c95
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/transferstate-spec.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {browser, by, element} from 'protractor';
+import {bootstrapClientApp, navigateTo, verifyNoBrowserErrors} from './util';
+
+describe('TransferState', () => {
+ beforeEach(async () => {
+ // Don't wait for Angular since it is not bootstrapped automatically.
+ await browser.waitForAngularEnabled(false);
+
+ // Load the page without waiting for Angular since it is not bootstrapped automatically.
+ await navigateTo('transferstate');
+ });
+
+ afterEach(async () => {
+ // Make sure there were no client side errors.
+ await verifyNoBrowserErrors();
+ });
+
+ it('should transfer component state', async () => {
+ // Test the contents from the server.
+ expect(await element(by.css('div')).getText()).toEqual('5');
+
+ // Bootstrap the client side app and retest the contents
+ await bootstrapClientApp();
+ expect(await element(by.css('div')).getText()).toEqual('50');
+ });
+});
diff --git a/integration/platform-server-zoneless/e2e/src/util.ts b/integration/platform-server-zoneless/e2e/src/util.ts
new file mode 100644
index 000000000000..2ebb2d125b10
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/src/util.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+import * as webdriver from 'selenium-webdriver';
+import {browser} from 'protractor';
+
+export async function verifyNoBrowserErrors(): Promise {
+ const browserLog = await browser.manage().logs().get('browser');
+ const errors: string[] = [];
+
+ for (const {message, level} of browserLog) {
+ console.log('>> ' + message);
+ if (level.value >= webdriver.logging.Level.INFO.value) {
+ errors.push(message);
+ }
+ }
+
+ expect(errors).toEqual([]);
+}
+
+export async function navigateTo(url: string): Promise {
+ await browser.driver.get(browser.baseUrl + url);
+}
+
+export async function bootstrapClientApp(): Promise {
+ await browser.executeScript('doBootstrap()');
+}
diff --git a/integration/platform-server-zoneless/e2e/tsconfig.json b/integration/platform-server-zoneless/e2e/tsconfig.json
new file mode 100644
index 000000000000..9fccc3e50815
--- /dev/null
+++ b/integration/platform-server-zoneless/e2e/tsconfig.json
@@ -0,0 +1,13 @@
+/* To learn more about this file see: https://angular.io/guide/typescript-configuration. */
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/e2e",
+ "module": "commonjs",
+ "target": "es2019",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ }
+}
diff --git a/integration/platform-server-zoneless/package.json b/integration/platform-server-zoneless/package.json
new file mode 100644
index 000000000000..5b8894fded98
--- /dev/null
+++ b/integration/platform-server-zoneless/package.json
@@ -0,0 +1,49 @@
+{
+ "name": "platform-server-zoneless",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "#comment-1": "The below is used is for payload size checks",
+ "build": "ng build standalone",
+ "#comment-2": "The below is used is for integration tests",
+ "build:standalone": "ng run standalone:build:development",
+ "serve:standalone": "node ./dist/standalone/server/server.mjs",
+ "test:standalone": "yarn build:standalone && concurrently \"yarn serve:standalone\" \"yarn ng e2e standalone\" --kill-others --success first",
+ "test": "ng version && yarn test:standalone"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "file:../../dist/packages-dist/animations",
+ "@angular/common": "file:../../dist/packages-dist/common",
+ "@angular/compiler": "file:../../dist/packages-dist/compiler",
+ "@angular/core": "file:../../dist/packages-dist/core",
+ "@angular/forms": "file:../../dist/packages-dist/forms",
+ "@angular/platform-browser": "file:../../dist/packages-dist/platform-browser",
+ "@angular/platform-server": "file:../../dist/packages-dist/platform-server",
+ "@angular/router": "file:../../dist/packages-dist/router",
+ "@angular/ssr": "file:../../node_modules/@angular/ssr",
+ "express": "4.16.4",
+ "rxjs": "file:../../node_modules/rxjs",
+ "tslib": "file:../../node_modules/tslib"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "file:../../node_modules/@angular-devkit/build-angular",
+ "@angular/build": "file:../../node_modules/@angular/build",
+ "@angular/cli": "file:../../node_modules/@angular/cli",
+ "@angular/compiler-cli": "file:../../dist/packages-dist/compiler-cli",
+ "@types/jasmine": "file:../../node_modules/@types/jasmine",
+ "@types/jasminewd2": "file:../../node_modules/@types/jasminewd2",
+ "@types/node": "file:../../node_modules/@types/node",
+ "concurrently": "3.1.0",
+ "jasmine-core": "3.5.0",
+ "jasmine-spec-reporter": "4.2.1",
+ "karma": "4.4.0",
+ "karma-chrome-launcher": "3.1.0",
+ "karma-coverage-istanbul-reporter": "2.1.0",
+ "karma-jasmine": "2.0.1",
+ "karma-jasmine-html-reporter": "1.4.2",
+ "protractor": "file:../../node_modules/protractor",
+ "ts-node": "8.3.0",
+ "typescript": "file:../../node_modules/typescript"
+ }
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/prerender.ts b/integration/platform-server-zoneless/projects/standalone/prerender.ts
new file mode 100644
index 000000000000..90fa07eeff0f
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/prerender.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/* tslint:disable:no-console */
+import {renderApplication} from '@angular/platform-server';
+import bootstrap from './src/main.server';
+import {fileURLToPath} from 'node:url';
+import {dirname, join, resolve} from 'node:path';
+import {readFileSync} from 'node:fs';
+
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = readFileSync(join(browserDistFolder, 'index.csr.html'), 'utf-8');
+
+async function runTest() {
+ // Test and validate the errors are printed in the console.
+ const originalConsoleError = console.error;
+ const errors: string[] = [];
+ console.error = (error, data) => errors.push(error.toString() + ' ' + data.toString());
+
+ try {
+ await renderApplication(bootstrap, {
+ document: indexHtml,
+ url: '/error',
+ });
+ } catch {}
+
+ console.error = originalConsoleError;
+
+ // Test case
+ if (!errors.some((e) => e.includes('Error in resolver'))) {
+ errors.forEach(console.error);
+ console.error(
+ '\nError: expected rendering errors ("Error in resolver") to be printed in the console.\n',
+ );
+ process.exit(1);
+ }
+}
+
+runTest();
diff --git a/integration/platform-server-zoneless/projects/standalone/server.ts b/integration/platform-server-zoneless/projects/standalone/server.ts
new file mode 100644
index 000000000000..986474ae253b
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/server.ts
@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+/* tslint:disable:no-console */
+import {APP_BASE_HREF} from '@angular/common';
+import {renderApplication} from '@angular/platform-server';
+import express from 'express';
+import bootstrap from './src/main.server';
+import {fileURLToPath} from 'node:url';
+import {dirname, join, resolve} from 'node:path';
+import {readFileSync} from 'node:fs';
+import './prerender';
+
+const app = express();
+const serverDistFolder = dirname(fileURLToPath(import.meta.url));
+const browserDistFolder = resolve(serverDistFolder, '../browser');
+const indexHtml = readFileSync(join(browserDistFolder, 'index.csr.html'), 'utf-8');
+
+// Serve static files from /browser
+app.get(
+ '*.*',
+ express.static(browserDistFolder, {
+ maxAge: '1y',
+ }),
+);
+
+// Mock API
+app.get('/api', (req, res) => {
+ res.json({data: 'API 1 response'});
+});
+
+app.get('/api-2', (req, res) => {
+ res.json({data: 'API 2 response'});
+});
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+ const {protocol, originalUrl, baseUrl, headers} = req;
+
+ renderApplication(bootstrap, {
+ document: indexHtml,
+ url: `${protocol}://${headers.host}${originalUrl}`,
+ platformProviders: [{provide: APP_BASE_HREF, useValue: baseUrl}],
+ }).then((response: string) => {
+ res.send(response);
+ });
+});
+
+app.listen(4206, () => {
+ console.log('Server listening on port 4206!');
+});
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/app.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/app.component.ts
new file mode 100644
index 000000000000..2ddaf81aaaa5
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/app.component.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterOutlet} from '@angular/router';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [CommonModule, RouterOutlet],
+ template: '{{title()}} works!
`,
+})
+export class HydratedComponent {
+ title = input.required();
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/helloworld/hello-world.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/helloworld/hello-world.component.ts
new file mode 100644
index 000000000000..4fcc75e28f9e
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/helloworld/hello-world.component.ts
@@ -0,0 +1,27 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+ selector: 'hello-world-app',
+ standalone: true,
+ template: `
+ Hello {{ name }}!
+ `,
+ styles: [
+ `
+ div {
+ font-weight: bold;
+ }
+ `,
+ ],
+})
+export class HelloWorldComponent {
+ name: string = 'world';
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts
new file mode 100644
index 000000000000..579227ddcdce
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy-on-init/http-transfer-state-on-init.component.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {HttpClient} from '@angular/common/http';
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector: 'transfer-state-http',
+ standalone: true,
+ template: ` {{ responseOne }}
`,
+ providers: [HttpClient],
+})
+export class TransferStateOnInitComponent implements OnInit {
+ responseOne: string = '';
+
+ constructor(private readonly httpClient: HttpClient) {}
+
+ ngOnInit(): void {
+ // Test that HTTP cache works when HTTP call is made in a lifecycle hook.
+ this.httpClient.get('http://localhost:4206/api').subscribe((response) => {
+ this.responseOne = response.data;
+ });
+ }
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
new file mode 100644
index 000000000000..88712e7dc8df
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {HttpClient} from '@angular/common/http';
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+ selector: 'transfer-state-http',
+ standalone: true,
+ template: `
+ {{ responseOne }}
+ {{ responseTwo }}
+ `,
+ providers: [HttpClient],
+})
+export class TransferStateComponent implements OnInit {
+ responseOne: string = '';
+ responseTwo: string = '';
+
+ constructor(private readonly httpClient: HttpClient) {
+ // Test that HTTP cache works when HTTP call is made in the constructor.
+ this.httpClient.get('http://localhost:4206/api').subscribe((response) => {
+ this.responseOne = response.data;
+ });
+ }
+
+ ngOnInit(): void {
+ // Test that HTTP cache works when HTTP call is made in a lifecycle hook.
+ this.httpClient.get('/api-2').subscribe((response) => {
+ this.responseTwo = response.data;
+ });
+ }
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/transferstate/transfer-state.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/transferstate/transfer-state.component.ts
new file mode 100644
index 000000000000..e3e80916d9cf
--- /dev/null
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/transferstate/transfer-state.component.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {isPlatformServer} from '@angular/common';
+import {HttpClient} from '@angular/common/http';
+import {Component, Inject, PLATFORM_ID, TransferState, makeStateKey} from '@angular/core';
+
+const COUNTER_KEY = makeStateKey('counter');
+
+@Component({
+ selector: 'transfer-state',
+ standalone: true,
+ template: ` {{ counter }}
`,
+ providers: [HttpClient],
+})
+export class TransferStateComponent {
+ counter = 0;
+
+ constructor(
+ @Inject(PLATFORM_ID) private platformId: {},
+ private transferState: TransferState,
+ ) {}
+
+ ngOnInit() {
+ if (isPlatformServer(this.platformId)) {
+ // Set it to 5 in the server.
+ this.counter = 5;
+ this.transferState.set(COUNTER_KEY, 50);
+ } else {
+ // Get the transferred counter state in the client(should be 50 and not 0).
+ this.counter = this.transferState.get(COUNTER_KEY, 0);
+ }
+ }
+}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/assets/.gitkeep b/integration/platform-server-zoneless/projects/standalone/src/assets/.gitkeep
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/integration/platform-server-zoneless/projects/standalone/src/favicon.ico b/integration/platform-server-zoneless/projects/standalone/src/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..1cceb8320133505f616b784afb243c17f33c4ee6
GIT binary patch
literal 1642
zcmZWqNl#Nz7<~+CTgD(DlL%4>W3@#=4GN`2T4|tdDnqeAK~PZ(f)k^fXe4eNVq$co
z3lkGH8h3^S*+7i3#$llwBT*N+(!bz2elM3qlk=T(?)P5bz4yCAe=jb0Tbq+iIVMfh
zlH4w*ADV~AH>?HM|6W{}MZg+IU0vgvmXOAXK~6o28*)4C0hgpYT0HB0>EglBo1n~7
z&5|$*s?Jk)SPl+y!gS*Q?ug>oW+Y$L1s09H`oCW0`>H^z`Pe`uXV_d!myOHk!
zuOEThoS<#FlBte;dv#YQJiAUsj3B&;`&g`{yCX$zmMDw>Vi75b%BelpEl``8HS-(o
z{t&e63ia#)05+YxZWAyA~lu#V}ex(J8BNm
zvD?f?dWCmRudWrc4e~a>@2$%Nv(L0WponD}JZJ-jOF&!0%g-TzzPSB^eE-dPNjlC!
zhhE=LZz`^ug8ew3DGxq9afoRZ8SdoZXIT(OLnS8Q0@B*RuK$6P8-cqc-(lmj=vPuh
zarAnvjpr%-%ZsTI4svq?2
+
+
+ PlatformServer
+ {{ responseOne }}
`,
providers: [HttpClient],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TransferStateOnInitComponent implements OnInit {
responseOne: string = '';
-
- constructor(private readonly httpClient: HttpClient) {}
+ private readonly httpClient: HttpClient = inject(HttpClient);
+ private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
ngOnInit(): void {
// Test that HTTP cache works when HTTP call is made in a lifecycle hook.
this.httpClient.get('http://localhost:4206/api').subscribe((response) => {
this.responseOne = response.data;
+ this.cdr.markForCheck();
});
}
}
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
index 88712e7dc8df..c4804ceeccba 100644
--- a/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/http-transferstate-lazy/http-transfer-state.component.ts
@@ -7,7 +7,7 @@
*/
import {HttpClient} from '@angular/common/http';
-import {Component, OnInit} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
@Component({
selector: 'transfer-state-http',
@@ -17,15 +17,19 @@ import {Component, OnInit} from '@angular/core';
{{ responseTwo }}
`,
providers: [HttpClient],
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TransferStateComponent implements OnInit {
responseOne: string = '';
responseTwo: string = '';
+ private readonly httpClient: HttpClient = inject(HttpClient);
+ private readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
- constructor(private readonly httpClient: HttpClient) {
+ constructor() {
// Test that HTTP cache works when HTTP call is made in the constructor.
this.httpClient.get('http://localhost:4206/api').subscribe((response) => {
this.responseOne = response.data;
+ this.cdr.markForCheck();
});
}
@@ -33,6 +37,7 @@ export class TransferStateComponent implements OnInit {
// Test that HTTP cache works when HTTP call is made in a lifecycle hook.
this.httpClient.get('/api-2').subscribe((response) => {
this.responseTwo = response.data;
+ this.cdr.markForCheck();
});
}
}
diff --git a/packages/core/src/defer/triggering.ts b/packages/core/src/defer/triggering.ts
index 6d01892d3870..e3ea7b8032f1 100644
--- a/packages/core/src/defer/triggering.ts
+++ b/packages/core/src/defer/triggering.ts
@@ -21,7 +21,7 @@ import {
getParentBlockHydrationQueue,
isIncrementalHydrationEnabled,
} from '../hydration/utils';
-import {PendingTasksInternal} from '../pending_tasks';
+import {PendingTasks, PendingTasksInternal} from '../pending_tasks';
import {assertLContainer} from '../render3/assert';
import {getComponentDef, getDirectiveDef, getPipeDef} from '../render3/def_getters';
import {getTemplateLocationDetails} from '../render3/instructions/element_validation';
@@ -205,8 +205,7 @@ export function triggerResourceLoading(
}
// Indicate that an application is not stable and has a pending task.
- const pendingTasks = injector.get(PendingTasksInternal);
- const taskId = pendingTasks.add();
+ const removeTask = injector.get(PendingTasks).add();
// The `dependenciesFn` might be `null` when all dependencies within
// a given defer block were eagerly referenced elsewhere in a file,
@@ -215,7 +214,7 @@ export function triggerResourceLoading(
tDetails.loadingPromise = Promise.resolve().then(() => {
tDetails.loadingPromise = null;
tDetails.loadingState = DeferDependenciesLoadingState.COMPLETE;
- pendingTasks.remove(taskId);
+ removeTask();
});
return tDetails.loadingPromise;
}
@@ -244,11 +243,6 @@ export function triggerResourceLoading(
}
}
- // Loading is completed, we no longer need the loading Promise
- // and a pending task should also be removed.
- tDetails.loadingPromise = null;
- pendingTasks.remove(taskId);
-
if (failed) {
tDetails.loadingState = DeferDependenciesLoadingState.FAILED;
@@ -288,7 +282,13 @@ export function triggerResourceLoading(
}
}
});
- return tDetails.loadingPromise;
+
+ return tDetails.loadingPromise.finally(() => {
+ // Loading is completed, we no longer need the loading Promise
+ // and a pending task should also be removed.
+ tDetails.loadingPromise = null;
+ removeTask();
+ });
}
/**
From 9b21b612076a687abbe9463da9e70a7d915e9e22 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Wed, 30 Apr 2025 07:30:08 +0000
Subject: [PATCH 5/6] fixup! fix(core): properly handle app stabilization with
defer blocks
(cherry picked from commit b933c44c3b6c19853ef6e55e16988fd8937b3dc1)
---
packages/core/test/bundling/defer/bundle.golden_symbols.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/core/test/bundling/defer/bundle.golden_symbols.json b/packages/core/test/bundling/defer/bundle.golden_symbols.json
index c88d832d3fd2..ddc108ec7bfc 100644
--- a/packages/core/test/bundling/defer/bundle.golden_symbols.json
+++ b/packages/core/test/bundling/defer/bundle.golden_symbols.json
@@ -137,6 +137,7 @@
"PREFETCH_TRIGGER_CLEANUP_FNS",
"PRESERVE_HOST_CONTENT",
"PRESERVE_HOST_CONTENT_DEFAULT",
+ "PendingTasks",
"PendingTasksInternal",
"R3Injector",
"REACTIVE_LVIEW_CONSUMER_NODE",
From e9684a9bdd6a4727a2f67ac06920ada33425de23 Mon Sep 17 00:00:00 2001
From: Alan Agius <17563226+alan-agius4@users.noreply.github.com>
Date: Wed, 30 Apr 2025 08:58:41 +0000
Subject: [PATCH 6/6] fixup! fix(core): properly handle app stabilization with
defer blocks
---
.../projects/standalone/prerender.ts | 26 +++----------------
.../projects/standalone/src/app/app.config.ts | 4 +--
.../projects/standalone/src/app/app.routes.ts | 5 ----
3 files changed, 6 insertions(+), 29 deletions(-)
diff --git a/integration/platform-server-zoneless/projects/standalone/prerender.ts b/integration/platform-server-zoneless/projects/standalone/prerender.ts
index 90fa07eeff0f..d7197ff6402f 100644
--- a/integration/platform-server-zoneless/projects/standalone/prerender.ts
+++ b/integration/platform-server-zoneless/projects/standalone/prerender.ts
@@ -17,28 +17,10 @@ const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = readFileSync(join(browserDistFolder, 'index.csr.html'), 'utf-8');
async function runTest() {
- // Test and validate the errors are printed in the console.
- const originalConsoleError = console.error;
- const errors: string[] = [];
- console.error = (error, data) => errors.push(error.toString() + ' ' + data.toString());
-
- try {
- await renderApplication(bootstrap, {
- document: indexHtml,
- url: '/error',
- });
- } catch {}
-
- console.error = originalConsoleError;
-
- // Test case
- if (!errors.some((e) => e.includes('Error in resolver'))) {
- errors.forEach(console.error);
- console.error(
- '\nError: expected rendering errors ("Error in resolver") to be printed in the console.\n',
- );
- process.exit(1);
- }
+ await renderApplication(bootstrap, {
+ document: indexHtml,
+ url: '/error',
+ });
}
runTest();
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/app.config.ts b/integration/platform-server-zoneless/projects/standalone/src/app/app.config.ts
index b540528ec023..82df12263ad0 100644
--- a/integration/platform-server-zoneless/projects/standalone/src/app/app.config.ts
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/app.config.ts
@@ -1,5 +1,5 @@
import {provideHttpClient} from '@angular/common/http';
-import {ApplicationConfig, provideZonelessChangeDetection} from '@angular/core';
+import {ApplicationConfig, provideExperimentalZonelessChangeDetection} from '@angular/core';
import {provideClientHydration, withIncrementalHydration} from '@angular/platform-browser';
import {provideRouter} from '@angular/router';
@@ -7,7 +7,7 @@ import {routes} from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
- provideZonelessChangeDetection(),
+ provideExperimentalZonelessChangeDetection(),
provideRouter(routes),
provideClientHydration(withIncrementalHydration()),
provideHttpClient(),
diff --git a/integration/platform-server-zoneless/projects/standalone/src/app/app.routes.ts b/integration/platform-server-zoneless/projects/standalone/src/app/app.routes.ts
index 72c90fb0e7d3..390276b2b351 100644
--- a/integration/platform-server-zoneless/projects/standalone/src/app/app.routes.ts
+++ b/integration/platform-server-zoneless/projects/standalone/src/app/app.routes.ts
@@ -29,11 +29,6 @@ export const routes: Routes = [
{
path: 'error',
component: HelloWorldComponent,
- resolve: {
- 'id': () => {
- throw new Error('Error in resolver.');
- },
- },
},
{
path: 'defer',