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 {}

回答1:

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

回答2:

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,,
]})

回答3:

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

回答4:

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

回答5:

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.

回答6:

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

回答7:

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.

回答8:

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>

回答9:

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

providers: [
    , StatusBar
    , SplashScreen

Changed to:

providers: [
     StatusBar
    , SplashScreen

And works.

回答10:

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';

来源：https://stackoverflow.com/questions/41560510/unexpected-value-undefined-declared-by-the-module-appmodule

标签

angular

angular2-routing