Błąd: nieoczekiwana wartość „undefined” zaimportowana przez moduł

Otrzymuję ten błąd po migracji do NgModule, błąd za bardzo nie pomaga, proszę o jakąś radę?

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

Dla każdego, kto napotkał ten sam błąd, moja sytuacja była taka, że ​​w sekcji importu mam podwójne przecinki

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

Upewnij się, że moduły nie importują się nawzajem. Więc nie powinno być

W module A: imports[ModuleB]

W module B: imports[ModuleA]

Może to być spowodowane wieloma scenariuszami, takimi jak

1. Brak przecinków

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

2. Podwójne przecinki

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

3. Eksportowanie niczego z modułu
4. Błędy składniowe
5. Błędy literówki
6. Średniki wewnątrz obiektów, tablic
7. Nieprawidłowe instrukcje importu

Żadne z powyższych rozwiązań nie zadziałało, ale po prostu zatrzymałem się i ponownie uruchomiłem „ng servis”.

Miałem ten sam problem. W moim przypadku powodem jest dodatkowy przecinek.

Wystąpił ten błąd, ponieważ index.tsw katalogu głównym mojej aplikacji znajdował się plik, który eksportował plik app.component.ts. Pomyślałem więc, że mogę wykonać następujące czynności:

import { AppComponent } from './';

To zadziałało i nie dało mi żadnych czerwonych falistych linii, a nawet Intellisense wyświetla AppComponent, gdy zaczniesz go pisać. Ale dowiedz się, że to powoduje ten błąd. Po zmianie na:

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

Błąd zniknął.

Upewnij się, że nie powinieneś importować takiego modułu / komponentu:

import { YOUR_COMPONENT } from './';

Ale tak powinno być

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

To kwestia zależności cyklicznych dwóch modułów

Moduł 1: import Moduł 2
Moduł 2: import Moduł 1

Buduję bibliotekę komponentów i zacząłem otrzymywać ten błąd w mojej aplikacji, która importuje tę bibliotekę. Podczas pracy ng build --prodlub ng serve --aotw aplikacji otrzymywałbym:

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

Ale żadnych błędów podczas używania ng servelub testowania modułów w samej bibliotece, nawet podczas budowania --prod.

Okazało się, że ja również dałem się zwieść inteligencji. W przypadku kilku moich modułów zaimportowałem moduł siostrzany jako

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

zamiast

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

Działało dobrze we wszystkich wersjach z wyjątkiem opisanej przeze mnie.

To było okropne do ustalenia i miałem szczęście, że nie zajęło mi to więcej czasu niż to. Mam nadzieję, że to komuś pomoże.

Wystąpił ten sam wyjątek, gdy próbowano skompilować aplikację Angular 5.

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

W moim przypadku okazało się, że jest to zależność cykliczna, którą odkryłem za pomocą narzędzia do obróbki . Znaleziono pliki zawierające zależność cykliczną, uruchamiając

npx madge --circular --extensions ts src/

Musisz usunąć linię import { provide } from '@angular/core';zapp.module.ts która providejest przestarzała. Musisz użyć providejak poniżej w dostawcach:

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
  ]

Wystarczy umieścić dostawcę w 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 { }

jest na to inne proste rozwiązanie. Mam 2 moduły, które są jakoś głęboko w strukturze, wykorzystując się nawzajem. Napotkałem ten sam problem z zależnościami cyklicznymi z pakietem webpack i angular 2. Po prostu zmieniłem sposób deklarowania jednego modułu:

....

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

export = DppIncludeModule;

Kiedy teraz używam instrukcji Import w atrybucie ngModule, po prostu używam:

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

Dzięki temu wszystkie problemy znikną.

Mój problem polegał na tym, że eksportowałem dwukrotnie w index.ts

Usunięcie jednego z nich rozwiązało problem.

Miałem ten problem, co prawda błąd na konsoli nie jest opisowy. Ale jeśli spojrzysz na wyjście angular-cli:

Zobaczysz OSTRZEŻENIE wskazujące na zależność cykliczną

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

Zatem rozwiązaniem jest usunięcie jednego importu z jednego z modułów.

Jeśli jesteś pewien, że nie robisz nic złego, zakończ "ng serv" i uruchom je ponownie. W ten sposób kompilator wykonuje całą swoją pracę, a aplikacja działa zgodnie z oczekiwaniami. Wcześniejsze doświadczenia z modułami nauczyły mnie albo tworzyć je, gdy "ng serv" nie działa, albo restartować terminal, gdy skończę.

Ponowne uruchamianie „ng serv” działa również, gdy emitujesz nowy komponent do innego komponentu, możliwe, że kompilator nie rozpoznał twojego nowego komponentu, po prostu zrestartuj "ng serv"

U mnie to zadziałało zaledwie kilka minut temu.

Problem polega na tym, że istnieje co najmniej jeden import, dla którego brakuje pliku źródłowego.

Na przykład otrzymałem ten sam błąd podczas używania

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

Ale pliku „./app-routing.module” nie ma w podanej ścieżce.

Usunąłem ten import i błąd zniknął.

Miałem ten sam błąd, żadna z powyższych wskazówek nie pomogła.

W moim przypadku było to spowodowane WebStormem, połączonym dwoma importami w jeden.

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

Wyodrębniłem to na dwa oddzielne importy

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

Po tym działa bez błędów.

W przypadku, gdy indeks eksportuje moduł - moduł ten nie powinien importować swoich komponentów z tego samego indeksu, powinien importować je bezpośrednio z pliku komponentów.

Miałem ten problem i kiedy zmieniłem importowanie komponentów w pliku modułu przy użyciu indeksu na importowanie ich przy użyciu pliku bezpośredniego, problem został rozwiązany.

np. zmieniono:

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

do:

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

usuń również niepotrzebne obecnie eksporty ze swojego indeksu, np .:

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

do:

export { MainNavModule } from './MainNavModule';

Innym powodem może być taki kod:

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

Ponieważ eksport jest pustą tablicą i przed nią należy go usunąć.

Miałem ten sam problem, dodałem komponent w index.ts a = folderu i eksportu. Nadal pojawiał się niezdefiniowany błąd. Ale IDE przebija nasze czerwone faliste linie

Następnie zgodnie z sugestią zmieniono z

import { SearchComponent } from './';

do

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

Naprawiłem to, usuwając cały plik eksportu indeksu, dołączając rurę, usługę. wtedy cała ścieżka importu plików jest określoną ścieżką. na przykład.

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

zastąpić

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

poza tym nie eksportuj domyślnej klasy.

Mój problem polegał na błędnie wpisanej nazwie komponentu w pliku component.ts.

Instrukcja import nie pokazała błędu, ale deklaracja tak, co mnie wprowadziło w błąd.

Nieużywany argument „ prywatny http: Http ” w konstruktorze app.component.ts spowodował ten sam błąd i został rozwiązany po usunięciu nieużywanego argumentu konstruktora

Najprawdopodobniej błąd będzie związany z plikiem AppModule.ts.

Aby rozwiązać ten problem, sprawdź, czy każdy komponent jest zadeklarowany, a każda deklarowana przez nas usługa jest umieszczona u dostawców itp.

I nawet jeśli wszystko wydaje się być w pliku AppModule i nadal pojawia się błąd, zatrzymaj uruchomioną instancję kątową i uruchom ją ponownie. To może rozwiązać problem, jeśli wszystko w pliku modułu jest poprawne i nadal występuje błąd.

U mnie problem został rozwiązany poprzez zmianę kolejności importu:

Jeden z mam błąd:

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

Zmieniono to na:

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

Powyższe rozwiązania nie działają dla mnie.

Więc wycofałem wersję angular-cli 1.6.4 dla 1.4.4 i to rozwiązało mój problem.

Nie wiem, czy to najlepsze rozwiązanie, ale na razie to zadziałało

Miałem ten sam problem. Problem polegał na tym, że importowałem jakąś klasę z index.ts

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

index.ts zawiera instrukcję eksportu

    export * from './models';

Zmieniłem go na plik .ts, który zawiera rzeczywisty obiekt klasy

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

i to rozwiązało.

U mnie ten błąd był spowodowany po prostu nieużywanym importem:

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

Wynikowy błąd:

Dane wejściowe są zadeklarowane, ale ich wartość nigdy nie jest odczytywana

Skomentuj to, a błąd nie wystąpi:

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

Spotkałem się z tym problemem w sytuacji: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

ponieważ jest tylko plik root.