模块导入了意外值“未定义”
我以为我理解了
ngModule
的工作原理,但显然不是。我有 3 个模块:
AppModule
、
AmpedFormsModule
和
AmpedCommonModule
(如下所示)问题是,当我尝试将
AmpedFormsModule
导入
AmpedCommonModule
时,它给出了此错误,控制台日志给出了未定义:
Unexpected value 'undefined' imported by the module '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 }
];
很难说出确切的问题,但有一些建议,
1)
在
AppCommonModule
中将
BroswerModule
更改为
CommonModule
。请记住
BroswerModule
只能由
AppModule
或
RootModule
导入。
@NgModule({
imports : [CommonModule, FormsModule],
...
})
2) 不确定,但似乎您正在通过将模块相互导入来创建循环依赖,但正如所说,虽然不确定。
@NgModule({
imports : [FormsModule, AmpedFormsModule], //<<< here
})
@NgModule({
imports : [ HttpModule, AmpedCommonModule ], //<<< here
...
})
3)
如果
AmpedFormsModule
和
AmpedCommonModule
是惰性模块,请不要忘记在类关键字之前放置默认关键字
eg. export default class AmpedFormsModule {}
我遇到了同样的错误,有时会发生此问题,您只需使用 ng serve 或您使用的任何 CLI 重新运行服务器
我认为问题是循环依赖。我还没有深入分析你的代码。但看看我对这篇文章的回复: 错误:模块导入了意外值“未定义” 也许这有帮助。