开发者问题收集

模块导入了意外值“未定义”

2016-11-11
14872

我以为我理解了 ngModule 的工作原理,但显然不是。我有 3 个模块: AppModuleAmpedFormsModuleAmpedCommonModule (如下所示)问题是,当我尝试将 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 }
];
3个回答

很难说出确切的问题,但有一些建议,

1) AppCommonModule 中将 BroswerModule 更改为 CommonModule 。请记住 BroswerModule 只能由 AppModuleRootModule 导入。

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

2) 不确定,但似乎您正在通过将模块相互导入来创建循环依赖,但正如所说,虽然不确定。

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

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

3) 如果 AmpedFormsModuleAmpedCommonModule 是惰性模块,请不要忘记在类关键字之前放置默认关键字

eg. export default class AmpedFormsModule {}

micronyks
2016-11-11

我遇到了同样的错误,有时会发生此问题,您只需使用 ng serve 或您使用的任何 CLI 重新运行服务器

Sujatha Girijala
2018-08-22

我认为问题是循环依赖。我还没有深入分析你的代码。但看看我对这篇文章的回复: 错误:模块导入了意外值“未定义” 也许这有帮助。

Michael Baarz
2017-02-07