Fehler: Vom Modul importierter unerwarteter Wert 'undefined'

Ich erhalte diesen Fehler nach der Migration zu NgModule. Der Fehler hilft nicht allzu viel. Bitte einen Rat?

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

Für alle, die denselben Fehler hatten, war meine Situation, dass ich im Importbereich doppelte Kommas habe

imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes), , // <-- this was the error
      // .... 
],

Stellen Sie sicher, dass sich die Module nicht gegenseitig importieren. Also sollte es nicht geben

In Modul A: imports[ModuleB]

In Modul B: imports[ModuleA]

Dies kann durch mehrere Szenarien wie verursacht werden

1. Fehlende Kommas

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

2. Doppelte Kommas

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

3. Nichts aus dem Modul exportieren
4. Syntaxfehler
5. Tippfehler
6. Semikolons in Objekten, Arrays
7. Falsche Importanweisungen

Keine der oben genannten Lösungen hat bei mir funktioniert, sondern einfach "ng serve" gestoppt und erneut ausgeführt.

Ich hatte das gleiche Problem. In meinem Fall ist der Grund ein zusätzliches Komma.

Ich hatte diesen Fehler, weil ich eine index.tsDatei im Stammverzeichnis meiner App hatte, die meine exportierte app.component.ts. Also dachte ich, ich könnte Folgendes tun:

import { AppComponent } from './';

Dies funktionierte und gab mir keine roten, schnörkellosen Linien und sogar Intellisense ruft AppComponent auf, wenn Sie mit der Eingabe beginnen. Aber kommen Sie, um herauszufinden, dass es diesen Fehler verursacht hat. Nachdem ich es geändert habe zu:

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

Der Fehler ging weg.

Stellen Sie sicher, dass Sie ein Modul / eine Komponente wie folgt nicht importieren:

import { YOUR_COMPONENT } from './';

Aber es sollte sein

import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';

Diese Ausgabe von zirkulären Abhängigkeiten von zwei Modulen

Modul 1: Importieren Modul 2
Modul 2: Importieren Modul 1

Ich erstelle eine Komponentenbibliothek und erhalte diesen Fehler in meiner App, die diese Bibliothek importiert. Beim Laufen ng build --prododer ng serve --aotin der App würde ich bekommen:

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

Aber auch beim Einbau keine Fehler bei der Verwendung ng serveoder beim Testen der Module in der Bibliothek --prod.

Es stellte sich heraus, dass ich auch von Intellisense in die Irre geführt wurde. Für einige meiner Module hatte ich ein Schwestermodul als importiert

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

anstatt

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

Es hat in allen Builds außer dem von mir beschriebenen gut funktioniert.

Es war schrecklich, das festzuhalten, und ich hatte Glück, dass ich nicht länger gebraucht habe als es war. Hoffe das hilft jemandem.

Hatte die gleiche Ausnahme beim Versuch, eine Angular 5-Anwendung zu kompilieren.

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

In meinem Fall stellte sich heraus, dass es sich um eine zirkuläre Abhängigkeit handelte, die ich mithilfe eines Tool Madges gefunden hatte . Die Dateien mit der zirkulären Abhängigkeit wurden durch Ausführen gefunden

npx madge --circular --extensions ts src/

Sie haben Linie entfernen import { provide } from '@angular/core';aus app.module.tswie providejetzt veraltet. Sie müssen providewie folgt in Anbietern verwenden:

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
  ]

Das Einfügen des Providers in forRoot funktioniert: 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 { }

Dafür gibt es eine andere einfache Lösung. Ich habe 2 Module, die irgendwie tief in der Struktur sind und sich gegenseitig benutzen. Ich bin auf dasselbe Problem mit zirkulären Abhängigkeiten mit Webpack und Angular 2 gestoßen. Ich habe einfach die Art und Weise geändert, wie das eine Modul deklariert wird:

....

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

export = DppIncludeModule;

Wenn ich jetzt die imports-Anweisung für das ngModule-Attribut verwende, verwende ich einfach:

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

Damit sind alle Probleme weg.

Mein Problem war ein zweimaliger Export in index.ts

Das Entfernen eines davon löste das Problem.

Ich hatte dieses Problem, es ist wahr, dass der Fehler auf der Konsole nicht beschreibend ist. Aber wenn Sie sich die Angular-Cli-Ausgabe ansehen:

Sie sehen eine WARNUNG, die auf die zirkuläre Abhängigkeit verweist

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

Die Lösung besteht also darin, einen Import von einem der Module zu entfernen.

Das Problem ist, dass es mindestens einen Import gibt, für den die Quelldatei fehlt.

Zum Beispiel habe ich den gleichen Fehler erhalten, als ich verwendet habe

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

Die Datei './app-routing.module' befand sich jedoch nicht im angegebenen Pfad.

Ich habe diesen Import entfernt und der Fehler ist verschwunden.

Ich hatte den gleichen Fehler, keiner der oben genannten Tipps hat nicht geholfen.

In meinem Fall wurde es durch WebStorm verursacht, zwei Importe zu einem kombiniert.

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

Ich habe dies in zwei separate Importe extrahiert

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

Danach funktioniert es ohne Fehler.

Falls Ihr Index ein Modul exportiert - Dieses Modul sollte seine Komponenten nicht aus demselben Index importieren, sondern sie direkt aus der Komponentendatei importieren.

Ich hatte dieses Problem, und als ich vom Importieren der Komponenten in die Moduldatei mithilfe des Index zum Importieren der Komponenten mithilfe der Direktdatei wechselte, wurde dieses Problem behoben.

zB geändert:

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

zu:

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

Entfernen Sie auch die jetzt unnötigen Exporte aus Ihrem Index, z.

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

zu:

export { MainNavModule } from './MainNavModule';

Ein weiterer Grund könnte ein Code wie dieser sein:

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

Da Exporte ein leeres Array sind und es davor hat, sollte es entfernt werden.

Ich hatte das gleiche Problem, ich habe die Komponente in der index.ts von a = des Ordners hinzugefügt und einen Export durchgeführt. Trotzdem tauchte der undefinierte Fehler auf. Aber die IDE lässt unsere roten, schnörkellosen Linien platzen

Dann wie vorgeschlagen geändert von

import { SearchComponent } from './';

zu

import { SearchComponent } from './search/search.component';

Solange Sie sicher sind, dass Sie nichts falsch machen, beenden Sie bitte "ng serve" und starten Sie es neu. Auf diese Weise erledigt der Compiler seine gesamte Arbeit und die App dient wie erwartet. Frühere Erfahrungen mit Modulen haben mich gelehrt, sie entweder zu erstellen, wenn "ng serve" nicht ausgeführt wird, oder das Terminal neu zu starten, sobald ich fertig bin.

Das Neustarten von "ng serve" funktioniert auch, wenn Sie eine neue Komponente an eine andere Komponente senden. Möglicherweise hat der Compiler Ihre neue Komponente nicht erkannt. Starten Sie einfach "ng serve" neu.

Das hat bei mir erst vor wenigen Minuten funktioniert.

Ich behebe es, indem ich alle Index-Exportdateien lösche, einschließlich Pipe, Service. dann ist der gesamte Dateiimportpfad ein bestimmter Pfad. z.B.

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

ersetzen

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

Exportieren Sie außerdem keine Standardklasse.

Mein Problem war ein falsch geschriebener Komponentenname innerhalb der component.ts .

Die import-Anweisung zeigte keinen Fehler, die Deklaration jedoch, was mich irreführte.

Das nicht verwendete Argument " private http: Http " im Konstruktor von app.component.ts hatte denselben Fehler verursacht und wurde behoben, nachdem das nicht verwendete Argument des Konstruktors entfernt wurde

Höchstwahrscheinlich hängt der Fehler mit der Datei AppModule.ts zusammen.

Um dieses Problem zu lösen, überprüfen Sie, ob jede Komponente deklariert ist und jeder von uns deklarierte Dienst bei den Anbietern usw. abgelegt ist.

Und selbst wenn in der AppModule-Datei alles in Ordnung zu sein scheint und Sie dennoch den Fehler erhalten, stoppen Sie Ihre laufende Winkelinstanz und starten Sie sie erneut. Dies kann Ihr Problem lösen, wenn alles in der Moduldatei korrekt ist und Sie immer noch den Fehler erhalten.

Für mich wurde das Problem durch Ändern der Importsequenz gelöst:

Eins mit ich habe den Fehler bekommen:

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

Geändert zu:

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

Die oben genannten Lösungen haben bei mir nicht funktioniert.

Also habe ich die Version von Angular-Cli von 1.6.4 für 1.4.4 unterstützt und dies hat mein Problem gelöst.

Ich weiß nicht, ob dies die beste Lösung ist, aber im Moment hat das bei mir funktioniert

Ich hatte das gleiche Problem. Das Problem war, dass ich eine Klasse aus index.ts importierte

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

index.ts enthält die export-Anweisung

    export * from './models';

Ich habe es in die .ts-Datei geändert, die das eigentliche Klassenobjekt enthält

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

und es löste sich auf.

Für mich wurde dieser Fehler durch nur unbenutzten Import verursacht:

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

Resultierender Fehler:

Die Eingabe wird deklariert, der Wert jedoch nie gelesen

Kommentieren Sie es aus und es tritt kein Fehler auf:

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

Ich bin auf dieses Problem in der Situation gestoßen: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

weil es nur eine gibt root.