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

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

---

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 : 모듈 2 가져 오기 모듈
2 : 모듈 1 가져 오기

---

당신은 줄을 제거 할 필요가 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 { }

---

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

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

---

이것에 대한 또 다른 간단한 해결책이 있습니다. 나는 서로를 사용하여 어떻게 든 구조에 깊은 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')
    ],
....

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

---

구성 요소 라이브러리를 구축 중이며 해당 라이브러리를 가져 오는 내 앱에서이 오류가 발생하기 시작했습니다. 실행 중이 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';

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

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

---

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

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

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

이 후 오류없이 작동합니다.

---

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

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

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

npx madge --circular --extensions ts src/

---

색인이 모듈을 내보내는 경우-해당 모듈은 동일한 색인에서 구성 요소를 가져 오지 않아야하며 구성 요소 파일에서 직접 가져와야합니다.

이 문제가 있었는데 색인을 사용하여 모듈 파일의 구성 요소를 가져 오는 것에서 직접 파일을 사용하여 가져 오는 것으로 변경했을 때이 문제가 해결되었습니다.

예 : 변경됨 :

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

---

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

그런 다음 제안 된대로 변경

import { SearchComponent } from './';

...에

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

---

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

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

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

So the solution is to remove one import from one of the Modules.

---

As long as you are sure you are not doing anything wrong, kindly terminate "ng serve" and restart it. By so doing, the compiler does all of its work and the app serves as expected. Prior experiences with modules have taught me to either create them when "ng serve" is not running or to restart the terminal once I'm done.

Restarting "ng serve" also works when you're emitting a new component to another component, it's possible the compiler has not recognised your new component, simply restart "ng serve"

This worked for me just a few minutes ago.

---

I fix it by delete all index export file, include pipe, service. then all file import path is specific path. eg.

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

replace

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

besides, don't export default class.

---

My problem was a misspelled component name inside the component.ts.

The import statement didn't show an error but the declaration did, which misled me.

---

Unused "private http: Http" argument in the constructor of app.component.ts had caused me the same error and it resolved upon removing the unused argument of the constructor

---

Most probably the error will be related to the AppModule.ts file.

To solve this issue check whether every component is declared and every service that we declare is put in the providers etc.

And even if everything seems right in the AppModule file and you still get the error, then stop your running angular instance and restart it once again. That may solve your issue if everything in the module file is correct and if you are still getting the error.

---

For me the problem was solved by changing the import sequence :

One with I got the error :

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

Changed this to :

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

---

The Solutions above do not worked for me.

So I back the version of angular-cli of 1.6.4 for 1.4.4 and this solved my problem.

I do not know if this is the best solution, but for now, this worked for me

---

I was facing the same problem. Issue was that I was importing some class from index.ts

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

index.ts contain the export statement

    export * from './models';

I changed it to the .ts file which contain the actual class object

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

and it resolved.

---

For me, this error was caused by just unused import:

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

Resulting error:

Input is declared, but it's value never read

Comment it out, and error doesn't occur:

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

---

I met this problem at the situation: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

because there is only a root.

---

나를 위해 나는 CTRL+ C와 YES를했다 .
그리고 나는

ionic serve 

이것은 나를 위해 작동합니다.

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