在使用预引导启动应用程序的过程中，组件CSS从组件中消失

问题描述

限时删除！！

我漂亮的服务器端渲染的Angular 5应用程序(将Universal与节点express.js服务器一起使用)在引导(预引导)阶段出现样式问题.全局CSS样式表似乎不错，但是自举开始后，特定于组件的样式就会消失.

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.

示例:

禁用了javascript的组件样式(来自服务器的纯HTML和CSS):

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

启用了javascript并且在应用程序开始引导之前的组件样式(服务器仍然很好，仍然是纯HTML和CSS):

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

在引导过渡阶段的组件样式(这很糟糕，因为组件的特定样式已消失.h1[_ngcontent-c25]不再存在):

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

应用程序引导完成后的组件样式(h1[_ngcontent-c25]返回):

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

这是怎么回事，我该如何解决?

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

供参考

app.module.ts:

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

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

推荐答案

两件事为我解决了这个问题:

Two things solved the problem for me:

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

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

像这样:

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

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

这篇关于在使用预引导启动应用程序的过程中，组件CSS从组件中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

1403页，肝出来的..