首页 文章

在使用预引导的应用程序Bootstraps期间，组件CSS从组件中消失

提问于
浏览 次
3

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

Example:

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

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

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

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

这里发生了什么，我该如何解决？

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

版本：

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

angular serverside-rendering angular-universal

1 回答

  • 1

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

    • 添加 {initialNavigation: 'enabled'} 以配置RouterModule.forRoot导入的参数 .

    像这样：

    @NgModule({
   imports: [
     RouterModule.forRoot( routes, { initialNavigation: 'enabled' } )
   ],
   ...
    • 升级到预启动的最新版本（ 6.0.0-beta.1 ）
    回复于

相关问题