fix(platform-server): render styles in app component instead of <head>

This ensures when the tree is serialized to the client and the app is later bootstrapped,
the <style> tags created during server-side rendering are destroyed.
This commit is contained in:
Alex Rickabaugh
2017-02-14 11:34:05 -08:00
committed by Igor Minar
parent 17486fd696
commit 30380d010b
4 changed files with 84 additions and 5 deletions

View File

@ -47,6 +47,14 @@ class MyAsyncServerApp {
class AsyncServerModule {
}
@Component({selector: 'app', template: `Works!`, styles: [':host { color: red; }']})
class MyStylesApp {
}
@NgModule({declarations: [MyStylesApp], imports: [ServerModule], bootstrap: [MyStylesApp]})
class ExampleStylesModule {
}
export function main() {
if (getDOM().supportsDOMEvents()) return; // NODE only
@ -87,6 +95,19 @@ export function main() {
});
}));
it('adds styles to the root component', async(() => {
const platform = platformDynamicServer(
[{provide: INITIAL_CONFIG, useValue: {document: '<app></app>'}}]);
platform.bootstrapModule(ExampleStylesModule).then(ref => {
const appRef: ApplicationRef = ref.injector.get(ApplicationRef);
const app = appRef.components[0].location.nativeElement;
expect(app.children.length).toBe(2);
const style = app.children[1];
expect(style.type).toBe('style');
expect(style.children[0].data).toContain('color: red');
});
}));
describe('PlatformLocation', () => {
it('is injectable', async(() => {
const platform = platformDynamicServer(