组件 CSS 在使用预引导进行应用程序引导期间从组件中消失

Question

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

示例：

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

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

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

app bootstrapping 完全完成后的组件样式（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",

更新：

来自另一位开发人员的具有相同问题的示例回购：https://github.com/angular/preboot/issues/58

Answer 1

有两件事解决了我的问题：

将 {initialNavigation: 'enabled'} 添加到 RouterModule.forRoot 导入的配置参数中。

像这样：

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

升级到最新版本的预引导 (6.0.0-beta.1)

组件 CSS 在使用预引导进行应用程序引导期间从组件中消失

Component CSS Disappears from Components During App Bootsrapping With Preboot

server-side-rendering

angular-universal

angular