Angular 4-编译器无法在组件中找到节点模块,但有另一个模块可以成功导入它
我正在处理一些angular 4应用程序,我想在Angular 4-编译器无法在组件中找到节点模块,但有另一个模块可以成功导入它,angular,ng-bootstrap,Angular,Ng Bootstrap,我正在处理一些angular 4应用程序,我想在@ng bootstrap/ng bootstrap中导入一些模块。问题是,即使我有一个自定义模块已成功导入模块,我的另一个模块也无法导入,并发出如下警告: ./src/app/main/layout/fail/fail/fail.component.ts中的警告 151:83-96在“@ng bootstrap/ng bootstrap”中找不到“export'ngbtimestract' 我非常确定它安装正确,正如我所说,我有另一个模块可以毫无
@ng bootstrap/ng bootstrap
中导入一些模块。问题是,即使我有一个自定义模块已成功导入模块,我的另一个模块也无法导入,并发出如下警告:
./src/app/main/layout/fail/fail/fail.component.ts中的警告
151:83-96在“@ng bootstrap/ng bootstrap”中找不到“export'ngbtimestract'
我非常确定它安装正确,正如我所说,我有另一个模块可以毫无问题地导入它,但我遗漏了什么?我已经在module.ts
和component.ts
文件中包含了所需的模块和组件
以下是我需要解决的问题:
日历事件
来自角度日历
;
NgbDateStruct
和ngbtimestuct
来自@ngx translate/core
这是我的密码:
模块已成功导入模块:
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 { }
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 { }
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
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
模块导入模块失败:
fail.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 { }
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, 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
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
关于如何使事情正常工作有什么想法吗?谢谢你的建议。结果是我双重导入了模块,Angular不喜欢它。我从失败模块中删除了成功模块的导入,然后它工作得很好。我想如果任何人真的需要两个自定义模块相互依赖,最好不要导入一些通过在两个模块中导入两次模块,例如
NgbModalModule
我还听说,对于共享模块的人来说,最好的方法是将这些模块导入到共享模块中