Component CSS Disappears from Components During App Bootsrapping With Preboot

问题

My beautiful server-side rendered Angular 5 application (using Universal with a node express.js server) is having problems with styling during the bootstrap (preboot) phase. The global CSS stylesheet seems to be fine, but the component-specific styles disappear once bootstrapping begins.

Example:

Component styling with javascript disabled (pure html and css from the server):

Component styling with javascript enabled and before app starts bootstrapping (still fine, still pure html and css from the server):

Component styling during bootstrapping transition phase (terrible because the component specific styles are gone. h1[_ngcontent-c25] is no longer there):

Component styling after app bootstrapping is completely finished (h1[_ngcontent-c25] is back):

What is going on here and how do I fix it?

For reference

app.module.ts:

@NgModule({
declarations: [
    AppComponent,
],
imports: [
    // BrowserModule,
    BrowserModule.withServerTransition({ appId: 'universal' }),
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    BrowserTransferStateModule,
    TransferHttpCacheModule,
    CoreModule, // this is where everything else is
    AppRoutingModule,
],
bootstrap: [
    AppComponent
]
})
export class AppModule { }

Versions:

Angular: 5.0.3
Angular-cli: 1.5.0
"preboot": "^6.0.0-beta.0",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"@nguniversal/common": "5.0.0-beta.5",
"express": "^4.16.2",

UPDATE:

Example repo with same problem from another developer: https://github.com/angular/preboot/issues/58

回答1:

Two things solved the problem for me:

Add {initialNavigation: 'enabled'} to config param of RouterModule.forRoot import.

like this:

 @NgModule({
   imports: [
     RouterModule.forRoot( routes, { initialNavigation: 'enabled' } )
   ],
   ...

Upgrade to latest version of preboot (6.0.0-beta.1)

来源：https://stackoverflow.com/questions/47701349/component-css-disappears-from-components-during-app-bootsrapping-with-preboot

标签

angular

server-side-rendering

angular-universal