模块导入的异常值"undefined"

问题描述

我以为我了解ngModule的工作原理，但显然没有.我有3个模块:AppModule，AmpedFormsModule和AmpedCommonModule(在下面)问题是当我尝试将AmpedFormsModule导入到AmpedCommonModule时，它给了我这个错误，控制台日志也给了我未定义:

I thought I understood how ngModule worked but apparently not. I have 3 modules: AppModule, AmpedFormsModule, and AmpedCommonModule (which are below) The issue is that when I try and import the AmpedFormsModule into AmpedCommonModule it gives me this error and the console log give me undefined:

我已经尝试了很多与导入相关的事情，但是没有取得任何成功.我还尝试创建另一个模块，并且对该模块有相同的问题，试图导入Common或Form模块.朝着正确方向的任何观点表示赞赏！

I've tried quite a few things with playing with the imports but haven't had any success. I also tried to create another module and had the same issue with that module which trying to import either the Common or Form modules. Any point in the right direction is much appreciated!

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 }
];

推荐答案

很难说出确切的问题，但几乎没有建议，

Its hard to say exact problem but there are few suggestions,

1)，将BroswerModule中的BroswerModule更改为CommonModule.请记住，BroswerModule应该仅由AppModule或RootModule导入.

1) change BroswerModule to CommonModule in AppCommonModule.Keep in mind BroswerModule should be imported by AppModule or RootModule only.

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

2)不确定，但看来您是通过将模块彼此导入来创建循环依赖关系的，但是不确定.

2) Not sure but it seems you are creating circular dependencies by importing module into each other but as said not sure though.

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

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

3)如果AmpedFormsModule和AmpedCommonModule是惰性模块，请不要忘记将默认关键字放在类关键字

3) If AmpedFormsModule and AmpedCommonModule are lazy modules don't forget to put default keyword before class key word

eg. export default class AmpedFormsModule {}

这篇关于模块导入的异常值"undefined"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！