fix(core): adhere to bootstrap options for JIT compiled components (#35534)
When using `platformBrowserDynamic().bootstrapModule()`, it is possible to set `defaultEncapsulation` and `preserveWhitespaces` as default configuration to influence how components are compiled. When compiling components in JIT with Ivy, these options were not taken into account. This commit publishes the options to be globally available, so that the lazy compilation of JIT components has access to the configured bootstrap options. Note that this approach does not allow changing the options once they have been set, as Ivy's compilation model does not allow for multiple compilations to exist at the same time. For applications that bootstrap multiple modules, it is now required to provide the exact same bootstrap options. An error is logged if incompatible bootstrap options are provided, in which case the updated options will be ignored. Fixes #35230 Resolved FW-1838 PR Close #35534
This commit is contained in:
JoostK
@ -6,12 +6,16 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, NgModule} from '@angular/core';
|
||||
import {COMPILER_OPTIONS, Component, NgModule, ViewEncapsulation, destroyPlatform} from '@angular/core';
|
||||
import {BrowserModule} from '@angular/platform-browser';
|
||||
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
||||
import {withBody} from '@angular/private/testing';
|
||||
import {onlyInIvy, withBody} from '@angular/private/testing';
|
||||
|
||||
describe('bootstrap', () => {
|
||||
|
||||
beforeEach(destroyPlatform);
|
||||
afterEach(destroyPlatform);
|
||||
|
||||
it('should bootstrap using #id selector',
|
||||
withBody('<div>before|</div><button id="my-app"></button>', async() => {
|
||||
try {
|
||||
@ -34,6 +38,219 @@ describe('bootstrap', () => {
|
||||
console.error(err);
|
||||
}
|
||||
}));
|
||||
|
||||
describe('options', () => {
|
||||
function createComponentAndModule(
|
||||
options: {encapsulation?: ViewEncapsulation; preserveWhitespaces?: boolean} = {}) {
|
||||
@Component({
|
||||
selector: 'my-app',
|
||||
styles: [''],
|
||||
template: '<span>a b</span>',
|
||||
encapsulation: options.encapsulation,
|
||||
preserveWhitespaces: options.preserveWhitespaces,
|
||||
jit: true,
|
||||
})
|
||||
class TestComponent {
|
||||
}
|
||||
|
||||
@NgModule({
|
||||
imports: [BrowserModule],
|
||||
declarations: [TestComponent],
|
||||
bootstrap: [TestComponent],
|
||||
jit: true,
|
||||
})
|
||||
class TestModule {
|
||||
}
|
||||
|
||||
return TestModule;
|
||||
}
|
||||
|
||||
it('should use ViewEncapsulation.Emulated as default',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
|
||||
expect(document.body.innerHTML).toContain('<span _ngcontent-');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should allow setting defaultEncapsulation using bootstrap option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
|
||||
TestModule, {defaultEncapsulation: ViewEncapsulation.None});
|
||||
expect(document.body.innerHTML).toContain('<span>');
|
||||
expect(document.body.innerHTML).not.toContain('_ngcontent-');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should allow setting defaultEncapsulation using compiler option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic([{
|
||||
provide: COMPILER_OPTIONS,
|
||||
useValue: {defaultEncapsulation: ViewEncapsulation.None},
|
||||
multi: true
|
||||
}]).bootstrapModule(TestModule);
|
||||
expect(document.body.innerHTML).toContain('<span>');
|
||||
expect(document.body.innerHTML).not.toContain('_ngcontent-');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should prefer encapsulation on component over bootstrap option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule({encapsulation: ViewEncapsulation.Emulated});
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
|
||||
TestModule, {defaultEncapsulation: ViewEncapsulation.None});
|
||||
expect(document.body.innerHTML).toContain('<span _ngcontent-');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should use preserveWhitespaces: false as default',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(TestModule);
|
||||
expect(document.body.innerHTML).toContain('a b');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should allow setting preserveWhitespaces using bootstrap option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
|
||||
TestModule, {preserveWhitespaces: true});
|
||||
expect(document.body.innerHTML).toContain('a b');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should allow setting preserveWhitespaces using compiler option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
|
||||
const ngModuleRef =
|
||||
await platformBrowserDynamic([
|
||||
{provide: COMPILER_OPTIONS, useValue: {preserveWhitespaces: true}, multi: true}
|
||||
]).bootstrapModule(TestModule);
|
||||
expect(document.body.innerHTML).toContain('a b');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
it('should prefer preserveWhitespaces on component over bootstrap option',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule({preserveWhitespaces: false});
|
||||
|
||||
const ngModuleRef = await platformBrowserDynamic().bootstrapModule(
|
||||
TestModule, {preserveWhitespaces: true});
|
||||
expect(document.body.innerHTML).toContain('a b');
|
||||
ngModuleRef.destroy();
|
||||
}));
|
||||
|
||||
onlyInIvy('options cannot be changed in Ivy').describe('changing bootstrap options', () => {
|
||||
beforeEach(() => { spyOn(console, 'error'); });
|
||||
|
||||
it('should log an error when changing defaultEncapsulation bootstrap options',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
const platformRef = platformBrowserDynamic();
|
||||
|
||||
const ngModuleRef = await platformRef.bootstrapModule(
|
||||
TestModule, {defaultEncapsulation: ViewEncapsulation.None});
|
||||
ngModuleRef.destroy();
|
||||
|
||||
const ngModuleRef2 = await platformRef.bootstrapModule(
|
||||
TestModule, {defaultEncapsulation: ViewEncapsulation.ShadowDom});
|
||||
expect(console.error)
|
||||
.toHaveBeenCalledWith(
|
||||
'Provided value for `defaultEncapsulation` can not be changed once it has been set.');
|
||||
|
||||
// The options should not have been changed
|
||||
expect(document.body.innerHTML).not.toContain('_ngcontent-');
|
||||
|
||||
ngModuleRef2.destroy();
|
||||
}));
|
||||
|
||||
it('should log an error when changing preserveWhitespaces bootstrap options',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
const platformRef = platformBrowserDynamic();
|
||||
|
||||
const ngModuleRef =
|
||||
await platformRef.bootstrapModule(TestModule, {preserveWhitespaces: true});
|
||||
ngModuleRef.destroy();
|
||||
|
||||
const ngModuleRef2 =
|
||||
await platformRef.bootstrapModule(TestModule, {preserveWhitespaces: false});
|
||||
expect(console.error)
|
||||
.toHaveBeenCalledWith(
|
||||
'Provided value for `preserveWhitespaces` can not be changed once it has been set.');
|
||||
|
||||
// The options should not have been changed
|
||||
expect(document.body.innerHTML).toContain('a b');
|
||||
|
||||
ngModuleRef2.destroy();
|
||||
}));
|
||||
|
||||
it('should log an error when changing defaultEncapsulation to its default',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
const platformRef = platformBrowserDynamic();
|
||||
|
||||
const ngModuleRef = await platformRef.bootstrapModule(TestModule);
|
||||
ngModuleRef.destroy();
|
||||
|
||||
const ngModuleRef2 = await platformRef.bootstrapModule(
|
||||
TestModule, {defaultEncapsulation: ViewEncapsulation.Emulated});
|
||||
// Although the configured value may be identical to the default, the provided set of
|
||||
// options has still been changed compared to the previously provided options.
|
||||
expect(console.error)
|
||||
.toHaveBeenCalledWith(
|
||||
'Provided value for `defaultEncapsulation` can not be changed once it has been set.');
|
||||
|
||||
ngModuleRef2.destroy();
|
||||
}));
|
||||
|
||||
it('should log an error when changing preserveWhitespaces to its default',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
const platformRef = platformBrowserDynamic();
|
||||
|
||||
const ngModuleRef = await platformRef.bootstrapModule(TestModule);
|
||||
ngModuleRef.destroy();
|
||||
|
||||
const ngModuleRef2 =
|
||||
await platformRef.bootstrapModule(TestModule, {preserveWhitespaces: false});
|
||||
// Although the configured value may be identical to the default, the provided set of
|
||||
// options has still been changed compared to the previously provided options.
|
||||
expect(console.error)
|
||||
.toHaveBeenCalledWith(
|
||||
'Provided value for `preserveWhitespaces` can not be changed once it has been set.');
|
||||
|
||||
ngModuleRef2.destroy();
|
||||
}));
|
||||
|
||||
it('should not log an error when passing identical bootstrap options',
|
||||
withBody('<my-app></my-app>', async() => {
|
||||
const TestModule = createComponentAndModule();
|
||||
const platformRef = platformBrowserDynamic();
|
||||
|
||||
const ngModuleRef1 = await platformRef.bootstrapModule(
|
||||
TestModule,
|
||||
{defaultEncapsulation: ViewEncapsulation.None, preserveWhitespaces: true});
|
||||
ngModuleRef1.destroy();
|
||||
|
||||
// Bootstrapping multiple modules using the exact same options should be allowed.
|
||||
const ngModuleRef2 = await platformRef.bootstrapModule(
|
||||
TestModule,
|
||||
{defaultEncapsulation: ViewEncapsulation.None, preserveWhitespaces: true});
|
||||
ngModuleRef2.destroy();
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@Component({
|
||||
@ -64,4 +281,4 @@ export class MultipleSelectorsAppComponent {
|
||||
bootstrap: [MultipleSelectorsAppComponent],
|
||||
})
|
||||
export class MultipleSelectorsAppModule {
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user