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


99

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

3
Saya mengalami masalah ini ketika saya memiliki dua modul yang saling mengimpor
Matthew Hegarty

Saya memiliki masalah yang sama, memulai ulang editor membantu. Itu tidak mengenali file yang baru ditambahkan.
Jyotirmaya Prusty

6
Siapa lagi yang mengira kesalahan seperti ini harus saya lebih jelaskan?
Pramesh Bajracharya

saya mendapat kesalahan ini karena saya memiliki entri kosong di array impor:, ,
wutzebaer

Jawaban:


218

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

1
Saya memiliki koma di awal misalnya. [, BrowserModule
ozOli

1
Itu adalah titik (.) Bagi saya
Raghuram

1
Memecahkan masalah untuk saya juga!
michaeak

82

Pastikan modul tidak saling mengimpor. Jadi, seharusnya tidak ada

Di Modul A: imports[ModuleB]

Di Modul B: imports[ModuleA]


59

Ini dapat disebabkan oleh beberapa skenario seperti

  1. Koma tidak ada
imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],
  1. Koma Ganda
imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],
  1. Mengekspor Tidak Ada dari Modul
  2. Kesalahan sintaks
  3. Kesalahan Ketik
  4. Titik koma di dalam Objek, Array
  5. Pernyataan impor salah

3
Ringkasan yang bagus. Akan lebih bagus jika Angular dapat memasukkan beberapa info tentang di mana dan dengan cara apa pemuatan modul gagal. Seperti yang ada saat ini, ini adalah salah satu hal paling membosankan untuk di-debug. Tidak yakin apakah saya memahami bit "koma yang hilang", itu harus dikompilasi dengan baik?
unitario

Saya mengerti hilang koma bagian- checkout app.module.ts file - impor :, penyedia :, deklarasi ... dll set array - Dalam daftar nilai string yang disebutkan, pastikan koma EXTRA atau hilang ... Saya menyelesaikan ini dengan menghapus koma ekstra! @Ignatius Andrew ... Anda adalah TUHAN! Angular 2/4 cukup unik!
HydTechie

32

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


5
Haha ya, untukku juga. Saat Anda mengotak-atik perutean, terkadang Angular perlu restart. Hal yang sama dengan memindahkan impor atau ekspor inti penting antar modul Anda.
Florian Leitgeb

masalah khas, dalam beberapa situasi. Tim sudut harus mengerjakan itu.
Dimitris Voudrias

Sama untuk ku. Angular harus menangani masalah ini. Membuang waktu saya: /
Lint

Bagi saya, itucircular dependency
Vishal Suthar


23

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.


1
Saya pikir yang juga berhasil adalah ketika Anda secara eksplisit akan menulis './index'. Kami mengalami masalah ini dalam kombinasi dengan AoT dan ng-packagr.
bersling

8

Pastikan Anda tidak mengimpor modul / komponen seperti ini:

import { YOUR_COMPONENT } from './';

Tapi seharusnya begitu

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

8

Masalah ketergantungan melingkar dari dua modul

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


5

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.


Itu dia xD Apakah Anda tahu secara kebetulan cara mengkonfigurasi Intellisense agar tidak salah memilih versi?
pengguna2035039

Maaf, saya tidak.
Nayfin

4

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/

3

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
  ]

yang masuk akal, saya telah melakukannya tetapi kesalahannya masih sama
surfealokesea

3

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

3

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.


Dapatkah Anda menjelaskan lebih detail cara kerjanya? Misalnya, bagaimana Anda menggunakan DppIncludeModule di komponen Anda?
Kate S

Kate, maaf atas jawaban yang terlambat. Saya tidak menggunakan modul dalam komponen, saya merangkum komponen dalam modul. Modul digunakan bersama. Mungkin Anda memiliki masalah lain di sini dengan kesalahan yang tidak ditentukan.
Michael Baarz

3

Masalah saya adalah mengekspor dua kali di index.ts

Menghapus salah satu dari mereka memecahkan masalah.


Astaga, ini berhasil untukku! Jika Anda mengekspor modul Anda dari index.ts & modul Anda mengimpor komponen modul dari index.ts yang sama, ini tampaknya menyebabkan pemuatan melingkar. Anda harus mengimpor ke modul Anda langsung dari file komponen bukan dari indeks. TNX
Tomas Katz

Tembakan masalah. Tidak dapat membayangkan berapa lama waktu yang saya
butuhkan

3

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.


Bagaimana jika saya membutuhkan ketergantungan melingkar itu?
Evan Sevy

@RuneStar Saya rasa Anda perlu memindahkan ketergantungan ke modul tingkat yang lebih tinggi dan kemudian mengimpor modul baru pada kedua modul (X).
T04435

3

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.


tahu, mengapa tidak bisa mengenali komponen baru?
radio_head

2

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.


2

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.


Terimakasih kawan. Itu membantu
DinoMyte

duplikat dari jawaban sebelumnya: stackoverflow.com/a/49667611/1243048
Maelig

@Maelig Saya pikir dalam jawaban terkait itu adalah masalah yang sedikit berbeda. Saya tidak tahu apakah itu salah ketik tetapi ada masalah juga dengan dir yang benar, satu kali dan ./modelslain kali./model
Jakub Rybiński

1

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

Terima kasih itu masalah saya, IDE mengimpor dari folder ex: '/ components' perpustakaan saya dibuat tanpa masalah tetapi tidak dapat digunakan di perpustakaan lain
Mosta

1

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.


1

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

0

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.


Tapi bagaimana itu bisa membantu? Menghapus nama file mengambil index.ts dari folder yang Anda tetapkan.
Michael Baarz

@MichaelBaarz pada saat itu, buka kembali file indeks membantu saya menyelesaikan masalah. tapi sekarang, saya mengupgrade ng versi ke 2.4.9, masalah itu tidak ada, artinya, saya bisa menggunakan referensi ekspor file index.ts. jadi saya pikir itu mungkin masalah dengan ng build
wfsovereign

Setidaknya ini adalah kasus tepi dan hasil dari struktur paket yang buruk. Paket tidak boleh pulang pergi. Mengklarifikasi struktur paket akan memperbaikinya.
Michael Baarz

@MichaelBaarz ya, saya setuju dengan Anda.
wfsovereign

0

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

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


0

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


0

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.


0

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

1
Tidak terkait dengan masalah, karena BrowserModule mengekspor CommonModule sehingga keduanya redundan.
Semir Deljić

0

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


0

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.


0

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.