NullInjectorError：使用aot在prod模式下没有NgbAlertConfig的提供者

Question

我们的项目有一个使用NgbAlert的烤面包机组件。该烤面包机组件是从一个适当的通用UI组件包导入的，然后导入到 jhipster 生成的角度Web应用程序中。

问题

应用程序在开发构建（纱线开始）中完全正常，但在prod模式（纱线构建）中，应用程序会生成一个错误，指出＆＃39; NullInjectorError：没有NgbAlertConfig的提供者。 （已附加堆栈跟踪）。

{{3}}

此错误最初是针对 NgbModal 和 NgbDropdown 进行的，通过将它们添加到使用它们的组件的providers数组中来修复。

在礼包中

toaster.component.ts

@Component({
selector: 'toaster',
templateUrl: './toaster.component.html',
styleUrls: [
    './toaster.component.scss'
],
providers: [NgbAlert, NgbAlertConfig],
animations: [
    toasterAnimation
]
})

export class ToasterComponent implements OnInit {
// An array of toasts to store toaster objects
public toasts: Toaster[];
// A map of toast and its timeout ids
public timeOutIds: Map<number, number> = new Map<number, number>();
// Auto increment incremnet of toaster id;
public toastId: number;


constructor(
    private toasterService: ToasterService,
    private ngZone: NgZone,
    private cdr: ChangeDetectorRef,
    private alertConfig: NgbAlertConfig
) {
    this.toastId = 0;
    this.toasts = [];
}

toaster.component.html

<div *ngFor="let toast of toasts" @toasterState>
    <ngb-alert [type]="toast.type" [dismissible]="true" (close)="dismissToast(toast)">
        <strong class="alert-heading">{{toast.title | titlecase }}</strong>
        <div>{{toast.message}}</div>
    </ngb-alert>
</div>

toaster.module.ts

@NgModule({
imports: [
    CommonModule,
    NgbAlertModule.forRoot()
],
declarations: [
    ToasterComponent
],
exports: [
    ToasterComponent
],
entryComponents: [
]
})

app.module.ts

@NgModule({
imports: [
    BrowserModule,
    CoreModule.forRoot(),
    ToasterModule.forRoot(),
    ComponentsModule.forRoot(),
    NavbarModule,
    AppRoutingModule,
    HttpClientModule,
    HomeModule,
    EntityModule,
    BrowserAnimationsModule,
    // jhipster-needle-angular-add-module JHipster will add new module here
],

Answer 1

将NgbAlertConfig导入父模块而不是烤面包机组件