Unexpected value 'undefined' declared by the module 'AppModule'

What is wrong here? I'm trying to make it work but I get that error in the header. I have included the <router-outlet></router-outlet> in the app.component.html that is being templateUrl called by the app.component.ts, still no luck.

app.module.ts:

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent }  from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TopnavComponent } from './components/navbars/topnav/topnav.component';
import { LeftnavComponent } from './components/navbars/leftnav/leftnav.component';
import { LeftnavsecondaryComponent } from './components/navbars/leftnav-secondary/leftnav-secondary.component';
import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

@NgModule({
	imports:	[ BrowserModule, FormsModule, AppRoutingModule ],
	declarations: 	[ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ],
	bootstrap:	[ AppComponent ]
})

export class AppModule { }

app-routing.module.ts:

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

const appRoutes: Routes = [
  { path: 'worldofwacraft', component: WorldofwarcraftComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

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

I faced the same error and I discovered the reason. The reason was two commas ,, in any array (for example: imports property) like this.

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

Try this may help you:
Stop and Start the ng-serve service. Now the page could navigate.

It was caused because I repeated the export in one of my index.ts file:

This is a very annoying and difficult to understand error. I did a file comparison using Araxis Merge found every file in my two projects were almost identical at first glance. However, after further review I noticed a slight difference in file structure(which I wasn't really looking for at first, rather I was looking for configuration differences) that my second project had generated a js file from one of the ts files.

As you can see on the left side there is a js file. The right side project showed my node-builder component and ran without error. The right side was what caused the problem.

Webpack had picked up that Javascript file and tried to package it. Obviously, when Webpack encountered the ts version it transpiled it into a duplicate js file, thus creating a confusing run-time exception.

t {__zone_symbol__error: Error: Unexpected value 'undefined' declared by the 
module 'AppModule'
    at t.m (http://localhost:……}

As you can see this problem had nothing to do with configuration as many posts had led me to believe. As stated above your problem may have to do with configuration but in my case it did not.

This is similar to the answer suggesting re-running ng serve, but that wasn't relevant for my situation as I have the app permanently running in IIS. In my case, I had built with ng build --watch, but stopping that and re-running it fixed the problem. I assume something was built incorrectly when it was an incremental build, but doing the full build fixed the problem.

In my case it was due to build issue. may be you have added some components or other things in your App module and forgot to rebuild it. So in the browser Angular is not able to recognize your fresh entries in app module because build is required to register them properly. So for development mode kill the current server and use ng serve.

In my case it was class name diffrent and the name i.e in between { name } exported in app.mdoule.ts was diffrent

good luck

In my case, on app.module.ts ( Ionic 3 )

providers: [
    , StatusBar
    , SplashScreen

Changed to:

providers: [
     StatusBar
    , SplashScreen

And works.

In My scenario, I made mistake like below

  @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NewTestRoutingModule {
  static component : [NewTestContainerComponent, NewTestInletComponent, NewTestStructureComponent]
}

and in Module

@NgModule({
  declarations: [LayersRoutingModule.component],

The components array in Routing should be like this.

 static component = [NewTestContainerComponent, NewTestInletComponent, NewTestStructureComponent]

This happened to me as well, in @Component I wrote selector: all-employees and in app.module.ts module it was <all- employees></all- employees>

Experienced this with Angular 2 and it turns out it has something to do with imports and relative paths, if you're exporting something in from the same location

For instance when using barrels, explicitly specify the ./

export * from './create-profile.component';

instead of

export * from 'create-profile.component';

> Error in /turbo_modules/@angular/[email protected]/bundles/compiler.umd.js (2603:26) Unexpected value 'undefined' declared by the module 'AppModule'

I had the problem that export class someClassName had used an unknown/wrong class name in one of my files (copy/paste error) and has been never registered anywhere (e.g. `AppModule.ts*).

I was getting this error because I mistakenly put TestBed.configureTestingModule outside of a beforeEach block.