web-dev-qa-db-ja.com

モジュール 'AppModule'によって宣言された予期しない値 'undefined'

ここで何が間違っていますか？私はそれを機能させようとしていますが、ヘッダーにそのエラーが表示されます。 <router-outlet></router-outlet>をapp.component.htmlに含めましたが、これはapp.component.tsによって呼び出されるtemplateUrlですが、まだ運がありません。

app.module.ts：

import { NgModule }             from '@angular/core';
import { BrowserModule }        from '@angular/platform-browser';
import { FormsModule }          from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';


import { AppComponent }  from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TopnavComponent } from './components/navbars/topnav/topnav.component';
import { LeftnavComponent } from './components/navbars/leftnav/leftnav.component';
import { LeftnavsecondaryComponent } from './components/navbars/leftnav-secondary/leftnav-secondary.component';
import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

@NgModule({
    imports:    [ BrowserModule, FormsModule, AppRoutingModule ],
    declarations:   [ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ],
    bootstrap:  [ AppComponent ]
})

export class AppModule { }

app-routing.module.ts：

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

const appRoutes: Routes = [
  { path: 'worldofwacraft', component: WorldofwarcraftComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}
angularangular2-routing
59
Kyriakos Menelaou

私は同じエラーを受け取りました、時々この問題が発生し、ng serveまたは使用するCLIを使用してサーバーを再実行する必要があります here

111
Cyber Progs

私は同じエラーに直面し、その理由を発見しました。理由は、このような任意の配列（例：importsプロパティ）にある2つのコンマです。

@NgModule({
  imports: [
  CommonModule, FormsModule,,
]})
56
Mohammed Osman

これを試してみてください：
ng-serveサービスを停止して開始します。これでページがナビゲートできるようになりました。

7
Shankar Sha

これは、index.tsファイルの1つでエクスポートを繰り返したために発生しました。

4
Samuel

これは非常に迷惑で理解しにくいエラーです。 Araxis Mergeを使用してファイル比較を行ったところ、2つのプロジェクトのすべてのファイルが一見ほぼ同一であることがわかりました。しかし、さらなるレビューの後、ファイル構造のわずかな違いに気付きました（最初は本当に探していなかったので、構成の違いを探していました）。私の2番目のプロジェクトはtsファイルの1つからjsファイルを生成しました.

ご覧の通り、左側にjsファイルがあります。右側のプロジェクトにノードビルダーコンポーネントが表示され、エラーなしで実行されました。右側が問題の原因でした。

Extra unneeded file

WebpackはそのJavascriptファイルを取得し、パッケージ化しようとしました。明らかに、Webpackはtsバージョンを検出すると、それを重複したjsファイルにトランスコンパイルし、混乱を招く実行時例外を作成しました。

t {__zone_symbol__error: Error: Unexpected value 'undefined' declared by the 
module 'AppModule'
    at t.m (http://localhost:……}

ご覧のように、多くの投稿が私を信じさせたので、この問題は設定とは何の関係もありませんでした。上記のように、問題は構成に関係しているかもしれませんが、私の場合は関係ありませんでした。

3
jwize

これは私にも起こりました。@Componentでセレクターを書きました：all-employeesとapp.module.tsモジュールで<all- employees></all- employees>でした

0
Alexander Zaldostanov

私の場合、app.module.ts（Ionic 3）

providers: [
    , StatusBar
    , SplashScreen

変更後：

providers: [
     StatusBar
    , SplashScreen

そして動作します。

0
Reynaldo

これは 答え 再実行ng serveに似ていますが、アプリがIISで永続的に実行されているため、私の状況には関係ありませんでした。私の場合、ng build --watchでビルドしていましたが、それを停止して再実行すると問題は解決しました。インクリメンタルビルドのときに何かが正しくビルドされなかったと思いますが、フルビルドを行うことで問題は解決しました。

0
Tim

Angular 2でこれを経験し、同じ場所から何かをエクスポートする場合、インポートと相対パスに関係していることがわかります

たとえば、樽を使用する場合は、./を明示的に指定します

export * from './create-profile.component';

の代わりに

export * from 'create-profile.component';
0
Yidir

私の場合、クラス名は異なり、app.module.tsでエクスポートされた{name}の間にある名前は異なっていました

幸運を

0
DEEPAK