Компонент CSS исчезает из компонентов во время начальной загрузки приложения с предварительной загрузкой

У моего красивого приложения Angular 5, отображаемого на стороне сервера (использующего Universal с сервером node express.js), возникают проблемы со стилем на этапе начальной загрузки (предварительной загрузки). С глобальной таблицей стилей CSS все в порядке, но стили, специфичные для компонентов, исчезают после начала начальной загрузки.

Пример:

Стиль компонента с отключенным javascript (чистый html и css с сервера): javascript отключен

Стилизация компонентов с включенным 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",

ОБНОВИТЬ:

Пример репозитория с такой же проблемой от другого разработчика: https://github.com/angular/preboot/issues/58


angular angular-universal server-side-rendering
person Kevin LeStarge    schedule 07.12.2017    source источник
comment
Можно ссылку на пример репозитория?   -  person Adam P    schedule 09.12.2017
comment
@AdamP Я только что добавил ссылку на предзагрузочную проблему с примером репозитория.   -  person Kevin LeStarge    schedule 10.12.2017
comment
Поскольку ваша проблема была исправлена ​​в этой проблеме, можете ли вы закрыть этот вопрос/опубликовать решение?   -  person Adam P    schedule 14.12.2017

Ответы (1)


arrow_upward
1
arrow_downward

Две вещи решили проблему для меня:

  1. Добавьте {initialNavigation: 'enabled'} в параметр конфигурации импорта RouterModule.forRoot.

как это:

 @NgModule({
   imports: [
     RouterModule.forRoot( routes, { initialNavigation: 'enabled' } )
   ],
   ...
  1. Обновите предзагрузку до последней версии (6.0.0-beta.1)
person Kevin LeStarge    schedule 14.12.2017
comment
пытаясь понять, что делает initialNavigation отличным от обычной загрузки ленивых маршрутов. - person Nexus23; 15.12.2017