Question

我正在尝试使用angular universal实现ng-bootstrap。我已经设置了角度通用，并且在实现ng-bootstrap之前它运行正常，我已经在.angular-cli中包含了bootstrap scss文件并导入了ng-bootstrap模块。该文件成功构建，但一旦发生错误，就会触发url。

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

Answer 1

由于我的角度通用项目中的包导入错误，导致出现上述问题。我创建了两个文件。第一个用于浏览器呈现（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 {
}

带有Bootstrap scss的Angular Universal，显示没有ServerStylesheet的提供程序

1 个答案: