/**

* @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 '@angular/compiler';

import {animate, AnimationBuilder, state, style, transition, trigger} from '@angular/animations';

import {DOCUMENT, ɵgetDOM as getDOM, isPlatformServer, PlatformLocation} from '@angular/common';

import {

HTTP_INTERCEPTORS,

HttpClient,

HttpClientModule,

HttpEvent,

HttpHandler,

HttpInterceptor,

HttpRequest,

} from '@angular/common/http';

import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';

import {

APP_INITIALIZER,

ApplicationConfig,

ApplicationRef,

Component,

inject as coreInject,

destroyPlatform,

EnvironmentProviders,

getPlatform,

Inject,

inject,

Injectable,

Input,

makeStateKey,

mergeApplicationConfig,

NgModule,

NgModuleRef,

NgZone,

PendingTasks,

PLATFORM_ID,

provideNgReflectAttributes,

Provider,

provideZoneChangeDetection,

signal,

ɵSSR_CONTENT_INTEGRITY_MARKER as SSR_CONTENT_INTEGRITY_MARKER,

TransferState,

Type,

ViewEncapsulation,

} from '@angular/core';

import {TestBed} from '@angular/core/testing';

import {

bootstrapApplication,

BootstrapContext,

BrowserModule,

createApplication,

provideClientHydration,

Title,

} from '@angular/platform-browser';

import {provideRouter, RouterOutlet, Routes} from '@angular/router';

import {Observable} from 'rxjs';

import {

BEFORE_APP_SERIALIZED,

INITIAL_CONFIG,

platformServer,

PlatformState,

provideServerRendering,

renderModule,

ServerModule,

} from '../index';

import {BrowserAnimationsModule, provideAnimations} from '@angular/platform-browser/animations';

import {renderApplication, SERVER_CONTEXT} from '../src/utils';

const APP_CONFIG: ApplicationConfig = {

providers: [provideServerRendering()],

};

function getStandaloneBootstrapFn(

component: Type<unknown>,

providers: Array<Provider | EnvironmentProviders> = [],

): (context: BootstrapContext) => Promise<ApplicationRef> {

return (context: BootstrapContext) =>

bootstrapApplication(

component,

mergeApplicationConfig(APP_CONFIG, {providers: [...providers, provideNgReflectAttributes()]}),

context,

);

}

function createMyServerApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: `Works!`,

})

class MyServerApp {}

return MyServerApp;

}

const MyServerApp = createMyServerApp(false);

const MyServerAppStandalone = createMyServerApp(true);

@NgModule({

declarations: [MyServerApp],

exports: [MyServerApp],

})

export class MyServerAppModule {}

function createAppWithPendingTask(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: `Completed: {{ completed() }}`,

})

class PendingTasksApp {

completed = signal('No');

constructor() {

const pendingTasks = coreInject(PendingTasks);

const removeTask = pendingTasks.add();

setTimeout(() => {

removeTask();

this.completed.set('Yes');

});

}

}

return PendingTasksApp;

}

const PendingTasksApp = createAppWithPendingTask(false);

const PendingTasksAppStandalone = createAppWithPendingTask(true);

@NgModule({

declarations: [PendingTasksApp],

exports: [PendingTasksApp],

imports: [ServerModule],

bootstrap: [PendingTasksApp],

})

export class PendingTasksAppModule {}

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, ServerModule],

})

class ExampleModule {}

function getTitleRenderHook(doc: any) {

return () => {

// Set the title as part of the render hook.

doc.title = 'RenderHook';

};

}

function exceptionRenderHook() {

throw new Error('error');

}

function getMetaRenderHook(doc: any) {

return () => {

// Add a meta tag before rendering the document.

const metaElement = doc.createElement('meta');

metaElement.setAttribute('name', 'description');

doc.head.appendChild(metaElement);

};

}

function getAsyncTitleRenderHook(doc: any) {

return () => {

// Async set the title as part of the render hook.

return new Promise<void>((resolve) => {

setTimeout(() => {

doc.title = 'AsyncRenderHook';

resolve();

});

});

};

}

function asyncRejectRenderHook() {

return () => {

return new Promise<void>((_resolve, reject) => {

setTimeout(() => {

reject('reject');

});

});

};

}

const RenderHookProviders = [

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getTitleRenderHook,

multi: true,

deps: [DOCUMENT],

},

];

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, BrowserModule, ServerModule],

providers: [...RenderHookProviders],

})

class RenderHookModule {}

const MultiRenderHookProviders = [

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getTitleRenderHook,

multi: true,

deps: [DOCUMENT],

},

{provide: BEFORE_APP_SERIALIZED, useValue: exceptionRenderHook, multi: true},

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getMetaRenderHook,

multi: true,

deps: [DOCUMENT],

},

];

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, BrowserModule, ServerModule],

providers: [...MultiRenderHookProviders],

})

class MultiRenderHookModule {}

const AsyncRenderHookProviders = [

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getAsyncTitleRenderHook,

multi: true,

deps: [DOCUMENT],

},

];

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, BrowserModule, ServerModule],

providers: [...AsyncRenderHookProviders],

})

class AsyncRenderHookModule {}

const AsyncMultiRenderHookProviders = [

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getMetaRenderHook,

multi: true,

deps: [DOCUMENT],

},

{

provide: BEFORE_APP_SERIALIZED,

useFactory: getAsyncTitleRenderHook,

multi: true,

deps: [DOCUMENT],

},

{

provide: BEFORE_APP_SERIALIZED,

useFactory: asyncRejectRenderHook,

multi: true,

},

];

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, BrowserModule, ServerModule],

providers: [...AsyncMultiRenderHookProviders],

})

class AsyncMultiRenderHookModule {}

@Component({

selector: 'app',

template: `Works too!`,

standalone: false,

})

class MyServerApp2 {}

@NgModule({

declarations: [MyServerApp2],

imports: [ServerModule],

bootstrap: [MyServerApp2],

})

class ExampleModule2 {}

@Component({

selector: 'app',

template: ``,

standalone: false,

})

class TitleApp {

constructor(private title: Title) {}

ngOnInit() {

this.title.setTitle('Test App Title');

}

}

@NgModule({

declarations: [TitleApp],

imports: [ServerModule],

bootstrap: [TitleApp],

})

class TitleAppModule {}

function createMyAsyncServerApp(standalone: boolean) {

@Component({

selector: 'app',

template: '{{text()}}<h1 [textContent]="h1()"></h1>',

standalone,

})

class MyAsyncServerApp {

text = signal('');

h1 = signal('');

constructor() {

const remove = inject(PendingTasks).add();

Promise.resolve(null).then(() =>

setTimeout(() => {

this.text.set('Works!');

this.h1.set('fine');

remove();

}, 10),

);

}

}

return MyAsyncServerApp;

}

const MyAsyncServerApp = createMyAsyncServerApp(false);

const MyAsyncServerAppStandalone = getStandaloneBootstrapFn(createMyAsyncServerApp(true), []);

function createAsyncServerModule(zoneless: boolean) {

@NgModule({

declarations: [MyAsyncServerApp],

imports: [BrowserModule, ServerModule],

bootstrap: [MyAsyncServerApp],

providers: zoneless ? [] : [provideZoneChangeDetection()],

})

class AsyncServerModule {}

return AsyncServerModule;

}

function createSVGComponent(standalone: boolean) {

@Component({

selector: 'app',

template: '<svg><use xlink:href="#clear"></use></svg>',

standalone,

})

class SVGComponent {}

return SVGComponent;

}

const SVGComponent = createSVGComponent(false);

const SVGComponentStandalone = getStandaloneBootstrapFn(createSVGComponent(true));

@NgModule({

declarations: [SVGComponent],

imports: [BrowserModule, ServerModule],

bootstrap: [SVGComponent],

})

class SVGServerModule {}

function createMyAnimationApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: ` <div [@myAnimation]="state">

<svg *ngIf="true"></svg>

{{ text }}

</div>`,

animations: [

trigger('myAnimation', [

state('void', style({'opacity': '0'})),

state(

'active',

style({

'opacity': '1', // simple supported property

'font-weight': 'bold', // property with dashed name

'transform': 'translate3d(0, 0, 0)', // not natively supported by Domino

}),

),

transition('void => *', [animate('0ms')]),

]),

],

})

class MyAnimationApp {

state = 'active';

constructor(private builder: AnimationBuilder) {}

text = 'Works!';

}

return MyAnimationApp;

}

const MyAnimationApp = createMyAnimationApp(false);

const MyAnimationAppStandalone = getStandaloneBootstrapFn(createMyAnimationApp(true), [

provideAnimations(),

]);

@NgModule({

declarations: [MyAnimationApp],

imports: [BrowserModule, BrowserAnimationsModule, ServerModule],

bootstrap: [MyAnimationApp],

})

class AnimationServerModule {}

function createMyStylesApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: ` <div>Works!</div>`,

styles: ['div {color: blue; } :host { color: red; }'],

})

class MyStylesApp {}

return MyStylesApp;

}

const MyStylesApp = createMyStylesApp(false);

const MyStylesAppStandalone = getStandaloneBootstrapFn(createMyStylesApp(true));

@NgModule({

declarations: [MyStylesApp],

imports: [BrowserModule, ServerModule],

bootstrap: [MyStylesApp],

})

class ExampleStylesModule {}

function createMyTransferStateApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: ` <div>Works!</div>`,

})

class MyStylesApp {

state = coreInject(TransferState);

constructor() {

this.state.set(makeStateKey<string>('some-key'), 'some-value');

}

}

return MyStylesApp;

}

const MyTransferStateApp = createMyTransferStateApp(false);

const MyTransferStateAppStandalone = getStandaloneBootstrapFn(createMyTransferStateApp(true));

@NgModule({

declarations: [MyTransferStateApp],

imports: [BrowserModule, ServerModule],

bootstrap: [MyTransferStateApp],

})

class MyTransferStateModule {}

@NgModule({

declarations: [MyTransferStateApp],

imports: [BrowserModule, ServerModule],

providers: [provideServerRendering()],

bootstrap: [MyTransferStateApp],

})

class DoubleTransferStateModule {}

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, ServerModule, HttpClientModule, HttpClientTestingModule],

})

export class HttpClientExampleModule {}

@Injectable()

export class MyHttpInterceptor implements HttpInterceptor {

constructor(private http: HttpClient) {}

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

return next.handle(req);

}

}

@NgModule({

bootstrap: [MyServerApp],

imports: [MyServerAppModule, ServerModule, HttpClientModule, HttpClientTestingModule],

providers: [

{

provide: HTTP_INTERCEPTORS,

multi: true,

useClass: MyHttpInterceptor,

},

],

})

export class HttpInterceptorExampleModule {}

@Component({

selector: 'app',

template: `<img [src]="'link'" />`,

standalone: false,

})

class ImageApp {}

@NgModule({

declarations: [ImageApp],

imports: [ServerModule],

bootstrap: [ImageApp],

})

class ImageExampleModule {}

function createShadowDomEncapsulationApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: 'Shadow DOM works',

encapsulation: ViewEncapsulation.ShadowDom,

styles: [':host { color: red; }'],

})

class ShadowDomEncapsulationApp {}

return ShadowDomEncapsulationApp;

}

const ShadowDomEncapsulationApp = createShadowDomEncapsulationApp(false);

const ShadowDomEncapsulationAppStandalone = getStandaloneBootstrapFn(

createShadowDomEncapsulationApp(true),

);

@NgModule({

declarations: [ShadowDomEncapsulationApp],

imports: [BrowserModule, ServerModule],

bootstrap: [ShadowDomEncapsulationApp],

})

class ShadowDomExampleModule {}

function createFalseAttributesComponents(standalone: boolean) {

@Component({

standalone,

selector: 'my-child',

template: 'Works!',

})

class MyChildComponent {

@Input() public attr!: boolean;

}

@Component({

standalone,

selector: 'app',

template: '<my-child [attr]="false"></my-child>',

imports: standalone ? [MyChildComponent] : [],

})

class MyHostComponent {}

return [MyHostComponent, MyChildComponent];

}

const [MyHostComponent, MyChildComponent] = createFalseAttributesComponents(false);

const MyHostComponentStandalone = getStandaloneBootstrapFn(

createFalseAttributesComponents(true)[0],

);

@NgModule({

declarations: [MyHostComponent, MyChildComponent],

bootstrap: [MyHostComponent],

imports: [ServerModule, BrowserModule],

providers: [provideNgReflectAttributes()],

})

class FalseAttributesModule {}

function createMyInputComponent(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: '<input [name]="name">',

})

class MyInputComponent {

@Input() name = '';

}

return MyInputComponent;

}

const MyInputComponent = createMyInputComponent(false);

const MyInputComponentStandalone = getStandaloneBootstrapFn(createMyInputComponent(true));

@NgModule({

declarations: [MyInputComponent],

bootstrap: [MyInputComponent],

imports: [ServerModule, BrowserModule],

})

class NameModule {}

function createHTMLTypesApp(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: '<div [innerHTML]="html"></div>',

})

class HTMLTypesApp {

html = '<b>foo</b> bar';

constructor(@Inject(DOCUMENT) doc: Document) {}

}

return HTMLTypesApp;

}

const HTMLTypesApp = createHTMLTypesApp(false);

const HTMLTypesAppStandalone = getStandaloneBootstrapFn(createHTMLTypesApp(true));

@NgModule({

declarations: [HTMLTypesApp],

imports: [BrowserModule, ServerModule],

bootstrap: [HTMLTypesApp],

})

class HTMLTypesModule {}

function createMyHiddenComponent(standalone: boolean) {

@Component({

standalone,

selector: 'app',

template: '<input [hidden]="true"><input [hidden]="false">',

})

class MyHiddenComponent {

@Input() name = '';

}

return MyHiddenComponent;

}

const MyHiddenComponent = createMyHiddenComponent(false);

const MyHiddenComponentStandalone = getStandaloneBootstrapFn(createMyHiddenComponent(true));

@NgModule({

declarations: [MyHiddenComponent],

bootstrap: [MyHiddenComponent],

imports: [ServerModule, BrowserModule],

})

class HiddenModule {}

// TODO: Remove that IIFE, angular_jasmine_test only runs on nodes.

(function () {

if (getDOM().supportsDOMEvents) return; // NODE only

describe('platform-server integration', () => {

beforeEach(() => {

destroyPlatform();

});

afterEach(() => {

destroyPlatform();

});

it('should bootstrap', async () => {

const platform = platformServer([

{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}},

]);

const moduleRef = await platform.bootstrapModule(ExampleModule);

expect(isPlatformServer(moduleRef.injector.get(PLATFORM_ID))).toBe(true);

const doc = moduleRef.injector.get(DOCUMENT);

expect(doc.head).toBe(doc.querySelector('head')!);

expect(doc.body).toBe(doc.querySelector('body')!);

expect(doc.documentElement.textContent).toEqual('Works!');

platform.destroy();

});

it('should allow multiple platform instances', async () => {

const platform = platformServer([

{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}},

]);

const platform2 = platformServer([

{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}},

]);

await platform.bootstrapModule(ExampleModule).then((moduleRef) => {

const doc = moduleRef.injector.get(DOCUMENT);

expect(doc.documentElement.textContent).toEqual('Works!');

platform.destroy();

});

await platform2.bootstrapModule(ExampleModule2).then((moduleRef) => {

const doc = moduleRef.injector.get(DOCUMENT);

expect(doc.documentElement.textContent).toEqual('Works too!');

platform2.destroy();

});

});

it('adds title to the document using Title service', async () => {

const platform = platformServer([

{

provide: INITIAL_CONFIG,

useValue: {document: '<html><head><title></title></head><body><app></app></body></html>'},

},

]);

const ref = await platform.bootstrapModule(TitleAppModule);

const state = ref.injector.get(PlatformState);

const doc = ref.injector.get(DOCUMENT);

const title = doc.querySelector('title')!;

expect(title.textContent).toBe('Test App Title');

expect(state.renderToString()).toContain('<title>Test App Title</title>');

});

it('should get base href from document', async () => {

const platform = platformServer([

{

provide: INITIAL_CONFIG,

useValue: {document: '<html><head><base href="/"></head><body><app></app></body></html>'},

},

]);

const moduleRef = await platform.bootstrapModule(ExampleModule);

const location = moduleRef.injector.get(PlatformLocation);

expect(location.getBaseHrefFromDOM()).toEqual('/');

platform.destroy();

});

it('adds styles with ng-app-id attribute', async () => {

const platform = platformServer([

{

provide: INITIAL_CONFIG,

useValue: {document: '<html><head></head><body><app></app></body></html>'},

},

]);

const ref = await platform.bootstrapModule(ExampleStylesModule);

const doc = ref.injector.get(DOCUMENT);

const head = doc.getElementsByTagName('head')[0];

const styles: any[] = head.children as any;

expect(styles.length).toBe(1);

expect(styles[0].textContent).toContain('color: red');

expect(styles[0].getAttribute('ng-app-id')).toBe('ng');

});

it('copies known properties to attributes', async () => {

const platform = platformServer([

{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}},

]);

const ref = await platform.bootstrapModule(ImageExampleModule);

const appRef: ApplicationRef = ref.injector.get(ApplicationRef);

const app = appRef.components[0].location.nativeElement;

const img = app.getElementsByTagName('img')[0] as any;

expect(img.attributes['src'].value).toEqual('link');

});

describe('render', () => {

let doc: string;

let expectedOutput =

'<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">Works!<h1>fine</h1></app></body></html>';

beforeEach(() => {

// PlatformConfig takes in a parsed document so that it can be cached across requests.

doc = '<html><head></head><body><app></app></body></html>';

});

afterEach(() => {

doc = '<html><head></head><body><app></app></body></html>';

TestBed.resetTestingModule();

});

[true, false].forEach((zoneless: boolean) => {

it(`should render with \`createApplication \` (zoneless:${zoneless})`, async () => {

const output = await renderApplication(

async (context) => {

const appRef = await createApplication(

{

providers: [provideZoneChangeDetection()],

},

context,

);

appRef.bootstrap(createMyAsyncServerApp(true));

return appRef;

},

{document: doc},

);

expect(output).toBe(expectedOutput);

});

it(`using long form should work (zoneless:${zoneless})`, async () => {

const platform = platformServer([

{

provide: INITIAL_CONFIG,

useValue: {document: doc},

},

]);

const moduleRef = await platform.bootstrapModule(createAsyncServerModule(zoneless));

const applicationRef = moduleRef.injector.get(ApplicationRef);

await applicationRef.whenStable();

// Note: the `ng-server-context` is not present in this output, since

// `renderModule` or `renderApplication` functions are not used here.

const expectedOutput =

'<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER">' +

'Works!<h1>fine</h1></app></body></html>';

expect(platform.injector.get(PlatformState).renderToString()).toBe(expectedOutput);

});

// Run the set of tests with regular and standalone components.

[true, false].forEach((isStandalone: boolean) => {

it(`using ${isStandalone ? 'renderApplication' : 'renderModule'} should work (zoneless:${zoneless})`, async () => {

const options = {document: doc};

const bootstrap = isStandalone

? renderApplication(MyAsyncServerAppStandalone, options)

: renderModule(createAsyncServerModule(zoneless), options);

const output = await bootstrap;

expect(output).toBe(expectedOutput);

});

it(

`using ${isStandalone ? 'renderApplication' : 'renderModule'} ` +

`should allow passing a document reference (zoneless:${zoneless})`,

async () => {

const document = TestBed.inject(DOCUMENT);

// Append root element based on the app selector.

const rootEl = document.createElement('app');

document.body.appendChild(rootEl);

// Append a special marker to verify that we use a correct instance

// of the document for rendering.

const markerEl = document.createComment('test marker');

document.body.appendChild(markerEl);

const options = {document};

const bootstrap = isStandalone

? renderApplication(MyAsyncServerAppStandalone, {document})

: renderModule(createAsyncServerModule(zoneless), options);

const output = await bootstrap.finally(() => {

rootEl.remove();

markerEl.remove();

});

expect(output).toBe(

'<html><head><title>fakeTitle</title></head>' +

'<body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">' +

'Works!<h1>fine</h1></app>' +

'<!--test marker--></body></html>',

);

},

);

it(`works with SVG elements (standalone:${isStandalone}, zoneless:${zoneless})`, async () => {

const options = {document: doc};

const bootstrap = isStandalone

? renderApplication(SVGComponentStandalone, {...options})

: renderModule(SVGServerModule, options);

const output = await bootstrap;

expect(output).toBe(

'<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other">' +

'<svg><use xlink:href="#clear"></use></svg></app></body></html>',

);

});

it(

'works with animation' + `(standalone:${isStandalone}, zoneless:${zoneless}`,

async () => {

const options = {document: doc};

const bootstrap = isStandalone

? renderApplication(MyAnimationAppStandalone, options)

: renderModule(AnimationServerModule, options);

const output = await bootstrap;

expect(output).toContain('Works!');

expect(output).toContain('ng-trigger-myAnimation');

expect(output).toContain('opacity: 1;');

expect(output).toContain('transform: translate3d(0, 0, 0);');

expect(output).toContain('font-weight: bold;');

},

);

it(

'should handle ViewEncapsulation.ShadowDom' +

`(standalone:${isStandalone}, zoneless:${zoneless})`,

async () => {

const options = {document: doc};

const bootstrap = isStandalone

? renderApplication(ShadowDomEncapsulationAppStandalone, options)

: renderModule(ShadowDomExampleModule, options);

const output = await bootstrap;

expect(output).not.toBe('');

expect(output).toContain('color: red');

},

);

it(

'adds the `ng-server-context` attribute to host elements' +

`(standalone:${isStandalone}, zoneless:${zoneless})`,

async () => {

const options = {

document: doc,

};

const providers = [

{

provide: SERVER_CONTEXT,

useValue: 'ssg',

},

];

const bootstrap = isStandalone

? renderApplication(MyStylesAppStandalone, {

...options,

platformProviders: providers,

})

: renderModule(ExampleStylesModule, {

...options,

extraProviders: providers,

});

const output = await bootstrap;

expect(output).toMatch(

/<app ng-version="0.0.0-PLACEHOLDER" _nghost-ng-c\d+="" ng-server-context="ssg">/,

);

},

);

it(

'sanitizes the `serverContext` value' +

`(standalone:${isStandalone}, zoneless:${zoneless})`,

async () => {

const options = {

document: doc,

};

const providers = [

{

provide: SERVER_CONTEXT,

useValue: '!!!Some extra chars&& --><!--',

},

];

const bootstrap = isStandalone

? renderApplication(MyStylesAppStandalone, {

...options,

platformProviders: providers,

})

: renderModule(ExampleStylesModule, {

...options,

extraProviders: providers,

});

// All symbols other than [a-zA-Z0-9\-] are removed

const output = await bootstrap;

expect(output).toMatch(/ng-server-context="Someextrachars----"/);

},

);

it(

`using ${isStandalone ? 'renderApplication' : 'renderModule'} ` +

`should serialize transfer state only once (zoneless:${zoneless})`,

async () => {

const options = {document: doc};

const bootstrap = isStandalone

? renderApplication(MyTransferStateAppStandalone, options)

: renderModule(MyTransferStateModule, options);

const expectedOutput =

'<html><head></head><body><app ng-version="0.0.0-PLACEHOLDER" ng-server-context="other"><div>Works!</div></app>' +

'<script id="ng-state" type="application/json">{"some-key":"some-value"}</script></body></html>';

const output = await bootstrap;

expect(output).toEqual(expectedOutput);

},

);

it(

'uses `other` as the `serverContext` value when all symbols are removed after sanitization' +

`(standalone:${isStandalone}, zoneless:${zoneless})`,

async () => {

const options = {

document: doc,

};

const providers = [

{

provide: SERVER_CONTEXT,

useValue: '!!! &&<>',

},

];

const bootstrap = isStandalone

? renderApplication(MyStylesAppStandalone, {

...options,

platformProviders: providers,

})

: renderModule(ExampleStylesModule, {

...options,

extraProviders: providers,

});

// All symbols other than [a-zA-Z0-9\-] are removed,

// the `other` is used as the default.

const output = await bootstrap;

expect(output).toMatch(/ng-server-context="other"/);

},

);

it(

'appends SSR integrity marker comment when hydration is enabled' +

`(standalone:${isStandalone}, zoneless:${zoneless})`,

async () => {

@Component({

selector: 'app',

template: ``,