Lỗi: Giá trị không mong muốn 'không xác định' được nhập bởi mô-đun

Tôi gặp lỗi này sau khi chuyển sang NgModule, lỗi này không giúp ích được gì nhiều, bất kỳ lời khuyên nào xin vui lòng?

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

Đối với bất kỳ ai gặp phải lỗi tương tự này, tình huống của tôi là tôi có dấu phẩy kép trong phần nhập

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

Đảm bảo rằng các mô-đun không nhập lẫn nhau. Vì vậy, không nên có

Trong Mô-đun A: imports[ModuleB]

Trong Mô-đun B: imports[ModuleA]

Điều này có thể do nhiều trường hợp như

1. Thiếu dấu phẩy

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

2. Dấu phẩy kép

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

3. Xuất Không có gì từ Mô-đun
4. Lỗi cú pháp
5. Lỗi đánh máy
6. Dấu chấm phẩy bên trong Đối tượng, Mảng
7. Báo cáo nhập khẩu không chính xác

Không có giải pháp nào ở trên hiệu quả với tôi, mà chỉ cần dừng và chạy lại "ng phục vụ".

Tôi đã từng gặp vấn đề tương tự. Trong trường hợp của tôi, lý do là thêm một dấu phẩy.

Tôi gặp lỗi này vì tôi có một index.tstệp trong thư mục gốc của ứng dụng đang xuất của tôi app.component.ts. Vì vậy, tôi nghĩ tôi có thể làm như sau:

import { AppComponent } from './';

Điều này đã hoạt động và không mang lại cho tôi những dòng chữ nguệch ngoạc màu đỏ và thậm chí intellisense sẽ hiển thị AppComponent khi bạn bắt đầu nhập nó. Nhưng đến để tìm ra nó đã gây ra lỗi này. Sau khi tôi thay đổi nó thành:

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

Lỗi đã biến mất.

Đảm bảo rằng bạn không nên nhập một mô-đun / thành phần như thế này:

import { YOUR_COMPONENT } from './';

Nhưng nó phải là

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

Vấn đề phụ thuộc vòng tròn này của hai mô-đun

Mô-đun 1: nhập Mô-đun 2
Mô-đun 2: nhập Mô-đun 1

Tôi đang tạo thư viện thành phần và bắt đầu gặp lỗi này trong ứng dụng đang nhập thư viện nói trên của mình. Khi chạy ng build --prodhoặc ng serve --aottrong ứng dụng, tôi sẽ nhận được:

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

Nhưng không có lỗi khi sử dụng ng servehoặc khi kiểm tra các mô-đun trong chính thư viện ngay cả khi xây dựng trong --prod.

Hóa ra tôi cũng bị lừa bởi intellisense. Đối với một vài mô-đun của tôi, tôi đã nhập một mô-đun chị em dưới dạng

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

thay vì

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

Nó hoạt động tốt trong tất cả các bản dựng ngoại trừ bản mà tôi đã mô tả.

Điều này thật khủng khiếp để ghim xuống và tôi may mắn là tôi không mất nhiều thời gian hơn nó. Hy vọng điều này sẽ giúp ai đó.

Cũng có ngoại lệ tương tự khi cố gắng biên dịch ứng dụng Angular 5.

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

Trong trường hợp của tôi, hóa ra đó là một sự phụ thuộc vòng tròn mà tôi tìm thấy bằng cách sử dụng một công cụ madge . Tìm thấy các tệp chứa phụ thuộc vòng tròn bằng cách chạy

npx madge --circular --extensions ts src/

Bạn phải xóa dòng import { provide } from '@angular/core';khỏi app.module.tsvì providehiện không được dùng nữa. Bạn phải sử dụng providenhư bên dưới trong các nhà cung cấp:

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
  ]

Chỉ cần đặt nhà cung cấp bên trong forRoot hoạt động: 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 { }

có một giải pháp đơn giản khác cho việc này. Tôi có 2 mô-đun nằm sâu trong cấu trúc bằng cách nào đó sử dụng lẫn nhau. Tôi đã gặp phải vấn đề tương tự với các phụ thuộc vòng tròn với webpack và angle 2. Tôi chỉ đơn giản là thay đổi cách khai báo một mô-đun:

....

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

export = DppIncludeModule;

Khi tôi sử dụng câu lệnh import trên thuộc tính ngModule, tôi chỉ cần sử dụng:

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

Với điều này, tất cả các vấn đề đều không còn nữa.

Sự cố của tôi là xuất hai lần trong index.ts

Loại bỏ một trong số chúng đã giải quyết được vấn đề.

Tôi gặp sự cố này, đúng là lỗi trên bảng điều khiển không được mô tả. Nhưng nếu bạn nhìn vào đầu ra angle-cli:

Bạn sẽ thấy CẢNH BÁO, trỏ đến sự phụ thuộc vòng tròn

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

Vì vậy, giải pháp là xóa một lần nhập khỏi một trong các Mô-đun.

Vấn đề là có ít nhất một lần nhập mà tệp nguồn bị thiếu.

Ví dụ: tôi gặp lỗi tương tự khi sử dụng

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

Nhưng tệp './app-routing.module' không có ở đó trong đường dẫn nhất định.

Tôi đã xóa nhập này và lỗi đã biến mất.

Tôi đã gặp lỗi tương tự, không có mẹo nào ở trên không giúp được gì.

Trong trường hợp của tôi, đó là do WebStorm gây ra, kết hợp hai lần nhập thành một.

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

Tôi đã trích xuất điều này thành hai lần nhập riêng biệt

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

Sau đó, nó hoạt động mà không có lỗi.

Trong trường hợp chỉ mục của bạn xuất một mô-đun - Mô-đun đó không nên nhập các thành phần của nó từ cùng một chỉ mục, nó sẽ nhập chúng trực tiếp từ tệp thành phần.

Tôi gặp sự cố này và khi tôi thay đổi từ nhập các thành phần trong tệp mô-đun bằng chỉ mục sang nhập chúng bằng tệp trực tiếp, điều này đã giải quyết được.

ví dụ: đã thay đổi:

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

đến:

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

cũng xóa các xuất hiện không cần thiết khỏi chỉ mục của bạn, ví dụ:

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

đến:

export { MainNavModule } from './MainNavModule';

Một lý do khác có thể là một số mã như thế này:

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

Bởi vì xuất khẩu là mảng trống và nó có, trước khi nó, nó cần được loại bỏ.

Tôi gặp sự cố tương tự, tôi đã thêm thành phần trong index.ts của a = của thư mục và thực hiện xuất. Vẫn xuất hiện lỗi không xác định. Nhưng IDE bật ra bất kỳ dòng chữ nguệch ngoạc màu đỏ nào của chúng tôi

Sau đó, như đề xuất đã thay đổi từ

import { SearchComponent } from './';

đến

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

Miễn là bạn chắc chắn rằng mình không làm gì sai, vui lòng chấm dứt "ng phục vụ" và khởi động lại nó. Bằng cách đó, trình biên dịch thực hiện tất cả công việc của nó và ứng dụng sẽ phục vụ như mong đợi. Trải nghiệm trước đây với các mô-đun đã dạy tôi cách tạo chúng khi "ng serve" không chạy hoặc khởi động lại thiết bị đầu cuối sau khi tôi hoàn tất.

Khởi động lại "ng serve" cũng hoạt động khi bạn đang phát một thành phần mới cho một thành phần khác, có thể trình biên dịch đã không nhận ra thành phần mới của bạn, chỉ cần khởi động lại "ng phục vụ"

Điều này đã làm việc cho tôi chỉ một vài phút trước đây.

Tôi sửa nó bằng cách xóa tất cả tệp xuất chỉ mục, bao gồm đường ống, dịch vụ. thì tất cả đường dẫn nhập tệp là đường dẫn cụ thể. ví dụ.

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

thay thế

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

ngoài ra, không xuất lớp mặc định.

Vấn đề của tôi là tên thành phần sai chính tả bên trong component.ts.

Câu lệnh nhập không hiển thị lỗi nhưng khai báo thì có, điều này đã đánh lừa tôi.

Đối số " http: Http " riêng tư không được sử dụng trong hàm tạo của app.component.ts đã gây ra cho tôi lỗi tương tự và nó được giải quyết khi xóa đối số không sử dụng của hàm tạo

Hầu hết có thể lỗi sẽ liên quan đến tệp AppModule.ts.

Để giải quyết vấn đề này, hãy kiểm tra xem mọi thành phần đã được khai báo chưa và mọi dịch vụ mà chúng tôi khai báo có được đưa vào các nhà cung cấp hay không, v.v.

Và ngay cả khi mọi thứ có vẻ đúng trong tệp AppModule mà bạn vẫn gặp lỗi, thì hãy dừng phiên bản góc đang chạy của bạn và khởi động lại nó một lần nữa. Điều đó có thể giải quyết vấn đề của bạn nếu mọi thứ trong tệp mô-đun đều chính xác và nếu bạn vẫn gặp lỗi.

Đối với tôi, vấn đề đã được giải quyết bằng cách thay đổi trình tự nhập:

Một với tôi đã gặp lỗi:

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

Đã thay đổi cái này thành:

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

Các giải pháp trên không làm việc cho tôi.

Vì vậy, tôi đã quay lại phiên bản angle-cli 1.6.4 cho 1.4.4 và điều này đã giải quyết được vấn đề của tôi.

Tôi không biết liệu đây có phải là giải pháp tốt nhất hay không, nhưng hiện tại, điều này đã phù hợp với tôi

Tôi đã phải đối mặt với cùng một vấn đề. Vấn đề là tôi đang nhập một số lớp từ index.ts

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

index.ts chứa câu lệnh xuất

    export * from './models';

Tôi đã thay đổi nó thành tệp .ts chứa đối tượng lớp thực tế

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

và nó đã được giải quyết.

Đối với tôi, lỗi này chỉ do nhập không sử dụng:

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

Lỗi kết quả:

Đầu vào được khai báo, nhưng giá trị của nó không bao giờ được đọc

Nhận xét nó ra và lỗi không xảy ra:

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

Tôi đã gặp sự cố này trong tình huống: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

bởi vì chỉ có a root.