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
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