エラー：予期しない値 'undefined'がモジュールによってインポートされました

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

これは機能し、赤い波線が表示されませんでした。入力を開始すると、インテリセンスでさえAppComponentを表示します。しかし、それがこのエラーの原因であることを確認してください。私がそれを次のように変更した後：

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

エラーはなくなりました。

次のようにモジュール/コンポーネントをインポートしないでください。

import { YOUR_COMPONENT } from './';

しかし、それは

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

2つのモジュールの循環依存関係のこの問題

モジュール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た場合でも、ライブラリ自体のモジュールを使用またはテストするときにエラーは発生しません。

私もインテリセンスに惑わされました。私のモジュールのいくつかについて、姉妹モジュールを

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の循環依存関係で同じ問題が発生しました。1つのモジュールの宣言方法を変更しただけです。

....

@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で2回エクスポートすることでした

それらの1つを削除すると、問題が解決しました。

私はこの問題を抱えていましたが、コンソールのエラーは説明的なものではありません。しかし、angular-cliの出力を見ると：

循環依存関係を指す警告が表示されます

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

したがって、解決策は、モジュールの1つから1つのインポートを削除することです。

問題は、ソースファイルが欠落しているインポートが少なくとも1つ存在することです。

たとえば、私が使用していたときに同じエラーが発生しました

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

しかし、ファイル './app-routing.module'が指定されたパスにありませんでした。

このインポートを削除したところ、エラーはなくなりました。

同じエラーが発生しましたが、上記のヒントのいずれも役に立ちませんでした。

私の場合、それは2つのインポートを1つに結合したWebStormが原因でした。

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

これを2つの個別のインポートに抽出しました

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は空の配列であり、があるため、その前に削除する必要があります。

同じ問題があり、a = ofのindex.tsにコンポーネントを追加してエクスポートしました。それでも未定義のエラーが発生していました。しかし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のコンストラクターで未使用の「プライベートhttp：Http」引数が原因で同じエラーが発生し、コンストラクターの未使用の引数を削除すると解決しました

ほとんどの場合、エラーはAppModule.tsファイルに関連しています。

この問題を解決するには、すべてのコンポーネントが宣言され、宣言したすべてのサービスがプロバイダーなどに配置されているかどうかを確認します。

そして、AppModuleファイルのすべてが正しいように見えてもエラーが発生する場合でも、実行中のAngularインスタンスを停止して、もう一度再起動してください。モジュールファイル内のすべてが正しく、エラーが引き続き発生する場合は、問題が解決する可能性があります。

私にとって問題はインポートシーケンスを変更することで解決されました：

私と一緒にエラーが発生しました：

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です。