Angular 4-编译器在组件中找不到节点模块模块，但有另一个模块可以成功地导入它

Question

我正在处理一些angular 4应用程序，我想在@ng-bootstrap/ng-bootstrap中导入一些模块。问题是，尽管我有一个自定义模块成功地导入了模块，但我的另一个模块无法导入它，并给出了类似这样的警告：WARNING in ./src/app/main/layout/fail/fail/fail.component.ts 151:83-96 "export 'NgbTimeStruct' was not found in '@ng-bootstrap/ng-bootstrap'我非常确定它已经正确安装，因为我说过我有另一个模块可以导入它而没有问题，但是我错过了什么？我已经在module.ts和component.ts文件中包含了所需的模块和组件！

这些是我需要解决的:来自angular-calendar的CalendarEvent；来自@ngx-translate/core的NgbDateStruct和NgbTimeStruct

以下是我的代码：

模块成功导入模块：

success.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SuccessComponent } from './success.component';
import { SuccessRoutingModule } from './successrouting.module';
import { FormsModule } from '@angular/forms';
import { CalendarModule } from 'angular-calendar';
import { UtilsModule } from '../util/module';
import { FailModule } from '../../fail/fail/fail.module';
//import { FailComponent } from '../../event/eventmodify/eventmodify.component'; // I am trying to use the failed module in this module
import { NgbModalModule, NgbDatepickerModule, NgbTimepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { ElementsModule } from '../../../../shared/components/elements/elements.module';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    SuccessDemoRoutingModule,
    FormsModule,
    NgbModalModule.forRoot(),
    NgbDatepickerModule.forRoot(),
    NgbTimepickerModule.forRoot(),
    CalendarModule.forRoot(),
    UtilsModule,
    FailModule,
    ElementsModule,
    TranslateModule
  ],
  declarations: [SuccessDemoComponent],
  exports: [SuccessDemoComponent]
})
export class SuccessModule { }

success.component.ts：

import { Component, AfterViewInit, ChangeDetectionStrategy, ViewChild, 
TemplateRef, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { jqxDataTableComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdatatable';
import { EventModifyComponent } from '../../event/eventmodify/eventmodify.component';
import { EventValue } from '../../../service/event/structure/event.value';
import { EventService } from '../../../service/event/event.service.promise';
import { ValidateUtil } from '../../../../shared/validate/validate.util';
import { GeneralService } from 
'../../../service/general/general.service.promise';
import { GeneralValue } from '../../../service/general/structure/general.value';
import { ResponseValue } from '../../../service/event/structure/response.value';
import * as myGlobal from '../../../../shared/global/global';
import { WindowComponent } from '../../../../shared/components/elements/window/window.component';

import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours, getMinutes, getHours, getDate, getMonth, getYear, setSeconds, setMinutes, setHours, setDate, setMonth, setYear } from 'date-fns';
import { Subject } from 'rxjs/Subject';
import { NgbModal, NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent} from 'angular-calendar';

import 'angular-calendar/dist/css/angular-calendar.css';

... //out of the failed ones I need only NgbModal is included in the constructor

模块导入模块失败：

fail.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FailComponent } from './fail.component';
import { FormsModule } from '@angular/forms';
import { CalendarModule } from 'angular-calendar';
import { SuccessModule } from '../../success/success/success.module';
import { UtilsModule } from '../../success/util/module';
import { NgbModalModule, NgbDatepickerModule, NgbTimepickerModule } from '@ng-bootstrap/ng-bootstrap';
import { ElementsModule } from '../../../../shared/components/elements/elements.module';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CalendarModule.forRoot(),
    NgbModalModule.forRoot(),
    NgbDatepickerModule.forRoot(),
    NgbTimepickerModule.forRoot(),
    UtilsModule,
    ElementsModule,
    TranslateModule
  ],
  declarations: [FailComponent],
  exports: [FailComponent]
})
export class FailModule { }

fail.component.ts：

import { Component, AfterViewInit, Input, Output, EventEmitter, ChangeDetectionStrategy, ViewChild, TemplateRef, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';
import { jqxDataTableComponent } from 'jqwidgets-framework/jqwidgets-ts/angular_jqxdatatable';
import { EventValue } from '../../../service/event/structure/event.value';
import { EventService } from '../../../service/event/event.service.promise';
import { ValidateUtil } from '../../../../shared/validate/validate.util';
import { GeneralService } from '../../../service/general/general.service.promise';
import { GeneralValue } from '../../../service/general/structure/general.value';
import { ResponseValue } from '../../../service/event/structure/response.value';
import * as myGlobal from '../../../../shared/global/global';
import { WindowComponent } from '../../../../shared/components/elements/window/window.component';

import { startOfDay, endOfDay, subDays, addDays, endOfMonth, isSameDay, isSameMonth, addHours, getMinutes, getHours, getDate, getMonth, getYear, setSeconds, setMinutes, setHours, setDate, setMonth, setYear } from 'date-fns';
import { Subject } from 'rxjs/Subject';
import { NgbModal, NgbDateStruct, NgbTimeStruct } from '@ng-bootstrap/ng-bootstrap';
import { CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent} from 'angular-calendar';

... // Only NgbModal included as well

有没有办法让事情变得更好？谢谢你的建议。

Answer 1

结果是我双重导入了模块，Angular不喜欢它。我从fail模块中删除了success模块的导入，这样它就可以很好地工作了。我认为如果任何人真的需要这两个自定义模块相互依赖，他们最好不要通过在两个模块中都导入来导入像NgbModalModule这样的模块两次。

我还听说，对于某些人来说，共享模块的最佳方式是将这些模块导入到共享模块中。