Unexpected value 'undefined' imported by the module

Question

I thought I understood how ngModule worked but apparently not. I have 3 modules: AppModule, AmpedFormsModule, and AmpedCommonModule (which are below) The issue is that when I try and import the AmpedFormsModule into AmpedCommonModule it gives me this error and the console log give me undefined:

Unexpected value 'undefined' imported by the module 'AmpedCommonModule'

I've tried quite a few things with playing with the imports but haven't had any success. I also tried to create another module and had the same issue with that module which trying to import either the Common or Form modules. Any point in the right direction is much appreciated!

app.module.ts

import { NgModule }       from '@angular/core';
import { HttpModule }     from '@angular/http';
import { BrowserModule }  from '@angular/platform-browser';
import { RouterModule }   from '@angular/router';

import { ModalModule } from 'angular2-modal';
import { BootstrapModalModule } from 'angular2-modal/plugins/bootstrap';

import { AppComponent }  from './app.component';
import { HomepageComponent }  from './app.homepage';

import { AmpedFormsModule }       from './amped/forms/amped.forms.module';
import { AmpedCommonModule }      from './amped/common/amped.common.module';


import { routes,
  appRoutingProviders }  from './app.routes';

import
  { LocationStrategy, HashLocationStrategy} from '@angular/common';


@NgModule({
  imports:      [
    BrowserModule,
    AmpedFormsModule,
    AmpedCommonModule,
    HttpModule,
    ModalModule.forRoot(),
    BootstrapModalModule,
    routes
  ],
  declarations: [ AppComponent, HomepageComponent ],
  providers : [appRoutingProviders, {provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

./amped/forms/amped.forms.module

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { HttpModule }         from '@angular/http';
import {
  FormsModule,
  ReactiveFormsModule }       from '@angular/forms';

// ... imports

import { AmpedCommonModule }  from '../common/amped.common.module';


@NgModule({
  imports         : [ CommonModule, FormsModule, ReactiveFormsModule, HttpModule, AmpedCommonModule ],
  declarations    : [ ... declarations ],
  exports         : [ ... exports ],
  providers       : [ ... services ],
  entryComponents : [  ]
})
export class AmpedFormsModule {}

./amped/common/amped.common.module

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';

// ... imports

import { AmpedFormsModule } from '../forms/amped.forms.module';

console.log('CRUUD', AmpedFormsModule);

@NgModule({
  imports       : [BrowserModule, FormsModule, AmpedFormsModule],
  declarations    : [ ... declarations ],
  exports         : [ ... exports ],
  providers       : [  ],
})
export class AmpedCommonModule { }

app.routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomepageComponent }  from './app.homepage';

import { crudRoutes } from './amped/forms/amped.forms.routes';

export const appRoutes: Routes = [
  ...crudRoutes,
  { path: '', component: HomepageComponent, pathMatch: 'full' },
];

export const appRoutingProviders: any[] = [];

export const routes: ModuleWithProviders = RouterModule.forRoot(appRoutes);

./amped/forms/amped.forms.routes

export const crudRoutes: Routes = [
  { path: 'edit/:model', component: AmpedCrudTableComponent },
  { path: 'edit/:model/:id', component: AmpedCrudFormComponent }
];

Answer 1

Its hard to say exact problem but there are few suggestions,

1) change BroswerModule to CommonModule in AppCommonModule.Keep in mind BroswerModule should be imported by AppModule or RootModule only.

@NgModule({
  imports       : [CommonModule, FormsModule],
  ...
})

2) Not sure but it seems you are creating circular dependencies by importing module into each other but as said not sure though.

@NgModule({
  imports       : [FormsModule, AmpedFormsModule],      //<<< here
})

@NgModule({
  imports       : [ HttpModule, AmpedCommonModule ],    //<<< here
  ...
})

3) If AmpedFormsModule and AmpedCommonModule are lazy modules don't forget to put default keyword before class key word

eg. export default class AmpedFormsModule {}

Answer 2

I faced same error , sometimes this issue occur and you only need to re-run the server using ng serve or whatever CLI you use