Angular Universal с Bootstrap scss, показывающий отсутствие провайдера для ServerStylesheet

Я пытаюсь реализовать ng-bootstrap с угловым универсальным. Я настроил angular universal, и до внедрения ng-bootstrap он работал нормально, я включил файл bootstrap scss в .angular-cli и импортировал модуль ng-bootstrap. Файл успешно создается, но после попадания по URL-адресу возникает следующая ошибка.

Error: StaticInjectorError[StyleUtils -> ServerStylesheet]:
  StaticInjectorError(Platform: core)[StyleUtils -> ServerStylesheet]:
    NullInjectorError: No provider for ServerStylesheet!

angular angular-universal ng-bootstrap
person faizan baig    schedule 29.03.2018    source источник
comment
Я не знаком с универсальным, но если бы мне пришлось догадываться, это связано с импортом модулей и ссылкой на NgbModule.   -  person ShellNinja    schedule 29.03.2018
comment
@ShellNinja Спасибо за ваше время, это было с угловыми универсальными модулями, которые конфликтовали друг с другом.   -  person faizan baig    schedule 30.03.2018
comment
Потрясающий! Вы должны добавить ответ, чтобы следующий человек мог узнать решение, Google не очень помогает в этой проблеме, и я уверен, что люди выиграют.   -  person ShellNinja    schedule 02.04.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вышеупомянутая проблема возникла из-за неправильного импорта пакетов в мой универсальный проект angular. Я создал два файла. Первый для рендеринга в браузере (app.module.ts), второй для рендеринга на сервере (app.server.module.ts)

Я загрузил app.module.ts и импортировал этот модуль в серверный модуль. Модуль ng-bootstrap был импортирован в мой app.module и позже импортирован в файл app.server.module соответственно.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServiceWorkerModule } from '@angular/service-worker';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { AppRoutingModule } from './app-routing.module';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FlexLayoutModule} from '@angular/flex-layout';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { isPlatformBrowser } from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserModule.withServerTransition({appId: 'bi-front'}),
    AppRoutingModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    NgbModule.forRoot(),
    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production })
  ],
  bootstrap: [AppComponent],
})
export class AppModule {
  }
}

app.server.module.ts

import { NgModule } from '@angular/core';
import { ServerModule, ServerTransferStateModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';

import { AppModule } from './app.module';
import { AppComponent } from './app.component';
import {FlexLayoutServerModule} from '@angular/flex-layout/server';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    ServerTransferStateModule,
    FlexLayoutServerModule
  ],
  bootstrap: [ AppComponent ]
})

export class AppServerModule {
}
person faizan baig    schedule 06.04.2018