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

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

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.vmdk.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: 모듈 A:imports[ModuleB]

B: 모듈 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 './';

이것은 효과가 있었고 저에게 빨간 줄을 줄 수 없었고 심지어는 당신이 그것을 입력하기 시작할 때 앱 구성요소를 불러오기도 했습니다.하지만 그것이 이 오류를 일으킨 것이라는 것을 알게 되었습니다.다음으로 변경한 후:

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

오류가 사라졌습니다.

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

import { YOUR_COMPONENT } from './';

하지만 그래야 합니다.

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

두 모듈의 순환 종속성에 대한 이 문제

1: 2 - Import Module 2 - Import Module 2
2: Module 1 - Import Module 2: Import Module 2: Import Module 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.

알고 보니 저도 지능에 현혹되어 있었습니다.몇 개의 모듈에 대해 자매 모듈을 가져왔습니다.

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 works 내부에 넣는 것만으로도: 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에 대한 순환 의존성과 같은 문제에 부딪혔습니다.하나의 모듈이 선언되는 방식을 변경했을 뿐입니다.

....

@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')
    ],
....

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

나의 문제는 인덱스에서 두 번 수출하는 것이었습니다.

그들 중 하나를 제거한 것이 문제를 해결했습니다.

이 문제가 있었습니다. 콘솔의 오류가 설명이 되지 않는 것은 사실입니다.그러나 각도-cli 출력을 보면 다음과 같습니다.

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

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

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

당신이 잘못한 것이 없다고 확신하는 한, "ng serve"를 종료하고 다시 시작하십시오.그렇게 함으로써 컴파일러는 모든 작업을 수행하고 앱은 예상대로 작동합니다.모듈에 대한 이전의 경험은 "ng serve"가 실행되지 않을 때 모듈을 생성하거나 완료되면 터미널을 다시 시작하는 방법을 가르쳐 주었습니다.

"ng serve"를 다시 시작하면 다른 구성 요소로 새 구성 요소를 내보낼 때도 작동합니다. 컴파일러가 당신의 새 구성 요소를 인식하지 못했을 수 있습니다. 단순히 "ng serve"를 다시 시작하십시오.

몇 분 전까지만 해도 효과가 있었습니다.

제에는 ngrx를 .provideMockStore()테스트 모듈의 '슬립' 배열이 아닌 '슬립' 배열로 변환합니다.

저는 가져오기 순서를 변경하여 문제를 해결했습니다.

하나는 오류가 발생했습니다.

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

다음으로 변경:

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

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

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

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

그러나 '/app-routing.module' 파일이 지정된 경로에 없습니다.

제가 이 가져오기를 제거했고 오류가 사라졌습니다.

저도 같은 오류가 있었습니다. 위의 팁 중 어떤 것도 도움이 되지 않았습니다.

제 경우에는 웹스톰이 두 개의 가져오기를 하나로 결합하여 발생했습니다.

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

내보내기가 빈 배열이고 이 배열 앞에 있기 때문에 이를 제거해야 합니다.

저도 같은 문제가 있어서 폴더의 a=의 index.ts에 구성요소를 추가하고 내보내기를 했습니다.여전히 정의되지 않은 오류가 터지고 있었습니다.하지만 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: app.component.ts의 생성자에 있는 Http" 인수가 동일한 오류를 일으켰고 생성자의 사용되지 않는 인수를 제거할 때 해결되었습니다.

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

이 문제를 해결하려면 모든 구성 요소가 선언되어 있는지, 선언된 모든 서비스가 공급업체 등에 포함되어 있는지 확인합니다.

AppModule 파일에 모든 것이 올바르게 표시되고 오류가 계속 발생하더라도 실행 중인 Angular 인스턴스를 중지하고 다시 시작하십시오.모듈 파일의 모든 내용이 올바르고 오류가 계속 발생하는 경우 문제가 해결될 수 있습니다.

위의 솔루션은 저에게 적합하지 않습니다.

그래서 저는 1.6.4의 angular-cli 버전을 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';

언급URL : https://stackoverflow.com/questions/39265561/error-unexpected-value-undefined-imported-by-the-module