4

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:

Unexpected value 'undefined' imported by the module 'AmpedCommonModule'

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 }
];
locrizak
  • 12,192
  • 12
  • 60
  • 80
  • My guess would be the circular dependency with the modules it causing it fail. Probably will need some restructuring – Paul Samsotha Nov 11 '16 at 04:54
  • How would you structure the imports? My thinking was that each module would import what it needed? – locrizak Nov 11 '16 at 05:00
  • Yeah but circular dependencies are a problem. You need to take some time to think about how you can make this work without causing this circular dependency. If you have components from different modules dependending on each other, maybe that is a sign that they should part of the same module – Paul Samsotha Nov 11 '16 at 05:02
  • Check out the section on [SharedModules](https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module). Maybe you can make use of that when restructuring. Hard to tell as we don't know what the modules contain – Paul Samsotha Nov 11 '16 at 05:14

3 Answers3

8

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

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

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

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) If AmpedFormsModule and AmpedCommonModule are lazy modules don't forget to put default keyword before class key word 

eg. export default class AmpedFormsModule {}
micronyks
  • 54,797
  • 15
  • 112
  • 146
  • 1
    I see what you mean now. I had those two modules trying to do too much and be too clever. Refactored a bit and getting a component not found error but better than before. Thanks for the tips! – locrizak Nov 11 '16 at 06:29
2

I faced same error , sometimes this issue occur and you only need to re-run the server using ng serve or whatever CLI you use

Sujatha Girijala
  • 1,141
  • 8
  • 20
1

I think the problem are circular dependencies. I have not analyzed your code in depth. But look my response on this post: Error: Unexpected value 'undefined' imported by the module maybe that helps.

Community
  • 1
  • 1
Michael Baarz
  • 406
  • 5
  • 17