Error Unexpected value undefined imported by the module

Question

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    lt    APP BASE   gt              FormsModule      ReactiveFormsModule      provide TranslateLoader      DGF ng2-translate           useFactory   http  Http    gt  new TranslateStaticLoader http   assets i18n     json              deps   Http                provide MissingTranslationHandler    useClass  TranslationNotFoundHandler       DGF ng2-translate      AuthGuard AppConfigService AppConfig      DateHelper        bootstrap   AppComponent      export class AppModule

User · Answer

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         lt -- this was the error

User · Answer

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

User · Answer

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    gt  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    lt    APP BASE   gt                 FormsModule      ReactiveFormsModule        provide   MissingTranslationHandler  useClass  TranslationNotFoundHandler       AuthGuard AppConfigService AppConfig      DateHelper        bootstrap   AppComponent      export class AppModule

User · Answer

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    lt    APP BASE   gt              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    gt  new TranslateStaticLoader http   assets i18n     json            deps   Http                       provide   MissingTranslationHandler          useClass  TranslationNotFoundHandler             AuthGuard AppConfigService AppConfig      DateHelper

User · Answer

This issue of circular dependencies of two module  Module 1 import Module 2  Module 2 import Module 1

User · Answer

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      -- gt  should be RouterModule forChild    because there is only a root

User · Answer

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

User · Answer

Make sure the modules don t import each other  So  there shouldn t be   In Module A  imports ModuleB   In Module B  imports ModuleA

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt library-name gt   lt library-name gt  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

User · Answer

My problem was having an export twice in index ts  Removing one of them solved the problem

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

For me  I just did a CTRL C and  YES   And I restart by  ionic serve    This works for me

User · Answer

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 - gt  module2 module2 - gt  module1   So the solution is to remove one import from one of the Modules

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This can be caused by multiple scenarios like   Missing commas   imports        BrowserModule     routing  lt   Missing Comma     FeatureComponentsModule           Double Commas   imports        BrowserModule       routing  lt  Double Comma     FeatureComponentsModule           Exporting Nothing from the Module Syntax errors Typo Errors Semicolons inside Objects  Arrays Incorrect import Statements

User · Answer

Another reason could be some code like this    x000D   x000D  import   NgModule   from   angular core   x000D  import   SharedModule   from  app shared shared module   x000D  import   CoreModule   from  app core core module   x000D  import   RouterModule   from   angular router   x000D  import   COMPANY ROUTES   from  app company company routing   x000D  import   CompanyService   from  app company services company service   x000D  import   CompanyListComponent   from  app company components company-list company-list component   x000D   x000D   NgModule   x000D      imports    x000D          CoreModule  x000D          SharedModule  x000D    RouterModule forChild COMPANY ROUTES  x000D         x000D      declarations    x000D    CompanyListComponent x000D         x000D      providers    x000D    CompanyService x000D         x000D      exports    x000D        x000D     x000D  export class CompanyModule     x000D   x000D   x000D    Because exports is empty array and it has   before it  it should be removed

[angular] Error: Unexpected value 'undefined' imported by the module

Examples related to angular