Currently styles are rendered to the root component element, which ensures they're cleaned up automatically when the client application is bootstrapped. This is less than ideal as progressive rendering can cause HTML to be rendered before the CSS is loaded, causing flicker. This change returns to rendering <style> elements in the <head>, and introduces a mechanism for removing them on client bootstrap. This relies on associating the server and client bootstrap. Another way to think of this is that the client, when bootstrapping an app, needs to know whether to expect a server rendered application exists on the page, and to identify the <style> elements that are part of that app in order to remove them. This is accomplished by providing a string TRANSITION_ID on both server and client. For most applications, this will be achieved by writing a client app module that imports BrowserModule.withServerTransition({appId: <id>}). The server app module will import this client app module and therefore inherit the provider for TRANSITION_ID. renderModule[Factory] on the server will validate that a TRANSITION_ID has been provided.
22 lines
1.8 KiB
TypeScript
22 lines
1.8 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google Inc. 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.io/license
|
|
*/
|
|
|
|
export {BROWSER_SANITIZATION_PROVIDERS as ɵBROWSER_SANITIZATION_PROVIDERS, INTERNAL_BROWSER_PLATFORM_PROVIDERS as ɵINTERNAL_BROWSER_PLATFORM_PROVIDERS, initDomAdapter as ɵinitDomAdapter} from './browser';
|
|
export {BrowserDomAdapter as ɵBrowserDomAdapter} from './browser/browser_adapter';
|
|
export {BrowserPlatformLocation as ɵBrowserPlatformLocation} from './browser/location/browser_platform_location';
|
|
export {TRANSITION_ID as ɵTRANSITION_ID} from './browser/server-transition';
|
|
export {BrowserGetTestability as ɵBrowserGetTestability} from './browser/testability';
|
|
export {ELEMENT_PROBE_PROVIDERS as ɵELEMENT_PROBE_PROVIDERS} from './dom/debug/ng_probe';
|
|
export {DomAdapter as ɵDomAdapter, getDOM as ɵgetDOM, setRootDomAdapter as ɵsetRootDomAdapter} from './dom/dom_adapter';
|
|
export {DomRendererFactoryV2 as ɵDomRendererFactoryV2, DomRootRenderer as ɵDomRootRenderer, DomRootRenderer_ as ɵDomRootRenderer_, NAMESPACE_URIS as ɵNAMESPACE_URIS, flattenStyles as ɵflattenStyles, isNamespaced as ɵisNamespaced, shimContentAttribute as ɵshimContentAttribute, shimHostAttribute as ɵshimHostAttribute, splitNamespace as ɵsplitNamespace} from './dom/dom_renderer';
|
|
export {DomEventsPlugin as ɵDomEventsPlugin} from './dom/events/dom_events';
|
|
export {HammerGesturesPlugin as ɵHammerGesturesPlugin} from './dom/events/hammer_gestures';
|
|
export {KeyEventsPlugin as ɵKeyEventsPlugin} from './dom/events/key_events';
|
|
export {DomSharedStylesHost as ɵDomSharedStylesHost, SharedStylesHost as ɵSharedStylesHost} from './dom/shared_styles_host';
|
|
export {WebAnimationsDriver as ɵWebAnimationsDriver} from './dom/web_animations_driver';
|