Erreur: valeur inattendue 'non définie' importée par le module

95

J'obtiens cette erreur après la migration vers NgModule, l'erreur n'aide pas trop, un conseil s'il vous plaît?

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 { }
angular 
— surfealokesea
source
3
J'ai eu ce problème quand j'avais deux modules qui s'importaient tous les deux
— Matthew Hegarty
J'ai eu le même problème, le redémarrage de l'éditeur m'a aidé. Il ne reconnaissait pas les fichiers nouvellement ajoutés.
— Jyotirmaya Prusty
6
Qui d'autre pense qu'une erreur comme celle-ci devrait me donner plus d'explications?
— Pramesh Bajracharya
J'ai eu cette erreur parce que j'avais une entrée vide dans le tableau des importations:, ,
— wutzebaer

Réponses:

210

Pour toute personne confrontée à cette même erreur, ma situation était que j'avais des virgules doubles dans la section des importations 

imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes), , // <-- this was the error
      // .... 
],
— Jalal El-Shaer
source
1
J'avais la virgule au début, par exemple. [, BrowserModule
— ozOli
1
C'était un point (.) Pour moi
— Raghuram
1
J'ai aussi résolu le problème!
— michaeak
81

Assurez-vous que les modules ne s'importent pas. Donc, il ne devrait pas y avoir

Dans le module A: imports[ModuleB]

Dans le module B: imports[ModuleA]

— Tuong Le
source
59

Cela peut être causé par plusieurs scénarios comme

  1. Virgules manquantes
imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],
  1. Double virgule
imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],
  1. N'exporter rien du module
  2. Erreurs de syntaxe
  3. Erreurs typographiques
  4. Points-virgules à l'intérieur des objets, tableaux
  5. Déclarations d'importation incorrectes
— Ignace Andrew
source
3
Bon résumé. Ce serait formidable si Angular pouvait ajouter des informations sur l'endroit et la manière dont le chargement du module échoue. Dans l'état actuel des choses, c'est l'une des choses les plus fastidieuses à déboguer. Je ne sais pas si je comprends le bit "virgules manquantes", cela devrait bien se compiler?
— unitario
Je comprends la partie des virgules manquantes - vérifier les fichiers app.module.ts - importations :, fournisseurs :, déclarations ... etc ensemble de tableaux - Dans la liste des valeurs de chaîne mentionnées, assurez-vous que les virgules sont EXTRA ou manquantes ... J'ai résolu ce problème en supprimant une virgule supplémentaire! @Ignatius Andrew ... vous êtes DIEU! Angular 2/4 est assez décalé!
— HydTechie
30

Aucune des solutions ci-dessus n'a fonctionné pour moi, mais simplement arrêter et exécuter à nouveau "ng serve".

— Semir Deljić
source
5
Haha oui, pour moi aussi. Lorsque vous vous embêtez avec le routage, Angular a parfois besoin d'un redémarrage. Il en va de même pour le déplacement d'importantes importations ou exportations de cœurs entre vos modules.
— Florian Leitgeb
problème typique, dans plusieurs situations. L'équipe angulaire devrait y travailler.
— Dimitris Voudrias
Pareil pour moi. Angular devrait fonctionner sur ce problème. J'ai perdu mon temps: /
— Lint le
Pour moi, c'étaitcircular dependency
— Vishal Suthar
23

J'ai eu cette erreur car j'avais un index.tsfichier à la racine de mon application qui exportait mon fichier app.component.ts. J'ai donc pensé que je pourrais faire ce qui suit:

import { AppComponent } from './';

Cela a fonctionné et ne m'a pas donné de lignes ondulées rouges et même intellisense fait apparaître AppComponent lorsque vous commencez à le taper. Mais venez découvrir que cela causait cette erreur. Après je l'ai changé en:

import { AppComponent } from './app.component';

L'erreur est partie.

— Post Impatica
source
1
Je pense que ce qui fonctionne aussi, c'est quand vous écrivez explicitement «./index». Nous avons eu ce problème en combinaison avec AoT et ng-packagr.
— bersling
8

Assurez-vous de ne pas importer un module / composant comme celui-ci:

import { YOUR_COMPONENT } from './';

Mais ça devrait être

import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';
— Tuong Le
source
8

Ce problème des dépendances circulaires de deux modules

Module 1: import Module 2
Module 2: import Module 1

— Sagar Jadhav
source
5

Je suis en train de créer une bibliothèque de composants et j'ai commencé à recevoir cette erreur dans mon application qui importe ladite bibliothèque. En cours d'exécution ng build --prodou ng serve --aotdans l'application, j'obtiendrais:

Unexpected value 'undefined' imported by the module 'ɵm in node_modules/<library-name>/<library-name>.d.ts'

Mais aucune erreur lors de l'utilisation ng serveou lors du test des modules dans la bibliothèque elle-même, même lors de la construction --prod.

Il s'avère que j'ai également été induit en erreur par l'intellisense. Pour quelques-uns de mes modules, j'avais importé un module sœur en tant que

import { DesignModule } from '../../design';

au lieu de

import { DesignModule } from '../../design/design.module';

Cela a bien fonctionné dans toutes les versions sauf celle que j'ai décrite.

C'était terrible à cerner et j'ai eu de la chance que cela ne me prenne pas plus de temps. J'espère que cela aidera quelqu'un.

— Nayfin
source
C'était ça xD Savez-vous par hasard comment configurer intellisense pour ne pas choisir la mauvaise version?
— user2035039
Désolé, non.
— Nayfin
4

A eu la même exception lors de la tentative de compilation d'une application Angular 5.

Unexpected value 'undefined' imported by the module 'DemoAppModule'

Dans mon cas, il s'est avéré que c'était une dépendance circulaire que j'ai trouvée en utilisant un outil madge . J'ai trouvé les fichiers contenant une dépendance circulaire en exécutant

npx madge --circular --extensions ts src/
— Andrejs Abrickis
source
3

Vous devez supprimer la ligne import { provide } from '@angular/core';de app.module.tscar elle provideest désormais obsolète. Vous devez utiliser providecomme ci-dessous dans les fournisseurs:

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
  ]
— ranakrunal9
source
cela a du sens, je l'ai fait mais l'erreur est toujours la même
— surfealokesea
3

Il suffit de mettre le fournisseur dans le forRoot fonctionne: 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) => 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: '<%= APP_BASE %>'
    },
    // FormsModule,
    ReactiveFormsModule,
    { provide : MissingTranslationHandler, useClass: TranslationNotFoundHandler},
    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }
— surfealokesea
source
3

il existe une autre solution simple pour cela. J'ai 2 modules qui sont en quelque sorte profondément ancrés dans la structure en s'utilisant les uns les autres. J'ai rencontré le même problème avec les dépendances circulaires avec webpack et angular 2. J'ai simplement changé la façon dont le module est déclaré:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

Lorsque j'utilise maintenant l'instruction importations sur l'attribut ngModule, j'utilise simplement:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

Avec cela, tous les problèmes sont partis.

— Michael Baarz
source
Pouvez-vous expliquer un peu plus en détail comment cela fonctionne? Par exemple, comment utilisez-vous le DppIncludeModule dans votre composant?
— Kate S
Kate, désolé pour la réponse tardive. Je n'utilise pas le module dans le composant, j'encapsule les composants dans les modules. Les modules sont utilisés ensemble. Peut-être que vous avez un autre problème ici avec l'erreur non définie.
— Michael Baarz
3

Mon problème était d'avoir une exportation deux fois dans index.ts

La suppression de l'un d'entre eux a résolu le problème.

— CornelC
source
Holy Craps cela a fonctionné pour moi! Si vous exportez votre module à partir d'index.ts et que votre module importe des composants de modules à partir du même index.ts, cela semble provoquer un chargement circulaire. Vous devez importer dans votre module directement depuis le fichier du composant et non depuis l'index. TNX
— Tomas Katz
Problème tiré. Je ne peux pas imaginer combien de temps il me faudra pour résoudre ce problème sans voir cette réponse
— tom10271
3

J'ai eu ce problème, il est vrai que l'erreur sur la console n'est pas descriptive. Mais si vous regardez la sortie angular-cli:

Vous verrez un AVERTISSEMENT, pointant vers la dépendance circulaire

WARNING in Circular dependency detected:
module1 -> module2
module2 -> module1

La solution consiste donc à supprimer une importation de l'un des modules.

— T04435
source
Et si j'ai besoin de cette dépendance circulaire?
— Evan Sevy
@RuneStar Je pense que vous devrez déplacer la dépendance vers un module de niveau supérieur, puis importer le nouveau module sur les deux modules (X).
— T04435
2

Le problème est qu'il existe au moins une importation pour laquelle le fichier source est manquant.

Par exemple, j'ai eu la même erreur lorsque j'utilisais

       import { AppRoutingModule } from './app-routing.module';

Mais le fichier './app-routing.module' n'était pas là dans le chemin donné.

J'ai supprimé cette importation et l'erreur a disparu.

— Parler n'est pas cher Montrez-moi le code
source
2

J'ai eu la même erreur, aucun des conseils ci-dessus n'a aidé.

Dans mon cas, cela a été causé par WebStorm, qui a combiné deux importations en une seule.

import { ComponentOne, ComponentTwo } from '../component-dir';

J'ai extrait ceci en deux importations distinctes 

import { ComponentOne } from '../component-dir/component-one.service';
import { ComponentTwo } from '../component-dir/component-two.model';

Après cela, cela fonctionne sans erreur.

— Jakub Rybiński
source
Merci mon pote. Cela a aidé
— DinoMyte
duplicata de la réponse précédente: stackoverflow.com/a/49667611/1243048
— Maelig
@Maelig Je pense que dans la réponse liée, c'était un problème un peu différent. Je ne sais pas si c'est une faute de frappe, mais il y a aussi un problème avec le bon dir, une fois c'est ./modelsune autre fois./model
— Jakub Rybiński
1

Dans le cas où votre index exporte un module - Ce module ne doit pas importer ses composants à partir du même index, il doit les importer directement à partir du fichier de composants.

J'ai eu ce problème, et lorsque je suis passé de l'importation des composants dans le fichier de module à l'aide de l'index à leur importation à l'aide du fichier direct, cela a été résolu.

par exemple changé:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './index';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

à:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './MainNavComponent';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

supprimez également les exportations désormais inutiles de votre index, par exemple:

export { MainNavModule } from './MainNavModule';
export { MainNavComponent } from './MainNavComponent';

à:

export { MainNavModule } from './MainNavModule';
— Tomas Katz
source
Merci que c'était mon problème, l'IDE importe depuis le dossier ex: '/ components' ma bibliothèque a été construite sans problème mais ne peut pas être utilisée dans une autre bibliothèque
— Mosta
1

Une autre raison pourrait être un code comme celui-ci:

import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { CoreModule } from 'app/core/core.module';
import { RouterModule } from '@angular/router';
import { COMPANY_ROUTES } from 'app/company/company.routing';
import { CompanyService } from 'app/company/services/company.service';
import { CompanyListComponent } from 'app/company/components/company-list/company-list.component';

@NgModule({
    imports: [
        CoreModule,
        SharedModule,
		RouterModule.forChild(COMPANY_ROUTES)
    ],
    declarations: [
		CompanyListComponent
    ],
    providers: [
		CompanyService
    ],
    exports: [
    ]
})
export class CompanyModule { }
Développer l'extrait

Parce que les exportations sont un tableau vide et qu'il a, avant lui, il doit être supprimé.

— SaamTehraani
source
1

J'ai eu le même problème, j'ai ajouté le composant dans l' index.ts de a = du dossier et j'ai fait une exportation. L'erreur non définie surgissait toujours. Mais l'IDE fait apparaître nos lignes ondulées rouges

Puis comme suggéré changé de 

import { SearchComponent } from './';

à

import { SearchComponent } from './search/search.component';
— Faizal Khan
source
1

Tant que vous êtes sûr de ne rien faire de mal, veuillez terminer "ng serve" et le redémarrer. Ce faisant, le compilateur effectue tout son travail et l'application fonctionne comme prévu. Des expériences antérieures avec des modules m'ont appris à les créer lorsque "ng serve" n'est pas en cours d'exécution ou à redémarrer le terminal une fois que j'ai terminé.

Le redémarrage de "ng serve" fonctionne également lorsque vous émettez un nouveau composant vers un autre composant, il est possible que le compilateur n'ait pas reconnu votre nouveau composant, redémarrez simplement "ng serve"

Cela a fonctionné pour moi il y a quelques minutes.

— Benneee_
source
0

Je le répare en supprimant tous les fichiers d'exportation d'index, en incluant le tuyau, le service. alors tout chemin d'importation de fichier est un chemin spécifique. par exemple.

import { AuthService } from './_common/services/auth.service';

remplacer

import { AuthService } from './_common/services';

de plus, n'exportez pas la classe par défaut.

— wfsovereign
source
Mais comment cela devrait-il aider? La suppression du nom de fichier prend l'index.ts du dossier que vous attribuez.
— Michael Baarz
@MichaelBaarz à ce moment-là, reomve le fichier d'index m'aide à résoudre le problème. mais maintenant, je mets à niveau la version ng vers 2.4.9, ce problème n'existe pas, c'est à dire, je peux utiliser la référence d'exportation de fichier index.ts. donc je pense que c'est peut-être un problème avec ng build
— wfsovereign
Au moins, il s'agit d'un cas limite et résulte d'une mauvaise structure de package. Les forfaits ne doivent pas comporter d’allers-retours. Clarifier la structure du package le corrigera de toute façon.
— Michael Baarz
@MichaelBaarz oui, je suis d'accord avec vous.
— wfsovereign le
0

Mon problème était un nom de composant mal orthographié dans le fichier component.ts.

La déclaration d'importation n'a pas montré d'erreur, mais la déclaration l'a fait, ce qui m'a induit en erreur.

— Taran
source
0

L' argument " private http: Http " inutilisé dans le constructeur de app.component.ts m'avait causé la même erreur et il a été résolu en supprimant l'argument inutilisé du constructeur

— Pavan V. Achar
source
0

Très probablement, l'erreur sera liée au fichier AppModule.ts.

Pour résoudre ce problème, vérifiez si chaque composant est déclaré et chaque service que nous déclarons est placé dans les fournisseurs, etc.

Et même si tout semble correct dans le fichier AppModule et que vous obtenez toujours l'erreur, arrêtez votre instance angulaire en cours d'exécution et redémarrez-la à nouveau. Cela peut résoudre votre problème si tout dans le fichier du module est correct et si vous obtenez toujours l'erreur.

— Jithin
source
0

Pour moi, le problème a été résolu en modifiant la séquence d'importation:

Un avec j'ai eu l'erreur:

imports: [ 
 BrowserModule, HttpClientModule, AppRoutingModule, 
 CommonModule
],

Changé ceci en: 

   imports: [
    BrowserModule, CommonModule, HttpClientModule,
    AppRoutingModule
  ],
— pritesh agrawal
source
1
Sans rapport avec le problème, puisque BrowserModule exporte CommonModule les avoir tous les deux est redondant.
— Semir Deljić
0

Les solutions ci-dessus n'ont pas fonctionné pour moi.

Donc, je soutiens la version d'angular-cli de 1.6.4 pour 1.4.4 et cela a résolu mon problème.

Je ne sais pas si c'est la meilleure solution, mais pour l'instant, cela a fonctionné pour moi

— Jeterson Miranda Gomes
source
0

J'étais confronté au même problème. Le problème était que j'importais une classe à partir d'index.ts

    import {className} from '..shared/index'

index.ts contient l'instruction d'exportation 

    export * from './models';

Je l'ai changé en fichier .ts qui contient l'objet de classe réel

    import {className} from '..shared/model'

et il a résolu.

— Deepti-l
source
0

Pour moi, cette erreur a été causée par une importation inutilisée:

import { NgModule, Input } from '@angular/core';

Erreur résultante:

L'entrée est déclarée, mais sa valeur n'est jamais lue

Commentez-le, et l'erreur ne se produit pas:

import { NgModule/*, Input*/ } from '@angular/core';
— Elvis Lev
source
0

J'ai rencontré ce problème à la 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!

car il n'y a qu'un root.

— WanderHuang
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.