Errore: valore imprevisto "undefined" importato dal modulo

Ricevo questo errore dopo la migrazione a NgModule, l'errore non aiuta molto, qualche consiglio per favore?

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

Per chiunque abbia riscontrato lo stesso errore, la mia situazione era che ho doppie virgole nella sezione delle importazioni

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

Assicurati che i moduli non si importino a vicenda. Quindi, non dovrebbe esserci

Nel Modulo A: imports[ModuleB]

Nel modulo B: imports[ModuleA]

Ciò può essere causato da più scenari come

1. Virgole mancanti

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

2. Virgole doppie

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

3. Non esportare nulla dal modulo
4. Errori di sintassi
5. Errori di battitura
6. Punto e virgola all'interno di oggetti, array
7. Dichiarazioni di importazione errate

Nessuna delle soluzioni precedenti ha funzionato per me, ma semplicemente interrompendo ed eseguendo di nuovo "ng serve".

Ho avuto lo stesso problema. Nel mio caso, il motivo è una virgola in più.

Ho riscontrato questo errore perché avevo un index.tsfile nella radice della mia app che esportava il mio app.component.ts. Quindi ho pensato di poter fare quanto segue:

import { AppComponent } from './';

Questo ha funzionato e non mi ha dato linee ondulate rosse e persino intellisense fa apparire AppComponent quando inizi a digitarlo. Ma vieni a scoprire che stava causando questo errore. Dopo averlo cambiato in:

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

L'errore è andato via.

Assicurati di non importare un modulo / componente come questo:

import { YOUR_COMPONENT } from './';

Ma dovrebbe essere

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

Questo problema di dipendenze circolari di due moduli

Modulo 1: importazione Modulo 2
Modulo 2: importazione Modulo 1

Sto costruendo una libreria di componenti e ho iniziato a ricevere questo errore nella mia app che sta importando detta libreria. Durante l'esecuzione ng build --prodo ng serve --aotnell'app otterrei:

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

Ma nessun errore durante l'utilizzo ng serveo durante il test dei moduli nella libreria stessa anche durante la compilazione--prod .

È venuto fuori che anche io sono stato ingannato dall'intellisense. Per alcuni dei miei moduli avevo importato un modulo gemello come

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

invece di

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

Ha funzionato bene in tutte le build tranne quella che ho descritto.

È stato terribile da definire e sono stato fortunato che non mi ci è voluto più tempo. Spero che questo aiuti qualcuno.

Ha avuto la stessa eccezione quando si è tentato di compilare un'applicazione Angular 5.

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

Nel mio caso si è scoperto che si trattava di una dipendenza circolare che ho trovato utilizzando uno strumento madge . Trovati i file contenenti dipendenza circolare eseguendo

npx madge --circular --extensions ts src/

Devi rimuovere la riga import { provide } from '@angular/core';da app.module.tscome provideè deprecata ora. Devi usare providecome di seguito nei provider:

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
  ]

Basta inserire il provider all'interno dei lavori forRoot: 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 { }

c'è un'altra semplice soluzione per questo. Ho 2 moduli che sono in qualche modo profondi nella struttura che si usano l'un l'altro. Mi sono imbattuto nello stesso problema con le dipendenze circolari con webpack e angular 2. Ho semplicemente cambiato il modo in cui viene dichiarato un modulo:

....

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

export = DppIncludeModule;

Quando ora utilizzo l'istruzione imports sull'attributo ngModule, uso semplicemente:

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

Con questo tutti i problemi sono via.

Il mio problema era avere un'esportazione due volte in index.ts

La rimozione di uno di essi ha risolto il problema.

Ho avuto questo problema, è vero che l'errore sulla console non è descrittivo. Ma se guardi l'output angular-cli:

Vedrai un AVVISO, che punta alla dipendenza circolare

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

Quindi la soluzione è rimuovere un'importazione da uno dei moduli.

Il problema è che esiste almeno un'importazione per la quale manca il file di origine.

Ad esempio, ho ricevuto lo stesso errore quando stavo usando

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

Ma il file "./app-routing.module" non era presente nel percorso specificato.

Ho rimosso questa importazione e l'errore è andato via.

Ho avuto lo stesso errore, nessuno dei suggerimenti precedenti non ha aiutato.

Nel mio caso, è stato causato da WebStorm, che ha combinato due importazioni in una.

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

L'ho estratto in due importazioni separate

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

Dopo questo funziona senza errori.

Nel caso in cui il tuo indice esporti un modulo - Quel modulo non dovrebbe importare i suoi componenti dallo stesso indice, dovrebbe importarli direttamente dal file dei componenti.

Ho riscontrato questo problema e quando sono passato dall'importazione dei componenti nel file del modulo utilizzando l'indice all'importazione utilizzando il file diretto, è stato risolto.

ad es. modificato:

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

per:

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

rimuovi anche le esportazioni non necessarie dal tuo indice, ad esempio:

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

per:

export { MainNavModule } from './MainNavModule';

Un altro motivo potrebbe essere un codice come questo:

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

Poiché le esportazioni sono un array vuoto e prima di esso, dovrebbe essere rimosso.

Ho avuto lo stesso problema, ho aggiunto il componente in index.ts di a = della cartella e ho fatto un'esportazione. L'errore indefinito stava ancora scoppiando. Ma l'IDE fa apparire le nostre linee ondulate rosse

Quindi come suggerito cambiato da

import { SearchComponent } from './';

per

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

Finché sei sicuro di non fare nulla di sbagliato, interrompi gentilmente "ng serve" e riavvialo. In questo modo, il compilatore fa tutto il suo lavoro e l'app funziona come previsto. Le precedenti esperienze con i moduli mi hanno insegnato a crearli quando "ng serve" non è in esecuzione o a riavviare il terminale una volta terminato.

Il riavvio di "ng serve" funziona anche quando stai emettendo un nuovo componente su un altro componente, è possibile che il compilatore non abbia riconosciuto il tuo nuovo componente, riavvia semplicemente "ng serve"

Questo ha funzionato per me solo pochi minuti fa.

Lo risolvo eliminando tutti i file di esportazione dell'indice, includi pipe, servizio. quindi tutto il percorso di importazione dei file è un percorso specifico. per esempio.

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

sostituire

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

inoltre, non esportare la classe predefinita.

Il mio problema era un nome del componente scritto in modo errato all'interno del file component.ts.

L'istruzione import non ha mostrato un errore ma la dichiarazione sì, il che mi ha indotto in errore.

L' argomento " privato http: Http " inutilizzato nel costruttore di app.component.ts mi aveva causato lo stesso errore e si è risolto rimuovendo l'argomento inutilizzato del costruttore

Molto probabilmente l'errore sarà correlato al file AppModule.ts.

Per risolvere questo problema verificare se ogni componente è dichiarato e ogni servizio che dichiariamo è inserito nei provider ecc.

E anche se tutto sembra corretto nel file AppModule e ricevi ancora l'errore, interrompi l'istanza angolare in esecuzione e riavviala di nuovo. Ciò potrebbe risolvere il tuo problema se tutto nel file del modulo è corretto e se continui a ricevere l'errore.

Per me il problema è stato risolto modificando la sequenza di importazione:

Uno con ho ricevuto l'errore:

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

Modificato in:

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

Le soluzioni di cui sopra non hanno funzionato per me.

Quindi ho supportato la versione di angular-cli di 1.6.4 per 1.4.4 e questo ha risolto il mio problema.

Non so se questa sia la soluzione migliore, ma per ora ha funzionato per me

Stavo affrontando lo stesso problema. Il problema era che stavo importando una classe da index.ts

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

index.ts contiene l'istruzione di esportazione

    export * from './models';

L'ho cambiato nel file .ts che contiene l'oggetto della classe effettivo

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

e si è risolto.

Per me, questo errore è stato causato da un'importazione non utilizzata:

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

Errore risultante:

L'input è dichiarato, ma il suo valore non viene mai letto

Commentalo e l'errore non si verifica:

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

Ho incontrato questo problema nella situazione: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

perché c'è solo un file root.