ข้อผิดพลาด: ค่าที่ไม่คาดคิด "ไม่ได้กำหนด" ที่นำเข้าโดยโมดูล

ฉันได้รับข้อผิดพลาดนี้หลังจากย้ายไปที่ NgModule ข้อผิดพลาดไม่ได้ช่วยอะไรมากเกินไปโปรดขอคำแนะนำ

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

สำหรับทุกคนที่พบข้อผิดพลาดเดียวกันนี้สถานการณ์ของฉันคือฉันมีเครื่องหมายจุลภาคสองครั้งในส่วนการนำเข้า

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

ตรวจสอบให้แน่ใจว่าโมดูลไม่นำเข้าซึ่งกันและกัน ดังนั้นไม่ควรมี

ในโมดูล A: imports[ModuleB]

ในโมดูล B: imports[ModuleA]

ซึ่งอาจเกิดจากหลายสถานการณ์เช่น

1. ไม่มีเครื่องหมายจุลภาค

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

2. จุลภาคคู่

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

3. การเอ็กซ์พอร์ตอะไรจากโมดูล
4. ข้อผิดพลาดทางไวยากรณ์
5. ข้อผิดพลาดในการพิมพ์ผิด
6. อัฒภาคภายในออบเจ็กต์อาร์เรย์
7. ใบแจ้งการนำเข้าไม่ถูกต้อง

วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน แต่เพียงแค่หยุดและเรียกใช้ "ng serve" อีกครั้ง

ผมมีปัญหาเหมือนกัน. ในกรณีของฉันเหตุผลคือเครื่องหมายจุลภาคพิเศษ

ฉันมีข้อผิดพลาดนี้เนื่องจากฉันมีindex.tsไฟล์ในรูทของแอพที่กำลังส่งออกapp.component.tsไฟล์. ฉันเลยคิดว่าจะทำสิ่งต่อไปนี้ได้

import { AppComponent } from './';

สิ่งนี้ใช้งานได้และทำให้ฉันไม่มีเส้นสีแดง squiggly และแม้แต่ Intellisense ก็แสดง AppComponent เมื่อคุณเริ่มพิมพ์ แต่มาพบว่ามันทำให้เกิดข้อผิดพลาดนี้ หลังจากที่ฉันเปลี่ยนเป็น:

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

ข้อผิดพลาดหายไป

ตรวจสอบให้แน่ใจว่าคุณไม่ควรนำเข้าโมดูล / ส่วนประกอบเช่นนี้:

import { YOUR_COMPONENT } from './';

แต่มันควรจะเป็น

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

ปัญหาของการอ้างอิงแบบวงกลมของสองโมดูล

โมดูล 1: นำเข้าโมดูล 2
โมดูล 2: นำเข้าโมดูล 1

ฉันกำลังสร้างไลบรารีคอมโพเนนต์และเริ่มได้รับข้อผิดพลาดนี้ในแอพของฉันที่กำลังนำเข้าไลบรารีดังกล่าว เมื่อเรียกใช้ng build --prodหรือng serve --aotในแอปฉันจะได้รับ:

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

แต่ไม่มีข้อผิดพลาดเมื่อใช้ng serveหรือเมื่อทดสอบโมดูลในไลบรารีเองแม้ว่าจะสร้าง--prodขึ้นก็ตาม

ปรากฎว่าฉันเข้าใจผิดโดย Intellisense เช่นกัน สำหรับโมดูลบางส่วนของฉันฉันได้นำเข้าโมดูลน้องสาวเป็น

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

แทน

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

มันทำงานได้ดีในทุกงานสร้างยกเว้นที่ฉันอธิบายไว้

มันแย่มากที่จะปักหมุดลงและฉันโชคดีที่ไม่ได้ใช้เวลานานกว่าที่ทำ หวังว่านี่จะช่วยใครสักคน

มีข้อยกเว้นเหมือนกันเมื่อพยายามรวบรวมแอปพลิเคชัน Angular 5

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

ในกรณีของฉันมันกลับกลายเป็นว่ามันเป็นวงกลมพึ่งพาซึ่งผมพบได้โดยใช้เครื่องมือที่แมดจ์ พบไฟล์ที่มีการอ้างอิงแบบวงกลมโดยการเรียกใช้

npx madge --circular --extensions ts src/

คุณต้องลบบรรทัดออกimport { provide } from '@angular/core';จากapp.module.tsที่provideเลิกใช้แล้วในขณะนี้ คุณต้องใช้provideดังต่อไปนี้ในผู้ให้บริการ:

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
  ]

เพียงแค่ใส่ผู้ให้บริการไว้ใน 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 { }

มีอีกวิธีง่ายๆสำหรับสิ่งนี้ ฉันมี 2 โมดูลซึ่งลึกลงไปในโครงสร้างที่ใช้ซึ่งกันและกัน ฉันพบปัญหาเดียวกันกับการอ้างอิงแบบวงกลมกับ webpack และเชิงมุม 2 ฉันเพิ่งเปลี่ยนวิธีการประกาศโมดูลเดียว:

....

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

export = DppIncludeModule;

ตอนนี้ฉันใช้คำสั่ง imports กับคุณสมบัติ ngModule ฉันแค่ใช้:

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

ด้วยเหตุนี้ปัญหาทั้งหมดจะหมดไป

ปัญหาของฉันคือมีการส่งออกสองครั้งใน index.ts

การลบหนึ่งในนั้นช่วยแก้ปัญหาได้

ฉันมีปัญหานี้เป็นเรื่องจริงที่ข้อผิดพลาดบนคอนโซลไม่สามารถอธิบายได้ แต่ถ้าคุณดูที่เอาต์พุตเชิงมุม:

คุณจะเห็นคำเตือนชี้ไปที่การอ้างอิงแบบวงกลม

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

ดังนั้นวิธีแก้ปัญหาคือการลบการนำเข้าหนึ่งรายการจากโมดูลใดโมดูลหนึ่ง

ตราบเท่าที่คุณแน่ใจว่าคุณไม่ได้ทำอะไรผิดโปรดยุติ "ng serve" และเริ่มใหม่ การทำเช่นนั้นคอมไพเลอร์จะทำงานทั้งหมดและแอปจะทำหน้าที่ตามที่คาดไว้ ประสบการณ์ก่อนหน้ากับโมดูลได้สอนให้ฉันสร้างมันขึ้นมาเมื่อ "ng serve" ไม่ทำงานหรือให้รีสตาร์ทเทอร์มินัลเมื่อฉันทำเสร็จ

การรีสตาร์ท "ng serve" ยังใช้งานได้เมื่อคุณส่งส่วนประกอบใหม่ไปยังส่วนประกอบอื่นอาจเป็นไปได้ว่าคอมไพเลอร์ไม่รู้จักส่วนประกอบใหม่ของคุณเพียงรีสตาร์ท "ng serve"

สิ่งนี้ใช้ได้ผลกับฉันเมื่อไม่กี่นาทีที่ผ่านมา

ปัญหาคือมีการนำเข้าอย่างน้อยหนึ่งรายการที่ไฟล์ต้นฉบับหายไป

ตัวอย่างเช่นฉันได้รับข้อผิดพลาดเดียวกันเมื่อฉันใช้

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

แต่ไฟล์ "./app-routing.module" ไม่มีในเส้นทางที่กำหนด

ฉันลบการนำเข้านี้และข้อผิดพลาดหายไป

ฉันมีข้อผิดพลาดเดียวกันเคล็ดลับข้างต้นไม่ได้ช่วยอะไร

ในกรณีของฉันมันเกิดจาก WebStorm รวมสองการนำเข้าเป็นหนึ่งเดียว

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

ฉันแยกสิ่งนี้ออกเป็นการนำเข้าสองรายการแยกกัน

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

หลังจากนี้จะใช้งานได้โดยไม่มีข้อผิดพลาด

ในกรณีที่ดัชนีของคุณส่งออกโมดูล - โมดูลนั้นไม่ควรนำเข้าส่วนประกอบจากดัชนีเดียวกันควรนำเข้าจากไฟล์ส่วนประกอบโดยตรง

ฉันมีปัญหานี้และเมื่อฉันเปลี่ยนจากการนำเข้าส่วนประกอบในไฟล์โมดูลโดยใช้ดัชนีเป็นการนำเข้าโดยใช้ไฟล์โดยตรงสิ่งนี้จะได้รับการแก้ไข

เช่นเปลี่ยน:

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

ถึง:

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

ยังลบการส่งออกที่ไม่จำเป็นออกจากดัชนีของคุณในตอนนี้เช่น:

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

ถึง:

export { MainNavModule } from './MainNavModule';

อีกสาเหตุหนึ่งอาจเป็นรหัสเช่นนี้:

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

เนื่องจากการส่งออกเป็นอาร์เรย์ว่างและมีอยู่ก่อนหน้าจึงควรลบออก

ฉันมีปัญหาเดียวกันฉันเพิ่มส่วนประกอบในindex.tsของ a = ของโฟลเดอร์และทำการส่งออก ยังคงเกิดข้อผิดพลาดที่ไม่ได้กำหนด แต่ IDE ปรากฏเส้นสีแดงที่หยาบกร้านของเรา

จากนั้นตามที่แนะนำเปลี่ยนจาก

import { SearchComponent } from './';

ถึง

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

ฉันแก้ไขโดยลบไฟล์ส่งออกดัชนีทั้งหมดรวมไปป์บริการ เส้นทางการนำเข้าไฟล์ทั้งหมดเป็นเส้นทางเฉพาะ เช่น.

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

แทนที่

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

นอกจากนี้อย่าส่งออกคลาสเริ่มต้น

ปัญหาของฉันคือชื่อส่วนประกอบที่สะกดผิดในไฟล์ component.ts .

คำสั่งนำเข้าไม่ได้แสดงข้อผิดพลาด แต่มีการประกาศซึ่งทำให้ฉันเข้าใจผิด

อาร์กิวเมนต์ " http: Http " ที่ไม่ได้ใช้ในตัวสร้างของapp.component.tsทำให้ฉันเกิดข้อผิดพลาดเดียวกันและได้รับการแก้ไขเมื่อลบอาร์กิวเมนต์ที่ไม่ได้ใช้ของตัวสร้าง

ข้อผิดพลาดส่วนใหญ่อาจเกี่ยวข้องกับไฟล์ AppModule.ts

ในการแก้ปัญหานี้ให้ตรวจสอบว่ามีการประกาศทุกส่วนประกอบหรือไม่และทุกบริการที่เราประกาศนั้นใส่ไว้ในผู้ให้บริการ

และแม้ว่าทุกอย่างจะดูเหมือนถูกต้องในไฟล์ AppModule และคุณยังคงได้รับข้อผิดพลาดให้หยุดอินสแตนซ์เชิงมุมที่กำลังทำงานอยู่และรีสตาร์ทอีกครั้ง ซึ่งอาจช่วยแก้ปัญหาของคุณได้หากทุกอย่างในไฟล์โมดูลถูกต้องและหากคุณยังคงได้รับข้อผิดพลาด

สำหรับฉันปัญหาได้รับการแก้ไขโดยการเปลี่ยนลำดับการนำเข้า:

หนึ่งกับฉันได้รับข้อผิดพลาด:

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

เปลี่ยนสิ่งนี้เป็น:

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

วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน

ดังนั้นฉันจึงสำรองเวอร์ชันของ angular-cli ที่ 1.6.4 สำหรับ 1.4.4 และสิ่งนี้ช่วยแก้ปัญหาของฉันได้

ฉันไม่รู้ว่านี่เป็นทางออกที่ดีที่สุดหรือเปล่า แต่ตอนนี้มันใช้ได้ผลสำหรับฉัน

ฉันกำลังเผชิญกับปัญหาเดียวกัน ปัญหาคือฉันกำลังนำเข้าคลาสบางคลาสจาก index.ts

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

index.ts มีคำสั่งการส่งออก

    export * from './models';

ฉันเปลี่ยนเป็นไฟล์. ts ซึ่งมีวัตถุคลาสจริง

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

และได้รับการแก้ไข

สำหรับฉันข้อผิดพลาดนี้เกิดจากการนำเข้าที่ไม่ได้ใช้:

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

ข้อผิดพลาดที่เกิดขึ้น:

มีการประกาศอินพุต แต่ค่าไม่เคยอ่าน

แสดงความคิดเห็นและข้อผิดพลาดจะไม่เกิดขึ้น:

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

ฉันพบปัญหานี้ในสถานการณ์: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

เพราะมีเพียงไฟล์root.