web-dev-qa-db-fra.com

Valeur inattendue 'undefined' déclarée par le module 'AppModule'

Qu'est-ce qui ne va pas ici? J'essaie de le faire fonctionner mais j'ai cette erreur dans l'en-tête. J'ai inclus le <router-outlet></router-outlet> dans le app.component.html qui est en train d'être appelé templateUrl par le app.component.ts, toujours pas de chance.

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 {}
angularangular2-routing
43
Kyriakos Menelaou

J'ai la même erreur, parfois ce problème se produit et il vous suffit de réexécuter le serveur en utilisant ng serve ou le CLI que vous utilisez, comme mentionné ici

86
Cyber Progs

J'ai fait face à la même erreur et j'ai découvert la raison… .. La raison était deux virgules , dans n'importe quel tableau (par exemple: propriété imports) comme ceci.

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

Essayez ceci peut vous aider: 
Arrêtez et démarrez le service ng-serve . La page peut maintenant naviguer.

4
Shankar Sha

Cela est dû au fait que j'ai répété l'exportation dans l'un de mes fichiers index.ts:

3
Samuel

C'est une erreur très agaçante et difficile à comprendre. J'ai effectué une comparaison de fichiers à l'aide d'Araxis Merge. Tous les fichiers de mes deux projets étaient presque identiques à première vue. Cependant, après un examen plus approfondi, j'ai remarqué une légère différence dans la structure des fichiers (que je ne recherchais pas vraiment au début, mais plutôt à la recherche de différences de configuration): mon deuxième projet avait généré un fichier js à partir d'un des fichiers ts.

Comme vous pouvez le voir sur le côté gauche, il y a un fichier js. Le projet de droite montrait mon composant générateur de nœuds et s’exécutait sans erreur. Le côté droit était la cause du problème.

 Extra unneeded file

Webpack avait ramassé ce fichier Javascript et avait essayé de le conditionner. Évidemment, lorsque Webpack a rencontré la version ts, il l'a transpilé dans un fichier js en double, créant ainsi une exception d'exécution déroutante.

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

Comme vous pouvez le constater, ce problème n’a rien à voir avec la configuration, comme beaucoup de publications m’avaient laissé croire. Comme indiqué ci-dessus, votre problème est peut-être lié à la configuration, mais dans mon cas, il ne l'a pas été. 

2
jwize

Cela m'est arrivé aussi, dans @Component j'ai écrit le sélecteur: all-employees et dans le module app.module.ts c'était <all- employees></all- employees>

0
Alexander Zaldostanov

Dans mon cas, sur app.module.ts (Ionic 3)

providers: [
    , StatusBar
    , SplashScreen

Changé en:

providers: [
     StatusBar
    , SplashScreen

Et fonctionne.

0
Reynaldo

Ceci est similaire à la réponse suggérant de relancer ng serve, mais cela ne convenait pas à ma situation car l'application est exécutée en permanence dans IIS. Dans mon cas, j'avais construit avec ng build --watch, mais le fait de l'arrêter puis de le réexécuter a résolu le problème. J'imagine que quelque chose a été construit de manière incorrecte lorsqu'il s'agissait d'une construction incrémentielle, mais le problème a été résolu en effectuant la génération complète.

0
Tim

Expérimenté cela avec Angular 2 et il s'avère que cela a quelque chose à voir avec les importations et les chemins relatifs, si vous exportez quelque chose depuis le même emplacement

Par exemple, lorsque vous utilisez des barils, spécifiez explicitement le ./

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

au lieu de

export * from 'create-profile.component';
0
Yidir

Dans mon cas, le nom de la classe était différent et le nom i.e entre {name} exporté dans app.module.ts était différent.

bonne chance

0
DEEPAK