Error: Unexpected value 'undefined' imported by the module

I'm getting this error after migrating to NgModule, the error doesn't help too much, any advice please?

Error: Error: Unexpected value 'undefined' imported by the module 'AppModule'
	    at new BaseException (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
	    at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13231:35)
	    at Array.forEach (native)
	    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13215:48)
	    at RuntimeCompiler._compileComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15845:51)
	    at RuntimeCompiler._compileModuleAndComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15769:41)
	    at RuntimeCompiler.compileModuleAsync (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15746:25)
	    at PlatformRef_._bootstrapModuleWithZone (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9991:29)
	    at PlatformRef_.bootstrapModule (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9984:25)
	    at Object.eval (http://localhost:5555/app/main.js:8:53)
	Evaluating http://localhost:5555/app/main.js
	Error loading http://localhost:5555/app/main.js "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ contracts:142ZoneDelegate.invoke @ zone.js?1472711930202:332Zone.run @ zone.js?1472711930202:225(anonymous function) @ zone.js?1472711930202:586ZoneDelegate.invokeTask @ zone.js?1472711930202:365Zone.runTask @ zone.js?1472711930202:265drainMicroTaskQueue @ zone.js?1472711930202:491ZoneTask.invoke @ zone.js?1472711930202:435

app.module.ts:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { APP_BASE_HREF } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    import { routes } from './app.routes';
    
    import { provide } from '@angular/core';
    
    //dgf ng2-translate
    import { TRANSLATE_PROVIDERS, TranslateLoader, TranslateStaticLoader, MissingTranslationHandler } from 'ng2-translate/ng2-translate';
    import { HTTP_PROVIDERS, Http } from '@angular/http';
    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    import { TranslationNotFoundHandler } from './shared/common/TranslationNotFoundHandler';
    //dgf ng2-translate END
    
    import {CalendarModule,DataTableModule,DialogModule,PanelModule} from 'primeng/primeng';
    
    import {TranslateModule} from 'ng2-translate/ng2-translate';
    
    import { AuthGuard,AppConfigService,AppConfig,DateHelper,ThemeComponent,ToolbarComponent, RemoveHostTagDirective } from './index';
    import { HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent } from './index';
    
    
@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          ,TranslateModule.forRoot() //,
          //third-party PRIMENG
          ,CalendarModule,DataTableModule,DialogModule,PanelModule
  ],
  declarations: [
    AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
    HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
  ],
  providers: [{
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    FormsModule,
    ReactiveFormsModule,
    provide(TranslateLoader, { //DGF ng2-translate
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
          deps: [Http]
      }),
    provide(MissingTranslationHandler, { useClass: TranslationNotFoundHandler }), //DGF ng2-translate

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

For anyone facing this same error, my situation was that I have double commas in the imports section

imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes), , // <-- this was the error
      // .... 
],

Make sure the modules don't import each other. So, there shouldn't be

In Module A: imports[ModuleB]

In Module B: imports[ModuleA]

This can be caused by multiple scenarios like

1. Missing commas

imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],

2. Double Commas

imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],

3. Exporting Nothing from the Module
4. Syntax errors
5. Typo Errors
6. Semicolons inside Objects, Arrays
7. Incorrect import Statements

I had the same problem. In my case, the reason is an extra comma.

None of the above solutions worked for me, but simply stopping and running "ng serve" again.

I had this error because I had an index.ts file in the root of my app that was exporting my app.component.ts. So I thought I could do the following:

import { AppComponent } from './';

This worked and gave me no red squiggly lines and even intellisense brings up AppComponent when you start typing it. But come to find out it was causing this error. After I changed it to:

import { AppComponent } from './app.component';

The error went away.

Make sure you should not import a module/component like this:

import { YOUR_COMPONENT } from './';

But it should be

import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';

This issue of circular dependencies of two module

Module 1:import Module 2
Module 2:import Module 1

Had the same exception when tried to compile an Angular 5 application.

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

In my case it turned out it was a circular dependency which I found by using a tool madge. Found the files containing circular dependency by running

npx madge --circular --extensions ts src/

I am building a components library and started getting this error in my app that is importing said library. When running ng build --prod or ng serve --aot in app I would get:

Unexpected value 'undefined' imported by the module 'ɵm in node_modules/<library-name>/<library-name>.d.ts'

But no errors when using ng serve or when testing the modules in the library itself even when building in --prod.

Turns out I was misled by intellisense as well. For a few of my modules I had imported a sister module as

import { DesignModule } from '../../design';

instead of

import { DesignModule } from '../../design/design.module';

It worked in fine in all builds except the one I described.

This was terrible to pin down and I was lucky it didn't take me longer than it did. Hope this help someone.

You have to remove line import { provide } from '@angular/core'; from app.module.ts as provide is deprecated now. You have to use provide as below in providers :

providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    FormsModule,
    ReactiveFormsModule,
    // disableDeprecatedForms(),
    // provideForms(),
    // HTTP_PROVIDERS, //DGF needed for ng2-translate
    // TRANSLATE_PROVIDERS, //DGF ng2-translate (not required, but recommended to have 1 unique instance of your service)
    {
        provide : TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http]
    },
    {
        provide : MissingTranslationHandler,
        useClass: TranslationNotFoundHandler
    },

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ]

Just putting the provider inside the forRoot works: https://github.com/ocombe/ng2-translate

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http]
          })
          //third-party PRIMENG
          ,CalendarModule,DataTableModule,DialogModule,PanelModule
  ],
  declarations: [
    AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
    HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    // FormsModule,
    ReactiveFormsModule,
    { provide : MissingTranslationHandler, useClass: TranslationNotFoundHandler},
    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

there is another simple solution for this. I have 2 modules which are somehow deep in the structure using each other. I ran into the same problem with circular dependencies with webpack and angular 2. I simply changed the way of how the one module is declared:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

When I now using the imports statement on ngModule attribute I simply use:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

With this all problems are away.

My problem was having an export twice in index.ts

Removing one of them solved the problem.

I had this issue, it is true that the error on the console ain't descriptive. But if you look at the angular-cli output:

You will see a WARNING, pointing to the circular dependency

WARNING in Circular dependency detected:
module1 -> module2
module2 -> module1

So the solution is to remove one import from one of the Modules.

As long as you are sure you are not doing anything wrong, kindly terminate "ng serve" and restart it. By so doing, the compiler does all of its work and the app serves as expected. Prior experiences with modules have taught me to either create them when "ng serve" is not running or to restart the terminal once I'm done.

Restarting "ng serve" also works when you're emitting a new component to another component, it's possible the compiler has not recognised your new component, simply restart "ng serve"

This worked for me just a few minutes ago.

The issue is that there is at least one import for which source file is missing.

For example I got the same error when I was using

       import { AppRoutingModule } from './app-routing.module';

But the file './app-routing.module' was not there in given path.

I removed this import and error went away.

I had the same error, none of above tips didn't help.

In my case, it was caused by WebStorm, combined two imports into one.

import { ComponentOne, ComponentTwo } from '../component-dir';

I extracted this into two separate imports

import { ComponentOne } from '../component-dir/component-one.service';
import { ComponentTwo } from '../component-dir/component-two.model';

After this it works without error.

In my case I put the ngrx's provideMockStore() into test module's 'imports' and not 'providers' array.

In case your index exports a module - That module should not import its components from the same index, it should import them directly from the components file.

I had this issue, and when I changed from importing the components in the module file using the index to importing them using the direct file, this resolved.

e.g changed:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './index';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

to:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './MainNavComponent';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

also remove the now unnecessary exports from you index, e.g:

export { MainNavModule } from './MainNavModule';
export { MainNavComponent } from './MainNavComponent';

to:

export { MainNavModule } from './MainNavModule';

For me the problem was solved by changing the import sequence :

One with I got the error :

imports: [ 
 BrowserModule, HttpClientModule, AppRoutingModule, 
 CommonModule
],

Changed this to :

   imports: [
    BrowserModule, CommonModule, HttpClientModule,
    AppRoutingModule
  ],

I had the same issue, I added the component in the index.ts of a=of the folder and did a export. Still the undefined error was popping. But the IDE pop our any red squiggly lines

Then as suggested changed from

import { SearchComponent } from './';

to

import { SearchComponent } from './search/search.component';

Another reason could be some code like this:

import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { CoreModule } from 'app/core/core.module';
import { RouterModule } from '@angular/router';
import { COMPANY_ROUTES } from 'app/company/company.routing';
import { CompanyService } from 'app/company/services/company.service';
import { CompanyListComponent } from 'app/company/components/company-list/company-list.component';

@NgModule({
    imports: [
        CoreModule,
        SharedModule,
		RouterModule.forChild(COMPANY_ROUTES)
    ],
    declarations: [
		CompanyListComponent
    ],
    providers: [
		CompanyService
    ],
    exports: [
    ]
})
export class CompanyModule { }

Because exports is empty array and it has , before it, it should be removed.

I fix it by delete all index export file, include pipe, service. then all file import path is specific path. eg.

import { AuthService } from './_common/services/auth.service';

replace

import { AuthService } from './_common/services';

besides, don't export default class.

My problem was a misspelled component name inside the component.ts.

The import statement didn't show an error but the declaration did, which misled me.

Unused "private http: Http" argument in the constructor of app.component.ts had caused me the same error and it resolved upon removing the unused argument of the constructor

Most probably the error will be related to the AppModule.ts file.

To solve this issue check whether every component is declared and every service that we declare is put in the providers etc.

And even if everything seems right in the AppModule file and you still get the error, then stop your running angular instance and restart it once again. That may solve your issue if everything in the module file is correct and if you are still getting the error.

The Solutions above do not worked for me.

So I back the version of angular-cli of 1.6.4 for 1.4.4 and this solved my problem.

I do not know if this is the best solution, but for now, this worked for me

I was facing the same problem. Issue was that I was importing some class from index.ts

    import {className} from '..shared/index'

index.ts contain the export statement

    export * from './models';

I changed it to the .ts file which contain the actual class object

    import {className} from '..shared/model'

and it resolved.

For me, this error was caused by just unused import:

import { NgModule, Input } from '@angular/core';

Resulting error:

>Input is declared, but it's value never read

Comment it out, and error doesn't occur:

import { NgModule/*, Input*/ } from '@angular/core';

I met this problem at the situation:

- app-module
--- app-routing                                 // app router
----- imports: [RouterModule.forRoot(routes)]
--- demo-module                                 // sub-module
----- demo-routing
------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

because there is only a root.

For me, I just did a CTRL+C and YES .
And I restart by

ionic serve 

This works for me.