Kesalahan: Nilai tak terduga 'tidak ditentukan' diimpor oleh modul

Saya mendapatkan kesalahan ini setelah bermigrasi ke NgModule, kesalahan tidak terlalu membantu, ada saran?

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

Bagi siapa pun yang menghadapi kesalahan yang sama ini, situasi saya adalah saya memiliki koma ganda di bagian impor

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

Pastikan modul tidak saling mengimpor. Jadi, seharusnya tidak ada

Di Modul A: imports[ModuleB]

Di Modul B: imports[ModuleA]

Ini dapat disebabkan oleh beberapa skenario seperti

1. Koma tidak ada

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

2. Koma Ganda

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

3. Mengekspor Tidak Ada dari Modul
4. Kesalahan sintaks
5. Kesalahan Ketik
6. Titik koma di dalam Objek, Array
7. Pernyataan impor salah

Tidak ada solusi di atas yang berhasil untuk saya, tetapi cukup dengan menghentikan dan menjalankan "ng serve" lagi.

Saya memiliki masalah yang sama. Dalam kasus saya, alasannya adalah koma tambahan.

Saya mengalami kesalahan ini karena saya memiliki index.tsfile di root aplikasi saya yang mengekspor file app.component.ts. Jadi saya pikir saya bisa melakukan hal berikut:

import { AppComponent } from './';

Ini berfungsi dan tidak memberi saya garis berlekuk-lekuk merah dan bahkan intellisense menampilkan AppComponent saat Anda mulai mengetiknya. Tapi ketahuilah itu yang menyebabkan kesalahan ini. Setelah saya mengubahnya menjadi:

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

Kesalahannya hilang.

Pastikan Anda tidak mengimpor modul / komponen seperti ini:

import { YOUR_COMPONENT } from './';

Tapi seharusnya begitu

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

Masalah ketergantungan melingkar dari dua modul

Module 1: import Module 2
Module 2: import Module 1

Saya sedang membangun pustaka komponen dan mulai mendapatkan kesalahan ini di aplikasi saya yang mengimpor pustaka tersebut. Saat menjalankan ng build --prodatau ng serve --aotdalam aplikasi saya akan mendapatkan:

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

Tapi tidak ada kesalahan saat menggunakan ng serveatau saat menguji modul di pustaka itu sendiri bahkan saat membangun --prod.

Ternyata saya juga disesatkan oleh Intellisense. Untuk beberapa modul saya, saya telah mengimpor modul saudara sebagai

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

dari pada

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

Ini bekerja dengan baik di semua build kecuali yang saya jelaskan.

Ini mengerikan untuk dijabarkan dan saya beruntung itu tidak memakan waktu lebih lama dari yang seharusnya. Semoga ini bisa membantu seseorang.

Memiliki pengecualian yang sama saat mencoba mengompilasi aplikasi Angular 5.

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

Dalam kasus saya ternyata itu adalah ketergantungan melingkar yang saya temukan dengan menggunakan alat madge . Menemukan file yang berisi ketergantungan melingkar dengan menjalankan

npx madge --circular --extensions ts src/

Anda harus menghapus baris import { provide } from '@angular/core';dari app.module.tskarena providesudah usang sekarang. Anda harus menggunakan provideseperti di bawah ini di penyedia:

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
  ]

Hanya menempatkan penyedia di dalam forRoot berfungsi: 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 { }

ada solusi sederhana lain untuk ini. Saya memiliki 2 modul yang entah bagaimana jauh di dalam struktur menggunakan satu sama lain. Saya mengalami masalah yang sama dengan dependensi melingkar dengan webpack dan angular 2. Saya hanya mengubah cara bagaimana satu modul dideklarasikan:

....

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

export = DppIncludeModule;

Ketika saya sekarang menggunakan pernyataan impor pada atribut ngModule, saya cukup menggunakan:

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

Dengan ini semua masalah hilang.

Masalah saya adalah mengekspor dua kali di index.ts

Menghapus salah satu dari mereka memecahkan masalah.

Saya mengalami masalah ini, memang benar bahwa kesalahan pada konsol tidak deskriptif. Tetapi jika Anda melihat output angular-cli:

Anda akan melihat PERINGATAN, menunjuk ke dependensi melingkar

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

Jadi solusinya adalah menghapus satu impor dari salah satu Modul.

Selama Anda yakin tidak melakukan kesalahan apa pun, hentikan "ng serve" dan mulai ulang. Dengan demikian, kompilator melakukan semua tugasnya dan aplikasi berfungsi seperti yang diharapkan. Pengalaman sebelumnya dengan modul telah mengajari saya untuk membuatnya saat "ng serve" tidak berjalan atau memulai ulang terminal setelah saya selesai.

Memulai ulang "ng serve" juga berfungsi saat Anda memancarkan komponen baru ke komponen lain, mungkin saja compiler tidak mengenali komponen baru Anda, cukup mulai ulang "ng serve"

Ini berhasil bagi saya beberapa menit yang lalu.

Masalahnya adalah setidaknya ada satu impor yang file sumbernya hilang.

Misalnya saya mendapat kesalahan yang sama saat saya menggunakan

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

Tetapi file './app-routing.module' tidak ada di jalur yang diberikan.

Saya menghapus impor ini dan kesalahan hilang.

Saya mengalami kesalahan yang sama, tidak ada tip di atas yang tidak membantu.

Dalam kasus saya, ini disebabkan oleh WebStorm, menggabungkan dua impor menjadi satu.

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

Saya mengekstrak ini menjadi dua impor terpisah

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

Setelah ini berfungsi tanpa kesalahan.

Jika indeks Anda mengekspor modul - Modul itu tidak boleh mengimpor komponennya dari indeks yang sama, modul itu harus mengimpornya langsung dari file komponen.

Saya mengalami masalah ini, dan ketika saya mengubah dari mengimpor komponen dalam file modul menggunakan indeks untuk mengimpornya menggunakan file langsung, ini teratasi.

mis. diubah:

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

untuk:

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

hapus juga ekspor yang sekarang tidak perlu dari indeks Anda, misalnya:

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

untuk:

export { MainNavModule } from './MainNavModule';

Alasan lain mungkin karena beberapa kode seperti ini:

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

Karena ekspor adalah larik kosong dan memiliki, sebelumnya, itu harus dihapus.

Saya memiliki masalah yang sama, saya menambahkan komponen di index.ts dari a = folder dan melakukan ekspor. Masih kesalahan yang tidak ditentukan muncul. Tapi IDE memunculkan garis merah berlekuk-lekuk kami

Kemudian seperti yang disarankan berubah dari

import { SearchComponent } from './';

untuk

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

Saya memperbaikinya dengan menghapus semua file ekspor indeks, termasuk pipa, layanan. maka semua jalur impor file adalah jalur tertentu. misalnya.

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

menggantikan

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

selain itu, jangan ekspor kelas default.

Masalah saya adalah nama komponen yang salah eja di dalam component.ts.

Pernyataan impor tidak menunjukkan kesalahan tetapi deklarasi menunjukkan, yang menyesatkan saya.

Argumen " private http: Http " yang tidak terpakai dalam konstruktor app.component.ts telah menyebabkan kesalahan yang sama kepada saya dan diselesaikan setelah menghapus argumen konstruktor yang tidak digunakan

Kemungkinan besar kesalahan tersebut terkait dengan file AppModule.ts.

Untuk mengatasi masalah ini, periksa apakah setiap komponen dideklarasikan dan setiap layanan yang kami deklarasikan diletakkan di penyedia, dll.

Dan bahkan jika semuanya tampak benar di file AppModule dan Anda masih mendapatkan kesalahan, maka hentikan instance sudut yang sedang berjalan dan mulai ulang sekali lagi. Itu dapat menyelesaikan masalah Anda jika semua yang ada di file modul benar dan jika Anda masih mendapatkan kesalahan.

Bagi saya, masalahnya diselesaikan dengan mengubah urutan impor:

Satu dengan saya mendapat kesalahan:

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

Mengubah ini menjadi:

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

Solusi di atas tidak berhasil untuk saya.

Jadi saya mendukung versi angular-cli 1.6.4 untuk 1.4.4 dan ini menyelesaikan masalah saya.

Saya tidak tahu apakah ini solusi terbaik, tetapi untuk saat ini, ini berhasil untuk saya

Saya menghadapi masalah yang sama. Masalahnya adalah saya mengimpor beberapa kelas dari index.ts

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

index.ts berisi pernyataan ekspor

    export * from './models';

Saya mengubahnya ke file .ts yang berisi objek kelas yang sebenarnya

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

dan itu diselesaikan.

Bagi saya, kesalahan ini disebabkan oleh impor yang tidak digunakan:

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

Kesalahan yang dihasilkan:

Input dideklarasikan, tetapi nilainya tidak pernah dibaca

Beri komentar, dan kesalahan tidak terjadi:

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

Saya menemui masalah ini pada situasi: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

karena hanya ada a root.