Unexpected value 'undefined' imported by the module

问题:

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 } ];

回答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 {} 

回答2:

I think the problem are circular dependencies. I have not analyzed your code in depth. But look my response on this post: Error: Unexpected value 'undefined' imported by the module maybe that helps.

文章来源: Unexpected value 'undefined' imported by the module