오류 : 모듈에서 예기치 않은 값 '정의되지 않음'을 가져 왔습니다.

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

이것은 효과가 있었고 빨간 구불 구불 한 선을주지 않았고 입력을 시작하면 intellisense가 AppComponent를 표시합니다. 그러나 그것이이 오류의 원인임을 알아보십시오. 내가 그것을 다음으로 변경 한 후 :

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

오류가 사라졌습니다.

다음과 같은 모듈 / 구성 요소를 가져 오지 않아야합니다.

import { YOUR_COMPONENT } from './';

그러나 그것은

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

두 모듈의 순환 종속성 문제

모듈 1 : import 모듈 2
모듈 2 : import 모듈 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.NET에서 빌드 할 때도 라이브러리 자체에서 모듈을 사용 하거나 테스트 할 때 오류가 없습니다 --prod.

나는 또한 지능에 의해 오도되었다. 내 모듈 중 일부에 대해 자매 모듈을 다음과 같이 가져 왔습니다.

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

대신에

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

내가 설명한 것을 제외한 모든 빌드에서 잘 작동했습니다.

이것은 고정하기 끔찍했고 그보다 더 오래 걸리지 않은 것은 운이 좋았습니다. 이것이 누군가를 돕기를 바랍니다.

Angular 5 응용 프로그램을 컴파일하려고 할 때 동일한 예외가 발생했습니다.

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

제 경우에는 madge 도구를 사용하여 찾은 순환 종속성 이었습니다 . 다음을 실행하여 순환 종속성이 포함 된 파일을 찾았습니다.

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과 angular 2의 순환 의존성에서 같은 문제에 부딪 혔습니다. 하나의 모듈이 선언되는 방식을 간단히 변경했습니다.

....

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

export = DppIncludeModule;

이제 ngModule 속성에서 imports 문을 사용할 때 간단히 다음을 사용합니다.

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

이것으로 모든 문제가 사라졌습니다.

내 문제는 index.ts에서 두 번 내보내기가 발생했습니다.

그중 하나를 제거하면 문제가 해결되었습니다.

나는이 문제가 있었지만 콘솔의 오류가 설명 적이 지 않은 것은 사실입니다. 그러나 angular-cli 출력을 보면 :

순환 종속성을 가리키는 경고가 표시됩니다.

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

따라서 해결책은 모듈 중 하나에서 하나의 가져 오기를 제거하는 것입니다.

문제는 소스 파일이 누락 된 가져 오기가 하나 이상 있다는 것입니다.

예를 들어 내가 사용할 때 동일한 오류가 발생했습니다.

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

exports는 빈 배열이고를 가지고 있기 때문에 제거해야합니다.

동일한 문제가 발생하여 index.ts에 구성 요소를 추가했습니다. 하여 a = of 폴더 에 내보내기를 수행했습니다. 여전히 정의되지 않은 오류가 발생했습니다. 하지만 IDE는 빨간색 구불 구불 한 선을 표시합니다.

그런 다음 제안 된대로 변경

import { SearchComponent } from './';

에

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

잘못하고 있지 않다는 것이 확실하다면 "ng serve"를 종료하고 다시 시작하십시오. 이렇게하면 컴파일러가 모든 작업을 수행하고 앱이 예상대로 작동합니다. 모듈에 대한 이전 경험을 통해 "ng serve"가 실행되지 않을 때 모듈을 생성하거나 완료되면 터미널을 다시 시작하도록 배웠습니다.

"ng serve"를 다시 시작하는 것은 새 구성 요소를 다른 구성 요소에 내보낼 때도 작동합니다. 컴파일러가 새 구성 요소를 인식하지 못했을 수 있습니다. "ng serve"를 다시 시작하면됩니다.

이것은 불과 몇 분 전에 나를 위해 일했습니다.

모든 색인 내보내기 파일을 삭제하고 파이프, 서비스를 포함하여 수정합니다. 모든 파일 가져 오기 경로는 특정 경로입니다. 예.

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

바꾸다

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

게다가 기본 클래스를 내 보내지 마십시오.

내 문제는 component.ts.

import 문에 오류가 표시되지 않았지만 선언이 표시되어 잘못되었습니다.

app.component.ts 의 생성자에서 사용되지 않은 " private http : Http "인수로 인해 동일한 오류가 발생 했으며 생성자의 사용하지 않는 인수를 제거하면 해결되었습니다.

대부분의 경우 오류는 AppModule.ts 파일과 관련이 있습니다.

이 문제를 해결하려면 모든 구성 요소가 선언되어 있고 우리가 선언하는 모든 서비스가 공급자 등에 포함되어 있는지 확인하십시오.

AppModule 파일에 모든 것이 올바르게 표시되고 여전히 오류가 발생하더라도 실행중인 앵귤러 인스턴스를 중지하고 다시 한 번 다시 시작하십시오. 모듈 파일의 모든 것이 올 바르고 여전히 오류가 발생하면 문제가 해결 될 수 있습니다.

나에게 문제는 가져 오기 순서를 변경하여 해결되었습니다.

하나는 오류가 있습니다.

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

이것을 다음으로 변경했습니다.

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

위의 솔루션은 저에게 효과적이지 않습니다.

그래서 1.4.4에 대해 1.6.4의 angular-cli 버전을 백업했고 이것은 내 문제를 해결했습니다.

이것이 최선의 해결책인지 모르겠지만 지금은 이것이 저에게 효과적이었습니다.

나는 같은 문제에 직면했다. 문제는 index.ts에서 일부 클래스를 가져오고 있다는 것입니다.

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

index.ts에는 export 문이 포함됩니다.

    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.