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 { }
This question is related to
angular
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 issue of circular dependencies of two module
Module 1:import Module 2
Module 2:import Module 1
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
Another reason could be some code like this:
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_
Because exports is empty array and it has , before it, it should be removed.
This can be caused by multiple scenarios like
imports: [
BrowserModule
,routing <= Missing Comma
,FeatureComponentsModule
],
imports: [
BrowserModule,
,routing <=Double Comma
,FeatureComponentsModule
],
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
// ....
],
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.
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 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.
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
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';
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';
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
.
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.
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';
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
]
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.
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.
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.
My problem was having an export twice in index.ts
Removing one of them solved the problem.
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.
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.
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.
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.
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/
None of the above solutions worked for me, but simply stopping and running "ng serve" again.
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, I just did a CTRL+C and YES .
And I restart by
ionic serve
This works for me.
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
],
Source: Stackoverflow.com