Angular 2:未找到NgModule元数据

角度 Webpack

斯丁前端

2020-03-23

我是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);

应用程式:

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

谢谢你的时间。

第3029篇《Angular 2:未找到NgModule元数据》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

20个回答
达蒙 2020.03.23

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

猴子 2020.03.23

如果没有其他效果,请尝试以下操作

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);
    }
小哥Stafan 2020.03.23

就我而言,我在一个组件中定义了两个(私有)静态方法,并在同一组件中使用它们。

MandyNear米亚 2020.03.23

如果您在Angular 8或Angular 9(像我以前一样)中遇到此问题,请执行以下操作:

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

并且仍然有问题,并且您是“ 延迟加载模块”,angularCompilerOptionstsconfig.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)将所有“ strict”选项设置为true。

MandyJinJin路易 2020.03.23

我遇到了同样的问题,并通过关闭编辑器(即Visual Studio Code再次启动,运行ng serve运行)解决了该问题

蛋蛋猿 2020.03.23

此错误表明找不到模块所需的数据。就我而言,我在NgModule的开头错过了@符号。

正确的NgModule定义:

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

 }

我的情况(错误的情况):

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

}
逆天米亚 2020.03.23

我发现导致此问题的原因是,我已将Angular应用程序与node.js应用程序合并到同一源代码树中,并且在根目录中tsconfig.json具有:

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

我将其更改为

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

然后,为了防止在角度应用中使用节点类型,请将其添加到tsconfig.app.json

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

Itachi 2020.03.23

就我而言,ng update在整个宇宙崩溃之后,我尝试使用我的angular 6项目进行升级

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

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

然后我发现rxjs包有问题,我也运行了此命令。-npm install-保存rxjs

然后我得到了错误

找不到NgModule元数据

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

  • npm安装

就是这样,一切正常。

GilPro 2020.03.23

我现在两次遇到此问题。两次都是我如何实现延迟加载的问题。在我的路由模块中,我的路由定义为:

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

但这是错误的。在第二个=>之后,您不需要大括号。它应该看起来像这样:

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

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

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

番长 2020.03.23

我终于找到了解决方案。

  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。会的。

JinJin 2020.03.23

阅读以上所有答案后,我遇到了同样的问题,无法解决。然后我注意到声明中的一个逗号引起了问题。删除它,问题解决了。

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

在中main.ts,您将同时引导AppModule App。它应该只是AppModule,然后引导该App。

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

Gil 2020.03.23

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

经过仔细观察,我在app.module.ts中注意到以下内容:

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

所以我又撞了一下头。WebStorm额外的逗号非常纯净地显示为轻微警告,通过在Array中插入一个空插槽造成了严重破坏。WATCHOUT FOT的省音陷阱;)

西里Near 2020.03.23

有更多原因导致此错误。这意味着您的应用程序无法按预期构建。

检查以下内容。

  • 检查是否更改了node_modules版本,这是主要原因。
  • 如果您从其他构建工具转移到webpack,例如从Systemjs转移到Webpack,如果您的某些依赖项本质上不是模块化的,那么您可能会收到此错误,也请进行检查。
  • 检查框架的过时功能,例如 角度2中的“ HTTP_PROVIDERS”,然后将其删除。
  • 如果要升级,请确保遵循框架的当前语法,例如:Angular2中的路由语法已更改。
  • 检查引导过程,并确保您正在加载正确的模块。
JinJin 2020.03.23

仅当手动重新安装angular / cli时,此问题才得到解决。请遵循以下步骤。(在Angular项目目录下运行all命令)

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

番长 2020.03.23

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

番长猴子 2020.03.23

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

西里神奇 2020.03.23

即使我已将上述答案建议的所有内容都放在适当的位置,我仍然遇到此错误。app.module.ts只需文件进行简单的编辑即可(例如删除括号并放回去)。

Davaid村村 2020.03.23

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

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

您正在尝试bootstrap App,这不是一个真正的模块。删除这两行并替换为以下行:

platformBrowserDynamic().bootstrapModule(AppModule);

它将解决您的错误。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android