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

Question 1

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

Question 2

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

Question 3

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

W module A: imports[ModuleB]

W module B: imports[ModuleA]

Question 4

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

Brak przecinków

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

Podwójne przecinki

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

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

Question 5

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

Question 6

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

Question 7

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ął.

Question 8

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

Question 9

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

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

Question 10

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.

Question 11

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/

Question 12

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
  ]

Question 13

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

Question 14

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ą.

Question 15

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

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

Question 16

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.

Question 17

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.

Question 18

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ął.

Question 19

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.

Question 20

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

Question 21

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

Rozwiń fragment

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

Question 22

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

Question 23

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.

Question 24

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.

Question 25

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

Question 26

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.

Question 27

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

Question 28

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

Question 29

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.

Question 30

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

Question 31

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.