找不到“AppModule”的 NgModule 元数据中的 Angular 7 错误答案

【问题标题】：Angular 7 ERROR in No NgModule metadata found for 'AppModule'找不到“AppModule”的 NgModule 元数据中的 Angular 7 错误
【发布时间】：2019-08-08 13:44:51
【问题描述】：

ng build 给出错误但没有显示任何其他线索，如文件名。这个项目是 angular 7 的 asp.net 核心应用程序

c:\Users\siva\Myapp\ClientApp>ng build
Date: 2019-08-08T13:22:52.205Z
Hash: 3cf9605e6457ff409625
Time: 6746ms
chunk {main} main.js, main.js.map (main) 671 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.3 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 747 kB [initial] [rendered]

ERROR in No NgModule metadata found for 'AppModule'.

本地安装的包及其版本是：

npm list --depth=0 
+-- @angular-devkit/build-angular@0.13.9
+-- @angular/animations@7.0.4
+-- @angular/cdk@7.3.7
+-- @angular/cli@7.3.9
+-- @angular/common@7.0.4
+-- @angular/compiler@7.0.4
+-- @angular/compiler-cli@7.0.4
+-- @angular/core@7.0.4
+-- @angular/flex-layout@7.0.0-beta.24
+-- @angular/forms@7.0.4
+-- @angular/http@7.0.4
+-- @angular/language-service@7.0.4
+-- @angular/material@7.3.7
+-- @angular/platform-browser@7.0.4
+-- @angular/platform-browser-dynamic@7.0.4
+-- @angular/router@7.0.4
+-- @types/jasmine@2.8.16
+-- @types/jasminewd2@2.0.6
+-- @types/node@8.10.51
+-- codelyzer@4.5.0
+-- core-js@2.6.9
+-- jasmine-core@2.99.1
+-- jasmine-spec-reporter@4.2.1
+-- karma@4.2.0
+-- karma-chrome-launcher@2.2.0
+-- karma-coverage-istanbul-reporter@2.0.6
+-- karma-jasmine@1.1.2
+-- karma-jasmine-html-reporter@0.2.2
+-- ngx-device-detector@1.3.9
+-- ngx-mask@7.9.10
+-- ngx-mat-select-search@1.8.0
+-- ngx-perfect-scrollbar@7.2.1
+-- ngx-ui-loader@7.2.2
+-- node-sass@4.12.0
+-- protractor@5.4.2
+-- rxjs@6.3.3
+-- ts-node@7.0.1
+-- tslint@5.11.0
+-- typescript@3.1.6
+-- web-animations-js@2.3.2
+-- webpack@4.39.1
`-- zone.js@0.8.29

package.json 文件是

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "myapp",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build.prod": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.4",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.0.4",
    "@angular/compiler": "^7.0.4",
    "@angular/core": "^7.0.4",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/forms": "^7.0.4",
    "@angular/http": "^7.0.4",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.0.4",
    "@angular/platform-browser-dynamic": "^7.0.4",
    "@angular/router": "^7.0.4",
    "core-js": "^2.6.9",
    "ngx-device-detector": "^1.3.5",
    "ngx-mask": "^7.9.10",
    "ngx-mat-select-search": "^1.8.0",
    "ngx-perfect-scrollbar": "^7.2.1",
    "ngx-ui-loader": "^7.2.2",
    "rxjs": "~6.3.3",
    "web-animations-js": "^2.3.2",
    "webpack": "^4.39.1",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.8",
    "@angular/compiler-cli": "^7.0.4",
    "@angular/language-service": "^7.0.4",
    "@types/jasmine": "^2.8.16",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.10.51",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.12.0",
    "protractor": "^5.4.2",
    "ts-node": "~7.0.1",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

app.module.ts

import { APP_BASE_HREF } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { FakeBackendProvider } from './fake-backend/fake-backend.interceptor';
import { HomeModule } from './home/home.module';
import { MaterialModule } from './shared/modules/material.module';
import { SharedModule } from './shared/shared.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FlexLayoutModule,
    BrowserAnimationsModule,
    CoreModule,
    HomeModule,
    NgxUiLoaderModule,
    SharedModule.forRoot(),
    MaterialModule.forRoot()
  ],
  declarations: [AppComponent],
  providers: [
    FakeBackendProvider,
    {
      provide: APP_BASE_HREF,
      useValue: '/'
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我尝试了所有发现的方法，例如删除 node_modules 文件夹。 npm install, npm cache clear --force 我尝试删除和卸载 nodejs 和源代码并从头开始。同样的错误来了。如何排除错误原因？

如果在 ng build 中使用了 --aot 参数，则会出现不同的错误

TypeError: Cannot read property 'flags' of undefined

【问题讨论】：

也许this 可以帮忙？
你有没有更新你所有的包，比如打字稿？也可以参考这个链接stackoverflow.com/questions/55320181/…

标签： angular typescript asp.net-core .net-core

【解决方案1】：

虽然我不确定，但问题可能是由于 webpack 包安装造成的。在此错误之前，我收到有关未找到 webpack 包的错误。我已经通过npm install webpack 或npm install webpack --save 安装了它。我不记得了。然后是另一个与节点 saas 相关的错误。所以我也安装了node-sass。我已经阅读了这个 github 问题 comment。所以我做了以下步骤：

删除了整个asp.net core项目
已卸载 nodejs
已删除文件夹中的 npm-cache 和 npm C:\Users\myname\AppData\Roaming\
已安装nodejs
获得了新的副本我的工作项目
在 package.json 所在的 Angular 项目文件夹中运行 npm install
运行“node_modules\.bin\ng build”
运行“node_modules\.bin\ng serve”

网站正在运行

我需要从 1 到 4 的步骤，因为我弄乱了全局安装的包。并非每个人都需要这些步骤。删除 node_modules 文件夹对于其他人来说可能就足够了，而不是这些步骤

我正在 VS Professional 2017 中处理 asp.net 核心项目。从 IDE 在 iis 中启动项目足以让我运行该站点。所以我还没有全局安装@angular/cli。

简单地说，如果我在获取项目的源代码后在 Angular 项目文件夹中运行命令npm install，就没有问题。由于 webpack 和 node-sass 包都是 @angular-devkit/build-angular 包的一部分，我们不需要单独安装它。我仍然不知道手动安装这些软件包会造成麻烦的原因

【讨论】：