Angular 2：未找到 NgModule 元数据答案

【问题标题】：Angular 2 : No NgModule metadata foundAngular 2：未找到 NgModule 元数据
【发布时间】：2017-02-02 18:07:01
【问题描述】：

我是 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{};

感谢您的宝贵时间。

【问题讨论】：

app.module.ts 文件在哪里？
抱歉，我现在已经添加了。
你在使用 angular-cli 吗？

标签： angular typescript webpack

【解决方案1】：

即使我拥有上述答案所建议的一切，我也遇到了这个错误。对app.module.ts 文件进行简单的编辑（例如删除括号并将其放回原处）就可以了。

【讨论】：

今天升级到 Angular 5.1.0 后对我来说同样有效
我只是打开 app.module.ts 文件，点击保存，然后它对我有用。 Angular 5.0.0 和 Angular cli 1.6.3 - 使用 vs 代码。
我正在使用 angular5.1.0。在 npm start 遇到 ngModule 问题之后。但这个技巧有效！谢谢
这解决了ng serve 错误但仍然ng build 给出了相同的错误并且不创建 dist 文件夹
对于ng build，可以试试ng build --prod --aot=false

【解决方案2】：

问题出在您的main.ts 文件中。

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

您正在尝试引导App，这不是一个真正的模块。删除这两行并替换为以下行：

platformBrowserDynamic().bootstrapModule(AppModule);

它会修复你的错误。

【讨论】：

这也行不通（注意我有 AppModule）：const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule); 只有在删除 const 并结合语句后它才能工作。
什么鬼，不单独声明const platform确实也解决了这里的问题。为什么这很重要？它是（在语法上应该 100% 相同......为什么来自 Angular/cli 的错误报告如此糟糕：/

【解决方案3】：

尝试删除 node_modules rm -rf node_modules 和 package-lock.json rm -rf package-lock.json, 之后运行npm install。

【讨论】：

我也是！我担心我必须从 Http 迁移到 HttpClient，因为我在任何帖子中读到（我知道我必须这样做，但现在它会杀了我），但这个解决方案运行良好。
我从 angular-cli 1.6.0 升级到 1.6.4。你的回答对我有用。谢谢
不必删除 package-lock.json，只需重新安装 node_modules 就可以了
我在更新到 Angular 9.1 后遇到了这个确切的问题 - 非常感谢，这解决了它

【解决方案4】：

升级到 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" ],

我真的希望这对某人有所帮助，因为我尝试了这篇文章中的所有内容，但没有任何帮助。进行此更改后，一切都按预期编译并运行良好。

【讨论】：

非常非常非常感谢。也许是 angular-bootstrap-md 的错误？
我的最佳答案。这不是 Angular Bootstrap MD 第一次为我搞砸了。
我不知道你怎么能确定这是问题所在......但感谢上帝你做到了......这里变得疯狂了。
这将被称为伟大的发现！你，程序员，是一个 Finder。
我在从 angular 5.x 升级到 angular 7.x 时遇到了这个问题，这个解决方案对我来说效果很好。

【解决方案5】：

该问题仅在手动重新安装 angular/cli 时得到解决。请按照以下步骤操作。（运行 Angular 项目目录下的所有命令）

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) 庆祝 :)

【讨论】：

投了赞成票。但是，如果您像我一样懒惰，我只需删除 node_module 文件夹并运行 npm install 即可解决问题。

【解决方案6】：

我建议重新启动应用程序。大多数案例编辑器将无法检测到延迟加载模块中的更改。

【讨论】：

谢谢，时间的救星！
欢迎@Takatalvi

【解决方案7】：

迟到的答案，但这可能会对某人有所帮助。我遇到了同样的错误，尝试了所有前面提到的建议，把我的头撞到墙上，但没有任何效果。

仔细观察，发现app.module.ts中有如下内容：

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

所以我又敲了敲头。 WebStorm 非常天真地突出显示了额外的逗号，作为一个温和的警告，通过在 Array 中插入一个空插槽造成了严重破坏。注意elision 陷阱；）

【讨论】：

【解决方案8】：

出现此错误的原因还有很多。这意味着您的应用程序未能按预期构建。

检查以下内容..

检查node_modules版本是否没有变化，这是主要原因。
如果您要从其他构建工具迁移到 webpack，例如 Systemjs 到 Webpack，如果你的某些依赖项不是模块化的自然你可能会收到这个错误，请检查一下。
检查框架的过时功能，例如："HTTP_PROVIDERS" 在角度 2 中并删除它们。
如果您正在升级，请确保您遵循当前的框架的语法，例如：routing 语法已在 Angular2..
检查引导过程并确保您正在加载正确的模块。

【讨论】：

“检查node_modules版本是否没有改变，这是主要原因”-请详细说明“如果您的某些依赖项本质上不是模块化的”-您能否详细说明一下？
问题是构建器使用 webpack "builder": "@angular-devkit/build-angular:dev-server",

【解决方案9】：

在您的 main.ts 中，您正在引导您的 AppModule 和您的应用程序。它应该只是 AppModule，然后引导应用程序。

如果您将 main.ts 与文档进行比较，您会发现差异 - 只需从 main.ts 中删除对 App 的所有引用

【讨论】：

【解决方案10】：

使用 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)

【讨论】：

【解决方案11】：

我遇到了同样的问题，在阅读了以上所有答案后无法解决。然后我注意到声明中的额外逗号造成了问题。删除它，问题解决了。

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

【讨论】：

【解决方案12】：

希望对您有所帮助。就我而言，我使用延迟加载模块，我发现这个错误导致 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 开发工具可以告诉我Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

【讨论】：

【解决方案13】：

如果您在 Angular 8 或 Angular 9 中遇到这个问题（就像我一样），那么之后：

清除 npm 缓存
重新安装所有 node_modules
检查您的“包含”和“文件”tsconfig 设置等

你仍然有问题，你是延迟加载模块检查你的angularCompilerOptions在你的tsconfig.json或tsconfig.app.json，并确保“strictMetadataEmit” 设置为 false 或被删除。

"angularCompilerOptions": {
    "preserveWhitespaces": false,
    "strictInjectionParameters": true,
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    // "strictMetadataEmit": true <-- remove this setting or set to false
},

该设置是为了帮助那些不应该内置延迟加载模块的库创建者。我之前（使用 Angular 7）将所有“严格”选项设置为 true...

【讨论】：

【解决方案14】：

我从 git 存储库克隆时遇到了这个问题，当我创建一个新项目并从旧项目重新插入 src 文件夹时，我已经解决了这个问题。

src 文件夹是部署 Angular 应用程序时唯一需要的文件夹，但您必须使用此解决方案重新配置开发环境。

【讨论】：

【解决方案15】：

您需要启用 ngModel 指令。这是通过将 FormsModule 添加到 AppModule 中的 imports[] 数组来完成的。

然后您还需要在 app.module.ts 文件中添加来自 @angular/forms 的导入：从“@angular/forms”导入 { FormsModule }；

【讨论】：

它解决了这个问题，但为什么呢？@Abdullah Sheikh

【解决方案16】：

我终于找到了解决办法。

使用以下命令删除 webpack。

npm remove webpack

使用以下命令安装 cli。

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

成功测试应用程序后，它将工作:)

如果没有，请按照以下步骤操作：

删除 node_module 文件夹。
使用以下命令清除缓存。

npm cache clean --force

使用以下命令安装节点包。

npm install

使用以下命令安装 angular@cli。

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

注意：如果失败，请再次尝试第 4 步。它会起作用的。

【讨论】：

【解决方案17】：

我刚刚遇到了与延迟加载模块相同的问题。原来是模块名不对。

检查所有模块的名称是否有可能的拼写错误。

【讨论】：

【解决方案18】：

我们有时在 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/cli@1.7.4

然后您可以再次执行 npm install，以确保所有内容都已安装。

然后运行

npm ls --depth 0

确保您的所有 node_modules 是否彼此同步。如果有任何依赖不匹配，这是我们找出的机会。

最后运行 npm start/ng serve。它应该可以解决所有问题。

这是我们在深入挖掘之前遇到任何 cli 问题时将遵循的作弊代码。 95% 的时间它可以解决所有问题。

希望对您有所帮助。

【讨论】：

【解决方案19】：

就我而言，在整个宇宙崩溃之后，我试图使用 ng update 升级我的 angular 6 项目。

我正在尝试使用以下命令更新我的项目：

ng 更新@angular/cli
ng 更新@angular/core
ng 更新@angular/material

然后我发现 rxjs 包有问题，我也运行了这个命令。 - npm install --save rxjs

然后我得到错误

未找到 NgModule 元数据

我通过删除项目根目录中的 node_modules 文件夹来解决此问题然后我运行：

npm 安装

也就是说，一切正常。

【讨论】：

【解决方案20】：

我发现这个问题的原因是我将我的 Angular 应用程序与 node.js 应用程序组合在同一个源代码树中，并且在根 tsconfig.json 我有：

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

我把它改成了

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

然后为了防止在您的 Angular 应用中使用节点类型，请将其添加到 tsconfig.app.json：

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

【讨论】：

【解决方案21】：

我遇到了同样的问题，但所有这些解决方案都不适合我。经过进一步调查，我发现我的一个组件中有一个不需要的导入。

我在 app.component 中使用了setTimeout 函数，但出于某种原因，Visual Studio 在不需要的地方添加了import { setTimeout } from 'timer';。删除此行解决了问题。

因此，请记住在进一步操作之前检查您的导入。希望它可以帮助某人。

【讨论】：

【解决方案22】：

我已经两次遇到这个问题了。这两次都是我如何实现延迟加载的问题。在我的路由模块中，我的路由定义为：

  {
    path: "game",
    loadChildren: () => import("./game/game.module").then(m => {m.GameModule})
  }

但这是错误的。在第二个 => 之后，您不需要花括号。它应该是这样的：

  {
    path: "game",
    loadChildren: () => import("./game/game.module").then(m => m.GameModule)
 }

【讨论】：

很高兴知道，那个特定的错误会导致那个奇怪的错误。可能对某些人有帮助。
这个错误令人难以置信。我花了一个小时试图解决这个问题，这只是一个支架问题。
loadChildren: () => import("./game/game.module").then(m => m.GameModule) 相当于``` loadChildren: () => import( "./game/game.module").then(m => {return m.GameModule}) ``` 第一个样式是一个快捷方式。当函数只有一行代码并且它是一个返回语句时，您可以省略 {} 和 'return' 关键字。如果函数有多行代码，需要放在{}中
我在 ES6 上有点慢：第一个版本只是（无用地）“声明”特定的值，只有在第二个版本中函数才返回它。对吗？
是的，当您使用花括号时，没有隐式返回。假设可以使用花括号和 return 语句，它仍然可以工作。

【解决方案23】：

此错误表示找不到您的模块的必要数据。就我而言，我错过了 NgModule 开头的 @ 符号。

正确的 NgModule 定义：

 @NgModule ({ 
    ... 
 })
 export class AppModule {

 }

我的情况（错误的情况）：

NgModule ({ // => this line must starts with @
   ... 
})
export class AppModule {

}

【讨论】：

【解决方案24】：

我遇到了同样的问题，我通过关闭编辑器解决了这个问题，即Visual Studio Code，再次启动它，运行ng serve，它工作了。

【讨论】：

【解决方案25】：

就我而言，我在一个组件中定义了几个（私有）静态方法，并在同一个组件中使用它们。

【讨论】：

AFAIK：这个确切的问题可以通过将 strictMetadataEmit 设置为 false 来解决。或使用// @dynamic 评论课程

【解决方案26】：

如果没有其他方法，请尝试以下操作

if (environment.production) {
        // there is no need of this if block, angular internally creates following code structure when it sees --prod
        // but at the time of writting this code, else block was not working in the production mode and NgModule metadata
        // not found for AppModule error was coming at run time, added follow code to fix that, it can be removed probably 
        // when angular is upgraded to latest version or if it start working automatically. :)
        // we could also avoid else block but building without --prod saves time in building app locally.
        platformBrowser(extraProviders).bootstrapModuleFactory(<any>AppModuleNgFactory);
    } else {
        platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
    }

【讨论】：

【解决方案27】：

对我来说，问题在于我在 Angular 组件中创建了一个名为 hasOwnProperty(obj, prop) 的方法。我的解决方案是删除或重命名方法

【讨论】：

【解决方案28】：

我会给你一些建议。删除所有这些如下所述

1)<script src="polyfills.bundle.js"></script>(index.html)  //<<<===not sure as Angular2.0 final version doesn't require this.

2)platform.bootstrapModule(App); (main.ts)

3)import { NgModule } from '@angular/core'; (app.ts)

【讨论】：

【解决方案29】：

使用 ngcWebpack 插件在未指定 mainPath 或 entryModule 时出现此错误。

【讨论】：