web-dev-qa-db-ja.com

Angular 2：NgModuleメタデータが見つかりません

私はAngular 2を初めて使用し、見つけたビデオチュートリアルをフォローしようとしています。すべての手順を実行したにもかかわらず、Angularは機能しません。次のエラーが表示されます。

compiler.umd.js:13854 Uncaught Error: No NgModule metadata found for 'App'.

コンポーネントはまったく読み込まれません。

私のファイルは次のとおりです。

package.json：

{
  "name": "retain",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack --config webpack.spec.ts --progress --color && karma start",
    "start": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base src"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "core-js": "2.4.1",
    "lodash": "4.16.1",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.25"
  },
  "devDependencies": {
    "@types/core-js": "0.9.33",
    "@types/lodash": "4.14.35",
    "@types/node": "6.0.39",
    "awesome-TypeScript-loader": "2.2.4",
    "css-loader": "0.23.1",
    "jasmine-core": "2.4.1",
    "karma": "1.1.1",
    "karma-chrome-launcher": "1.0.1",
    "karma-jasmine": "1.0.2",
    "karma-mocha-reporter": "2.0.4",
    "raw-loader": "0.5.1",
    "to-string-loader": "1.1.4",
    "ts-helpers": "1.1.1",
    "TypeScript": "2.0.2",
    "webpack": "1.13.1",
    "webpack-dev-server": "1.14.1"
  }
}

index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Retain</title>
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <link href="global.css" rel="stylesheet">
    <base href="/">
  </head>
  <body>

    <app>
      ... before angular loads.
    </app>

    <script src="polyfills.bundle.js"></script>
    <script src="vendor.bundle.js"></script>
    <script src="main.bundle.js"></script>

  </body>
</html>

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 

import { App } from './app/app';

const platform = platformBrowserDynamic();
platform.bootstrapModule(App);

platformBrowserDynamic().bootstrapModule(AppModule);

app.ts：

import { Component } from '@angular/core';
import { NgModule }      from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <div>
      <h3>
        Yo, world!
      </h3>
    </div>
    `
})

export class App {}

app.module.ts：

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { App } from './app'; 

@NgModule({ 
  imports: [BrowserModule], 
  declarations: [App], 
  bootstrap: [App] 
}) 

export class AppModule{};

御時間ありがとうございます。

angulartypescriptwebpack
51
B B

問題はmain.tsファイルにあります。

const platform = platformBrowserDynamic();
platform.bootstrapModule(App);

bootstrap Appを試みていますが、これは実際のモジュールではありません。これらの2行を削除して、次の行に置き換えます。

platformBrowserDynamic().bootstrapModule(AppModule);

エラーが修正されます。

29
Alexander Ciesielski

上記の回答が示唆するすべてのものを用意していても、このエラーが発生しました。 app.module.tsファイルの簡単な編集（ブラケットを削除して元に戻すなど）がうまくいきました。

68
Alf Moh

Node_modules rm -rf node_modulesおよびpackage-lock.json rm -rf package-lock.jsonを削除してから、npm installを実行してください。

24
Thomas Gotwig

Angular 6にアップグレードした後、angular-bootstrap-mdパッケージで"ERROR in No NgModule metadata found for 'AppModule'."に遭遇しました。これには、次のようにtsconfig.json "include"が必要です。

"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

数日間のトラブルシューティングとヘアプルの後、解決策は、app.module.tsが最初に「src/**/*。ts」の下に配置されるようにリストを配置することでした。 Angularバグ、おそらく？

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

この投稿のすべてを試しましたが、何も役に立たなかったため、これが誰かの助けになることを心から願っています。この変更後、すべてがコンパイルされ、期待どおりに動作します。

22
Bahri Gungor

この問題は、angular/cliを手動で再インストールした場合にのみ修正されます。以下の手順に従ってください。 （Angular project dirの下ですべてのコマンドを実行します）

1）次のコマンドを使用してwebpackを削除します。

npm remove webpack

2）次のコマンドを使用してcliをインストールします。

npm install --save-dev @angular/cli@latest

アプリを正常にテストした後、動作します:)

そうでない場合は、以下の手順に従ってください。

1）node_moduleフォルダーを削除します。

2）次のコマンドを使用してキャッシュをクリアします。

npm cache clean --force

3）次のコマンドを使用して、ノードパッケージをインストールします。

npm install

4）次のコマンドを使用して、angular @ cliをインストールします。

npm install --save-dev @angular/cli@latest

注：失敗した場合は、もう一度試してください:)

5）祝う:)

8
Kapil Thakkar

このエラーが発生する理由は他にもあります。これは、アプリケーションが期待どおりにビルドできなかったことを意味します。

以下を確認してください。

  • Node_modulesのバージョンが変更されていないかどうかを確認してください。これが主な理由です。
  • 他のBuildツールからwebpackに移動する場合、たとえばSystemjsからWebpackに移動する場合、依存関係の一部がモジュラーではない場合、このエラーが発生する可能性がありますので、それも確認してください。
  • フレームワークの廃止された機能を確認します。例："HTTP_PROVIDERS" in angular 2およびそれらを削除します。
  • アップグレードする場合は、フレームワークの現在の構文に従っていることを確認してください。例：routing構文はAngular2で変更されました。
  • ブートストラッププロセスを確認し、正しいモジュールをロードしていることを確認してください。
3
Ignatius Andrew

遅い答えですが、これは誰かを助けるかもしれません。同じエラーが発生し、前述のすべての提案を試し、壁に頭を打ちましたが、何も機能しませんでした。

注意深く観察すると、app.module.tsで次のことがわかりました。

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, // Redundant comma 
  CoreModule
];

だから私はもう少し頭を打ちました。軽度の警​​告として、WebStormによって非常に無邪気に強調された余分なコンマは、空のスロットを配列に挿入することで大混乱を引き起こしました。 elision trap;）に気を付けろ

3
rohit-biswas

私は同じ問題を抱えていて、上記のすべての答えを読んだ後も解決できませんでした。それから、宣言に余分なコンマが問題を引き起こしていることに気付きました。削除し、問題を解決しました。

@NgModule({
    imports: [
        PagesRoutingModule,
        ThemeModule,
        DashboardModule,
    ],
    declarations: [
        ...PAGES_COMPONENTS,
        **,**
    ],
})
2
Aman Jain Hingerh

main.tsでは、AppModule and Appの両方をブートストラップしています。 AppModuleだけにして、Appをブートストラップします。

Main.tsとドキュメントを比較すると、違いがわかります。main.tsからAppへのすべての参照を削除するだけです。

2
nickspoon

Angular 5では、1.5.5から@angular/cli 1.6.1にアップグレードすることで同様の問題を解決しました。

"devDependencies": {
  "@angular/cli": "1.6.1"
}

ng serve中に私が得たエラーは：

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/path/to/project/app/node_modules/@angular/compiler/bundles/compiler.umd.js:20247:23)
2
DJDaveMark

それが役立つことを願っています。私の場合、私は遅延読み込みモジュールを使用していますが、この間違いがERROR in No NgModule metadata found for 'MyModule'.につながることに気付きました。

in app-routing.module.ts
{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' },

ng serve --aot chrome devツールを実行すると、Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

2
Kenneth Chan

私は最終的に解決策を見つけました。

  1. 次のコマンドを使用してwebpackを削除します。
npm remove webpack
  1. 次のコマンドを使用してcliをインストールします。
npm install --save-dev @angular/cli@latest

アプリを正常にテストした後、動作します:)

そうでない場合は、以下の手順に従ってください。

  1. Node_moduleフォルダーを削除します。
  2. 次のコマンドを使用してキャッシュをクリアします。
npm cache clean --force
  1. 次のコマンドを使用して、ノードパッケージをインストールします。
npm install
  1. 次のコマンドを使用して、angular @ cliをインストールします。
npm install --save-dev @angular/cli@latest

注：失敗した場合は、ステップ4を再試行してください。それが動作します。

1
lilhamad

Gitリポジトリからクローンを作成したときにこの問題が発生しました。新しいプロジェクトを作成し、古いプロジェクトからsrcフォルダーを再挿入すると解決しました。

Srcフォルダーは、angularアプリケーションをデプロイするときに必要な唯一のフォルダーですが、このソリューションを使用して開発環境を再構成する必要があります。

1
Louis Beullens

この問題は、Angular Cli 1.7.4で時々発生します。最初は

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null

これを修正すると、上記の問題が発生します。

Package-lock.jsonを削除しました

npm remove webpack

npm cache clean --force

Node_modulesフォルダーを削除することもできます。そして、キャッシュを消去します。再インストールangular cli：

npm install @angular/[email protected]

そして、すべてがインストールされたかどうかを確認するために、npm installを再度実行できます。

次に実行する

npm ls --depth 0

すべてのnode_modulesが互いに同期しているかどうかを確認するため。依存関係の不一致がある場合、これは私たちが理解する機会です。

最後に、npm start/ng serveを実行します。それはすべてを修正する必要があります。

これは、掘り下げる前に、cliで問題が発生した場合に従うコードのチートです。 95％の時間ですべての問題が修正されます。

それが役に立てば幸いです。

0
Siddhartha Thota

私の場合、この問題の原因は、Angularアプリと同じソースツリーおよびルートtsconfig.jsonのnode.jsアプリケーションを組み合わせたことであることがわかりました。 ：

"files": [ "./node_modules/@types/node/index.d.ts" ]

これを

"compilerOptions": { "types": ["node"] }

angularアプリでノードタイプが使用されないようにするには、これをtsconfig.app.jsonに追加します。

"compilerOptions": { "types": [] }

0
Tom Mettam

私は同じ問題を抱えていましたが、それらの解決策のどれも私にとってはうまくいきませんでした。さらに調査した結果、望ましくないインポートがコンポーネントの1つにあることがわかりました。

App.componentでsetTimeout関数を使用していますが、何らかの理由でVisual Studioがimport { setTimeout } from 'timer';を必要のない場所に追加しました。この行を削除すると、問題が修正されました。

したがって、先に進む前にインポートを確認することを忘れないでください。それが誰かを助けることを願っています。

0
KBell

私の場合、ユニバース全体が崩壊した後、ng updateを使用してangular 6プロジェクトをアップグレードしようとしました。

次のコマンドを使用してプロジェクトを更新しようとしていました。

  • ng update @ angular/cli
  • ng update @ angular/core
  • ng update @ angular/material

そして、rxjsパッケージで問題を発見し、このコマンドも実行します。 -npm install --save rxjs

そして、私はエラーを取得します

NgModuleメタデータが見つかりません

これを解決するには、プロジェクトルートのnode_modulesフォルダーを削除してから実行します。

  • npmインストール

それは、すべてが素晴らしい作品です。

0
George C.

ngModelディレクティブを有効にする必要があります。これを行うには、FormsModuleをAppModuleのimports []配列に追加します。

次に、app.module.tsファイルの@ angular/formsからインポートを追加する必要もあります。import {FormsModule} from '@ angular/forms';

0
Abdullah Sheikh