Angular Universal with Bootstrap scss, showing No provider for ServerStylesheet

Question

I am trying to implement ng-bootstrap with angular universal. I have setup angular universal and it was running alright before implementing ng-bootstrap, i have included the bootstrap scss file in .angular-cli and imported the ng-bootstrap module. The file gets build successfully but once the url is hit following error occurs.

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

Answer 1

The above problem occurred due to wrong import of packages in my angular universal project. I have created two files. First one for browser rendering (app.module.ts) and second one for server rendering (app.server.module.ts)

I bootstrapped app.module.ts and imported that module inside server module. ng-bootstrap module was imported in my app.module and which was later imported in app.server.module file respectively.

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