我是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{};
感谢您的时间。
答案 0 :(得分：63)
我有这个错误，即使我已经掌握了上述建议的所有内容。在app.module.ts文件中进行简单编辑（比如删除括号并将其放回）就可以了。
答案 1 :(得分：28)
问题出在您的main.ts文件中。
const platform = platformBrowserDynamic();
platform.bootstrapModule(App);
您正在尝试引导App，这不是一个真正的模块。
删除这两行并替换为以下行：
platformBrowserDynamic().bootstrapModule(AppModule);
它会修复你的错误。
答案 2 :(得分：23)
尝试删除node_modules
rm -rf node_modules和package-lock.json rm -rf package-lock.json，
之后运行npm install。
答案 3 :(得分：8)
只有在手动重新安装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）庆祝：）
答案 4 :(得分：6)
我建议重新启动应用程序。大多数案例编辑器将无法检测到延迟加载的模块中的更改。
答案 5 :(得分：3)
获取此错误的原因有很多。这意味着您的应用程序无法按预期构建。
检查以下内容..
答案 6 :(得分：3)
迟到的答案，但这可能对某人有所帮助。我得到了同样的错误，尝试了所有前面提到的建议，撞到了墙上，但没有任何效果。
仔细观察，我在app.module.ts中注意到以下内容：
<script src="/Scripts/jquery-3.2.1.min.js"></script>
所以我更多地撞了我的脑袋。 WebStorm提供的额外逗号非常无辜，作为一个温和的警告，通过在阵列中插入一个空插槽而造成严重破坏。注意elision陷阱;）
答案 7 :(得分：2)
使用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)
答案 8 :(得分：2)
我遇到了同样的问题，在阅读完所有上述答案后无法解决。然后我注意到声明中的额外逗号创建了一个问题。删除它，问题解决了。
@NgModule({
imports: [
PagesRoutingModule,
ThemeModule,
DashboardModule,
],
declarations: [
...PAGES_COMPONENTS,
**,**
],
})
答案 9 :(得分：2)
在main.ts中，您正在引导您的AppModule 和您的应用。它应该只是AppModule，然后引导App。
如果您将main.ts与文档进行比较，您会发现差异 - 只需从main.ts中删除对App的所有引用
答案 10 :(得分：2)
如果您在Angular 8或Angular 9中遇到了这个问题（像我以前一样），请执行以下操作：
并且您仍然遇到问题，并且延迟加载模块在angularCompilerOptions或tsconfig.json中检查tsconfig.app.json，并确保< strong>“ strictMetadataEmit” 设置为 false 或已删除。
"angularCompilerOptions": {
"preserveWhitespaces": false,
"strictInjectionParameters": true,
"fullTemplateTypeCheck": true,
"strictTemplates": true,
// "strictMetadataEmit": true <-- remove this setting or set to false
},
此设置是为了帮助不应内置延迟加载模块的库创建者。我以前（使用Angular 7）将所有“ strict”选项设置为true ...
答案 11 :(得分：2)
希望它会有所帮助。就我而言，我使用延迟加载模块，发现此错误导致
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="@drawable/border_bottom"
android:orientation="horizontal">
<ImageView
android:id="@+id/playlist_album_thumbnail"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@drawable/album_three"
android:scaleType="centerCrop"
android:contentDescription="@string/album_thumbnail_desc"/>
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<TextView
android:id="@+id/playlist_song_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mon voyage de rêve"
android:layout_marginLeft="8dp"
android:textColor="#000000"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="@+id/playlist_song_album_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dream Voyage"
android:textSize="10sp"
android:textColor="#666666"
app:layout_constraintTop_toBottomOf="@+id/playlist_song_title"
app:layout_constraintStart_toStartOf="@id/playlist_song_title"/>
<TextView
android:id="@+id/playlist_song_credit_separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - "
android:textSize="10sp"
android:textColor="#666666"
app:layout_constraintTop_toBottomOf="@+id/playlist_song_title"
app:layout_constraintStart_toEndOf="@id/playlist_song_album_title"/>
<TextView
android:id="@+id/playlist_song_artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - John Doen, Jane Doe"
android:textSize="10sp"
android:textColor="#666666"
app:layout_constraintTop_toBottomOf="@+id/playlist_song_title"
app:layout_constraintStart_toEndOf="@id/playlist_song_credit_separator"/>
</android.support.constraint.ConstraintLayout>
<ImageButton
android:id="@+id/playlist_play_button"
android:layout_width="24dp"
android:layout_height="24dp"
android:padding="0dp"
android:layout_gravity="center_vertical"
android:background="#00FFFFFF"
android:src="@drawable/ic_play_arrow_black_24dp"
android:scaleType="centerCrop"/>
</LinearLayout>
ERROR in No NgModule metadata found for 'MyModule'.
in app-routing.module.ts
如果我运行{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' }, chrome开发工具可以告诉我ng serve --aot
答案 12 :(得分：1)
当我从git存储库克隆时，我遇到了这个问题，当我创建一个新项目并从旧项目中重新插入src文件夹时，我解决了这个问题。
src文件夹是部署角度应用程序时唯一需要的文件夹，但您必须使用此解决方案重新配置开发环境。
答案 13 :(得分：1)
我终于找到了解决方法。
npm remove webpack
npm install --save-dev @angular/cli@latest
成功测试应用后，它将可以运行：）
如果没有，请执行以下步骤：
npm cache clean --force
npm install
npm install --save-dev @angular/cli@latest
注意：如果失败，请再次尝试步骤4。它将起作用。
答案 14 :(得分：0)
我只是在懒加载模块上遇到了同样的问题。原来，该模块的名称不正确。
检查所有模块的名称以查找可能的错字。
答案 15 :(得分：0)
如果没有其他效果，请尝试以下操作
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);
}
答案 16 :(得分：0)
就我而言，我在一个组件中定义了两个（私有）静态方法，并在同一组件中使用它们。
答案 17 :(得分：0)
我遇到了同样的问题，我通过关闭编辑器（即Visual Studio Code，重新启动，运行ng serve来解决了该问题。
答案 18 :(得分：0)
此错误表明找不到模块所需的数据。 就我而言，我错过了NgModule开头的 @ 符号。
正确的NgModule定义：
@NgModule ({
...
})
export class AppModule {
}
我的案子（错案）：
NgModule ({ // => this line must starts with @
...
})
export class AppModule {
}
答案 19 :(得分：0)
对我来说，问题是我在 Angular 组件中创建了一个名为 hasOwnProperty(obj, prop) 的方法。
我的解决方案是删除或重命名方法
答案 20 :(得分：0)
我已经两次遇到此问题。两次都是我如何实现延迟加载的问题。在我的路由模块中，我的路由定义为：
{
path: "game",
loadChildren: () => import("./game/game.module").then(m => {m.GameModule})
}
但这是错误的。在第二个=>之后，您不需要大括号。它应该看起来像这样：
{
path: "game",
loadChildren: () => import("./game/game.module").then(m => m.GameModule)
}
答案 21 :(得分：0)
我遇到了同样的问题，但是所有这些解决方案都不适合我。经过进一步调查后，我发现我的组件之一是不想要的进口。
我在app.component中使用了setTimeout函数，但是由于任何原因，Visual Studio都在不需要的地方添加了import { setTimeout } from 'timer';。删除此行可解决此问题。
因此，请记住在继续之前检查您的进口。希望它可以帮助某人。
答案 22 :(得分：0)
我发现造成此问题的原因是，我已将Angular应用程序与node.js应用程序合并到同一源代码树中，并且在根tsconfig.json中拥有
"files": [
"./node_modules/@types/node/index.d.ts"
]
我将其更改为
"compilerOptions": {
"types": ["node"]
}
然后为了防止在角度应用中使用节点类型，请将其添加到tsconfig.app.json：
"compilerOptions": {
"types": []
}
答案 23 :(得分：0)
就我而言，我试图在整个宇宙崩溃之后使用ng update升级我的angular 6项目。
我正尝试使用以下命令更新项目：
然后我发现rxjs包有问题，我也运行了此命令。 -npm install-保存rxjs
然后我得到错误
未找到NgModule元数据
我可以通过删除项目根目录中的 node_modules 文件夹来解决此问题 然后我运行：
就是这样，一切正常。
答案 24 :(得分：0)
我们有时在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安装，以确保是否已安装所有内容。
然后运行
npm ls --depth 0
要确保您所有的node_modules是否彼此同步。如果存在依赖项不匹配，这是我们有机会找出的机会。
最后运行npm start / ng服务。它应该可以解决所有问题。
这是一些作弊代码，如果在深入研究cli时遇到任何问题，我们将遵循这些代码。 95％的时间可以解决所有问题。
希望有帮助。
答案 25 :(得分：0)
您需要启用ngModel指令。这是通过将FormsModule添加到AppModule中的imports []数组来完成的。
然后，您还需要在app.module.ts文件中从@ angular / forms添加导入： 从'@ angular / forms'导入{FormsModule};
答案 26 :(得分：-1)
使用ngcWebpack插件在未指定mainPath或entryModule时出现此错误。
答案 27 :(得分：-1)
我会给你一些建议。删除所有这些，如下所述
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)