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

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

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
      // .... 
],

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]

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

1. Virgules manquantes

imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],

2. Double virgule

imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],

3. N'exporter rien du module
4. Erreurs de syntaxe
5. Erreurs typographiques
6. Points-virgules à l'intérieur des objets, tableaux
7. Déclarations d'importation incorrectes

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

J'ai eu le même problème. Dans mon cas, la raison est une virgule supplémentaire.

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.

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

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

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

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.

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/

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
  ]

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

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.

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.

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.

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.

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.

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

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

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

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

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.

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.

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.

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

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.

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

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

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.

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

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.