Angular 4 - Compiler cannot find a node module module in a component but there is another module that can import it sucessfully

Question

I am dealing with some angular 4 app and I would like to import some modules in @ng-bootstrap/ng-bootstrap. The problem is that even though I have a custom module that has successfully imported the modules, another module of mine fails to import it and gives warnings like this one: WARNING in ./src/app/main/layout/fail/fail/fail.component.ts 151:83-96 "export 'NgbTimeStruct' was not found in '@ng-bootstrap/ng-bootstrap' I am very certain that it's properly installed as I said I have another module that can import it with no problem, but what have I missed? I have already included the modules and components needed in the module.ts and component.ts files!

These are the ones I need to solve: CalendarEvent from angular-calendar; NgbDateStruct and NgbTimeStruct from @ngx-translate/core

Here are my codes:

Module successfully imported the modules:

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

Module failed to import the modules:

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

Any idea on how to make things work? Thanks in advice.

Answer 1

It turns out that I double imported the modules and Angular doesn't like it. I removed the imports of the success module from the fail module then it works pretty well. I think if anyone who really needs the two custom modules to depend on each others they'd better not to import some modules like the NgbModalModule twice by importing in both modules.

And also I heard the best way for someone to do the sharing of the modules would be importing those into a shared module instead.