在使用预引导进行应用程序Boots的过程中，组件CSS从组件中消失

Question

我漂亮的服务器端呈现的Angular 5应用程序（使用Universal与节点express.js服务器）在引导程序（预引导）阶段出现样式问题。全局CSS样式表似乎很好，但是一旦引导开始，特定于组件的样式就会消失。

示例：

禁用javascript的组件样式（来自服务器的纯html和css）：

启用了javascript的组件样式，在应用程序启动引导之前（仍然很好，仍然是来自服务器的纯html和css）：

引导过渡阶段的组件样式（可怕，因为组件特定的样式已经消失。h1[_ngcontent-c25]不再存在）：

应用程序引导完成后的组件样式（h1[_ngcontent-c25]返回）：

这里发生了什么以及如何解决？

供参考

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

版本：

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

更新：

其他开发人员遇到同样问题的示例repo：https://github.com/angular/preboot/issues/58

Answer 1

有两件事让我解决了这个问题：

1. 将{initialNavigation: 'enabled'}添加到RouterModule.forRoot import的配置参数。
像这样：

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

1. 升级到预启动的最新版本（6.0.0-beta.1）