Question

我以为我理解ngModule是如何工作但显然不是。我有3个模块：AppModule，AmpedFormsModule和AmpedCommonModule（位于下方）问题是当我尝试将AmpedFormsModule导入AmpedCommonModule时给我这个错误，控制台日志给我未定义：

意外的价值＆＃39;未定义＆＃39;由模块＆amp; AmpmonModule＆＃39;
导入

我在尝试进口时尝试过很多东西，但没有取得任何成功。我还尝试创建另一个模块，并且尝试导入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.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.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.routes

export const crudRoutes: Routes = [
  { path: 'edit/:model', component: AmpedCrudTableComponent },
  { path: 'edit/:model/:id', component: AmpedCrudFormComponent }
];

Answer 1

很难说出确切的问题，但建议很少，

1）将BroswerModule更改为CommonModule中的AppCommonModule。请注意，BroswerModule应由AppModule或RootModule导入仅限{1}}。

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

2）不确定，但似乎您是通过将模块导入彼此来创建循环依赖关系，但正如所说不确定。

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

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

3）如果AmpedFormsModule和AmpedCommonModule是懒惰模块，请不要忘记在类关键字之前放置default关键字

eg. export default class AmpedFormsModule {}

Answer 2

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

Answer 3

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

意外的价值＆＃39; undefined＆＃39;由模块导入

3 个答案: