模块导入的意外值'undefined'

Question

我以为我明白ngModule的工作方式，但显然不是。我有3个模块：AppModule，AmpedFormsModule和AmpedCommonModule（在下面）的问题是，当我尝试导入AmpedFormsModule为AmpedCommonModule它给了我这个错误，并且控制台日志给我不确定：

预期的值'undefined'由模块'AmpedCommonModule'导入

我已经尝试了很多与玩进口但没有任何成功的事情。我也尝试创建另一个模块，并试图导入Common或Form模块的模块有相同的问题。任何正确的方向点非常感谢！

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

很难说确切的问题，但也有一些建议，

1） change BroswerModule to CommonModule in AppCommonModule。请记住BroswerModule应该是我仅由AppModule或RootModule导入。

2）不知道，但看来你是通过导入模块进入对方创建循环依赖但也说不太清楚，但。

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

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

3）如果AmpedFormsModule和AmpedCommonModule懒惰模块不忘记把默认的关键字class关键字

eg. export default class AmpedFormsModule {} 

Answer 2

我认为这个问题是循环依赖之前。我没有深入分析你的代码。但看看我对这个帖子的回应：Error: Unexpected value 'undefined' imported by the module也许有帮助。