模塊導入的意外值'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也許有幫助。