Hata: Modül tarafından içe aktarılan beklenmeyen 'tanımsız' değer

Question 1

NgModule'e geçtikten sonra bu hatayı alıyorum, hata çok yardımcı olmuyor, herhangi bir tavsiye lütfen?

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

Aynı hatayla karşılaşan herkes için durumum, ithalatlar bölümünde çift virgül olmasıydı.

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

Question 3

Modüllerin birbirini içe aktarmadığından emin olun. Yani olmamalı

Modül A'da: imports[ModuleB]

Modül B'de: imports[ModuleA]

Question 4

Bu, aşağıdaki gibi birden çok senaryodan kaynaklanabilir:

Eksik virgül

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

Çift Virgül

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

Modülden Hiçbir Şeyi Dışa Aktarma
Sözdizimi hataları
Yazım Hataları
Nesnelerin, Dizilerin içindeki noktalı virgül
Yanlış ithalat Beyanları

Question 5

Yukarıdaki çözümlerin hiçbiri benim için işe yaramadı, sadece "ng hizmetini" durdurup tekrar çalıştırdı.

Question 6

Ben de aynı sorunu yaşadım. Benim durumumda, sebep fazladan bir virgüldür.

Question 7

Bu hatayı aldım çünkü index.tsuygulamamın kök dizininde app.component.ts. Bu yüzden aşağıdakileri yapabileceğimi düşündüm:

import { AppComponent } from './';

Bu işe yaradı ve bana kırmızı dalgalı çizgiler vermedi ve hatta intellisense, yazmaya başladığınızda AppComponent'ı getiriyor. Ama bu hataya neden olduğunu öğrenmeye gelin. Şu şekilde değiştirdikten sonra:

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

Hata ortadan kalktı.

Question 8

Bunun gibi bir modülü / bileşeni içe aktarmadığınızdan emin olun:

import { YOUR_COMPONENT } from './';

Ama olmalı

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

Question 9

Bu iki modülün döngüsel bağımlılıkları sorunu

Modül 1: Modül 2'yi İçe Aktar
Modül 2: Modül 1'i İçe Aktar

Question 10

Bir bileşen kitaplığı oluşturuyorum ve söz konusu kitaplığı içe aktaran uygulamamda bu hatayı almaya başladım. Çalışırken ng build --prodveya ng serve --aotuygulama içinde şunları alırım:

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

Ancak ng serve, modülleri kullanırken veya kitaplığın içinde test ederken bile hata oluşmaz --prod.

Zekâ tarafından da yanıltıldım. Modüllerimden birkaçı için bir kardeş modülü içe aktarmıştım.

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

onun yerine

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

Açıkladığım hariç tüm yapılarda iyi çalıştı.

Bunu tespit etmek korkunçtu ve şanslıydım ki, beni bundan daha uzun sürmedi. Umarım bu birine yardımcı olur.

Question 11

Angular 5 uygulaması derlenmeye çalışıldığında da aynı istisna vardı.

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

Benim durumumda, bir araç madge kullanarak bulduğum dairesel bir bağımlılık olduğu ortaya çıktı . Döngüsel bağımlılık içeren dosyaları çalıştırarak bulundu

npx madge --circular --extensions ts src/

Question 12

Çizgiyi kaldırmak zorunda import { provide } from '@angular/core';den app.module.tsolarak provideartık uygun bulunmamaktadır. provideSağlayıcılarda aşağıdaki gibi kullanmanız gerekir :

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

Sağlayıcıyı forRoot'un içine koymak yeterlidir: 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

bunun için başka bir basit çözüm var. Bir şekilde yapının derinliklerinde birbirini kullanan 2 modülüm var. Web paketi ve açısal 2 ile döngüsel bağımlılıklarda aynı problemle karşılaştım. Bir modülün açıklanma şeklini değiştirdim:

....

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

export = DppIncludeModule;

Şimdi ngModule özniteliğinde imports ifadesini kullandığımda, sadece şunu kullanıyorum:

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

Bununla tüm sorunlar ortadan kalkar.

Question 15

Benim sorunum index.ts'de iki kez dışa aktarma yapmaktı.

Bunlardan birini kaldırmak sorunu çözdü.

Question 16

Bu sorunu yaşadım, konsoldaki hatanın açıklayıcı olmadığı doğru. Ama açısal-cli çıktısına bakarsanız:

Döngüsel bağımlılığı gösteren bir UYARI göreceksiniz

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

Dolayısıyla çözüm, Modüllerin birinden bir içe aktarmayı kaldırmaktır.

Question 17

Yanlış bir şey yapmadığınızdan emin olduğunuz sürece, lütfen "ng servisini" sonlandırın ve yeniden başlatın. Bunu yaparak, derleyici tüm işini yapar ve uygulama beklendiği gibi hizmet verir. Modüllerle ilgili önceki deneyimler bana ya "ng hizmeti" çalışmıyorken onları oluşturmayı ya da işim bittiğinde terminali yeniden başlatmayı öğretti.

"Ng hizmetini" yeniden başlatmak, başka bir bileşene yeni bir bileşen gönderdiğinizde de çalışır, derleyici yeni bileşeninizi tanımamış olabilir, "ng hizmeti" ni yeniden başlatmanız yeterlidir.

Bu benim için sadece birkaç dakika önce çalıştı.

Question 18

Sorun, kaynak dosyanın eksik olduğu en az bir içe aktarmanın olmasıdır.

Örneğin, kullanırken aynı hatayı aldım

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

Ancak './app-routing.module' dosyası verilen yolda yoktu.

Bu içe aktarmayı kaldırdım ve hata ortadan kalktı.

Question 19

Aynı hatayı aldım, yukarıdaki ipuçlarından hiçbiri yardımcı olmadı.

Benim durumumda, buna WebStorm neden oldu, iki ithalatı bire birleştirdi.

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

Bunu iki ayrı ithalata çıkardım

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

Bundan sonra hatasız çalışır.

Question 20

Dizininizin bir modülü dışa aktarması durumunda - Bu modül bileşenlerini aynı dizinden içe aktarmamalı, bunları doğrudan bileşenler dosyasından içe aktarmalıdır.

Bu sorunu yaşadım ve modül dosyasındaki bileşenleri indeksi kullanarak içe aktarmayı doğrudan dosyayı kullanarak içe aktarmaya değiştirdiğimde, bu çözüldü.

örneğin değişti:

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

to:

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

ayrıca artık gereksiz dışa aktarımları da dizinden kaldırın, örneğin:

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

to:

export { MainNavModule } from './MainNavModule';

Question 21

Başka bir neden de bunun gibi bir kod olabilir:

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

Snippet'i genişlet

Dışa aktarımlar boş bir dizi olduğundan ve ondan önce sahip olduğu için kaldırılması gerekir.

Question 22

Aynı sorunu yaşadım, bileşeni index.ts içine ekledim. klasörün a = ve bir dışa aktarım yaptım. Yine de tanımlanmamış hata patlıyordu. Ama IDE herhangi bir kırmızı dalgalı çizgimizi patlatır

Sonra önerildiği gibi yerine

import { SearchComponent } from './';

-e

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

Question 23

Boru, servis dahil olmak üzere tüm dizin dışa aktarma dosyasını silerek düzeltiyorum. tüm dosya içe aktarma yolu belirli bir yoldur. Örneğin.

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

yerine koymak

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

ayrıca, varsayılan sınıfı dışa aktarmayın.

Question 24

Benim sorunum, içinde yanlış yazılmış bir bileşen adıydı component.ts.

İthalat beyanı bir hata göstermedi, ancak beyan beni yanılttı.

Question 25

App.component.ts yapıcısındaki kullanılmayan " özel http: Http " bağımsız değişkeni bana aynı hataya neden oldu ve kurucunun kullanılmayan bağımsız değişkenini kaldırdıktan sonra çözüldü

Question 26

Büyük olasılıkla hata AppModule.ts dosyasıyla ilgili olacaktır.

Bu sorunu çözmek için, her bileşenin beyan edilip edilmediğini ve beyan ettiğimiz her hizmetin sağlayıcılara konulup konulmadığını kontrol edin.

Ve AppModule dosyasında her şey doğru görünse ve hala hatayı alsanız bile, açısal örneğinizi çalıştırmayı durdurun ve bir kez daha yeniden başlatın. Modül dosyasındaki her şey doğruysa ve hala hatayı alıyorsanız, bu sorununuzu çözebilir.

Question 27

Benim için sorun, içe aktarma sırasını değiştirerek çözüldü:

Bir hata aldım:

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

Bunu şu şekilde değiştirdi:

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

Question 28

Yukarıdaki Çözümler benim için işe yaramadı.

Bu yüzden, 1.4.4 için 1.6.4'ün angular-cli sürümünü geri aldım ve bu benim sorunumu çözdü.

Bunun en iyi çözüm olup olmadığını bilmiyorum ama şimdilik bu benim için çalıştı

Question 29

Ben de aynı problemle karşı karşıyaydım. Sorun, index.ts'den bazı sınıfları içe aktarmamdı.

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

index.ts ihracat ifadesini içerir

    export * from './models';

Onu gerçek sınıf nesnesini içeren .ts dosyasına değiştirdim

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

ve çözüldü.

Question 30

Benim için bu hataya sadece kullanılmayan içe aktarma neden oldu:

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

Ortaya çıkan hata:

Giriş bildirilir, ancak değeri asla okunmaz

Yorum yaparsanız hata oluşmaz:

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

Question 31

Şu durumda bu problemle karşılaştım: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

çünkü sadece bir root.