从 Angular 5 升级到 Angular 7 后，未找到“AppModule”的 NgModule 元数据-解网

问：

我们的开发团队最近将一个 Angular 5 项目更新为 Angular 7。我已经下载了存储库并尝试构建源代码，但是当我运行 ng build 命令时，我在未找到“AppModule”的 NgModule 元数据中出现错误。

如果我运行ng --version命令，它会显示以下内容：

角度命令行界面：7.3.6
节点：11.10.0
操作系统： win32 x64
角度：7.2.10

app.module.ts文件为：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AdminComponent } from './layout/admin/admin.component';
import { AdminComponent1 } from './layout/admin1/estimate.component';
import { AuthComponent } from './layout/auth/auth.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SharedModule } from './shared/shared.module';
import { MenuItems } from './shared/menu-items/menu-items';
import { BreadcrumbsComponent } from './layout/admin/breadcrumbs/breadcrumbs.component';
import { ServicesProvider } from '../providers/services';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AuthGuardService } from './activate-guard';
import { AuthLoginService } from './deactivate-guard';
import { SupperAdmin } from './supperadmin-guard';
import { NgProgressModule } from 'ngx-progressbar';
import {SimpleNotificationsModule} from 'angular2-notifications';
import { ConfigService } from '../assets/config/ConfigService';


@NgModule({
  declarations: [
    AppComponent,
    AdminComponent,
    AdminComponent1,
    AuthComponent,
    BreadcrumbsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    SharedModule,
    NgProgressModule,
    SimpleNotificationsModule.forRoot(),
    BrowserModule,


  ],
  providers: [MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService,  NgProgressModule, ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

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.log(err));

索引 .html 如下：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Welcome</title>
  <base href="/">
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
<!-- <script src="https://maps.googleapis.com/maps/api/js"
async defer></script> -->
  <!-- <script src="../src/assets/js/pdf.js"></script>
  <script src="../src/assets/js/pdf.worker.js"></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="description" content="Visual Estimator" />
  <meta name="keywords" content="visualestimator" />
  <meta name="author" content="phoenixcoded" />
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Expires" content="0"/>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <style>
  </style>
  <!-- Google font-->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/ng2-toastr.css" rel="stylesheet" />
</head>

<body>
  <app-root>
    <div class="theme-loader">
      <div class="loader-track">
        <div class="preloader-wrapper">
          <div class="spinner-layer spinner-blue">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
          <div class="spinner-layer spinner-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>

          <div class="spinner-layer spinner-yellow">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>

          <div class="spinner-layer spinner-green">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="gap-patch">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </app-root>
</body>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script>
<script>
</script>
</html>

angular.json文件：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mega-able": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/marker-icon.png",
              "src/marker-icon-2x.png"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/font-awesome-scss/scss/font-awesome.scss",
              "src/assets/images/zommer/leaflet/dist/leaflet.css",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
              "src/scss/style.scss"
            ],
            "scripts": [
              "src/assets/images/zommer/jquery.min.js",
              "src/assets/images/zommer/bootstrap.min.js",
              "src/assets/images/zommer/leaflet/dist/leaflet-src.js",
              "src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
              "src/assets/images/zommer/color.js",
              "src/assets/images/zommer/pdf.js",
              "src/assets/images/zommer/pdf.worker.js",
              "src/assets/images/zommer/leafletfunction.js"
            ]
          },
          "configurations": {
            "prod": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "mega-able:build"
          },
          "configurations": {
            "prod": {
              "browserTarget": "mega-able:build:prod"
            },
            "production": {
              "browserTarget": "mega-able:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mega-able:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "src/assets/images/zommer/jquery.min.js",
              "src/assets/images/zommer/bootstrap.min.js",
              "src/assets/images/zommer/leaflet/dist/leaflet-src.js",
              "src/assets/images/zommer/leaflet/dist/leaflet.rotatedMarker.js",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar-src.js",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.js",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.js",
              "src/assets/images/zommer/color.js",
              "src/assets/images/zommer/pdf.js",
              "src/assets/images/zommer/pdf.worker.js",
              "src/assets/images/zommer/leafletfunction.js"
            ],
            "styles": [
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
              "node_modules/bootstrap/scss/bootstrap.scss",
              "node_modules/font-awesome-scss/scss/font-awesome.scss",
              "src/assets/images/zommer/leaflet/dist/leaflet.css",
              "src/assets/images/zommer/leaflet-draw-toolbar/dist/leaflet.draw-toolbar.css",
              "src/assets/images/zommer/leaflet-toolbar/dist/leaflet.toolbar.css",
              "src/assets/images/zommer/leaflet-draw/dist/leaflet.draw-src.css",
              "src/scss/style.scss"
            ],
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/marker-icon.png",
              "src/marker-icon-2x.png"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "mega-able-e2e": {
      "root": "e2e",
      "sourceRoot": "e2e",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "mega-able:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "mega-able",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
  }
}

以下是我根据 Google 搜索尝试过的所有各种方法。除非另有说明，否则所有命令均从 Git Bash 窗口运行：

npm install -g @angular/cli
npm install @angular/cli
ng 更新 @angular/cli
NG更新
ng 更新 @angular/cli @angular/core
ng 构建

关于 NgModule 元数据的相同问题仍然存在。接下来，我尝试了以下操作：

npm 删除 webpack
npm install –save-dev @angular/cli@latest
npm 缓存清理 –force
npm 安装
npm install –save-dev @angular/cli@latest
ng 构建

问题仍然存在。下一个：

手动删除了node_modules文件夹
npm 安装
ng 构建

问题仍然存在。下一个：

npm i -g @angular/cli@latest
手动删除node_modules文件夹
npm 缓存清除 –force
npm 缓存验证
npm 安装
npm 卸载 webpack
npm install –save-dev –save-exact @angular/cli@latest
ng 构建

问题仍然存在。下一个：

手动删除了node_modules文件夹
手动删除了package-lock.json文件
npm 安装
ng 构建

问题仍然存在。下一个：

npm 删除 webpack
npm install –save-dev @angular/cli@latest
ng 构建

问题仍然存在。下一个：

npm 缓存清理 –force
npm 安装
npm install –save-dev @angular/cli@latest
ng 构建

问题仍然存在。下一个：

手动删除了node_modules文件夹
手动删除了package-lock.json文件
npm 缓存清理 –force
npm 安装
npm install –save-dev @angular/cli@latest

问题仍然存在。下一个：

在 Visual Studio Code 中打开的项目
在终端窗口中运行 ng s
确认的编译错误
打开了app.component.ts文件
添加空格，将其删除，然后保存
项目自动重新编译
在 http://localhost:4200 成功访问该站点
已关闭的 Visual Studio Code
从 Git Bash 窗口运行 ng serve
项目编译失败
重新打开 Visual Studio Code
从终端窗口运行 ng serve – 错误仍然存在
已重新保存app.component.ts文件
在 http://localhost:4200 时已成功访问该站点
重新启动了 Visual Studio Code
在 Visual Studio Code 中从终端窗口运行 ng build – 返回错误
已重新保存app.component.ts文件
重新运行 ng build 命令 – 错误仍然存在

在这一点上，我不知该尝试什么，开发团队直到周二放假，所以任何帮助或建议将不胜感激，因为我受到一些时间限制。提前感谢您的任何帮助。

角度 7

@NgModule({
      declarations: [
        AppComponent,
        AdminComponent,
        AdminComponent1,
        AuthComponent,
        BreadcrumbsComponent,
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        AppRoutingModule,
        SharedModule,
        NgProgressModule,
        SimpleNotificationsModule.forRoot(),
        BrowserModule,


      ],
      providers: [MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService,  NgProgressModule, ConfigService],
      bootstrap: [AppComponent]
    })

元数据用于修饰类，以便它可以配置类的预期行为。我们利用 Typescript 语法，并使用装饰器功能将类与元数据附加在一起。若要将类创建为组件，我们添加@Component装饰器，如以下代码所示：

@Component({...})
export class FirstComponent {...}

我删除了npm_modules文件夹并将文件移动到备份文件夹。但是，当我运行 npm install 命令时，没有重新创建该文件，这导致 ng build 命令输出多个关于无法找到模块的错误（例如package.jsonpackage.jsonCould not find module "@angular-devkit/build-angular" from "C:\\Users\\...")

0赞 Dominick 3/24/2019

我重新阅读了您提供的链接，似乎我错过了一个可能的修复程序。我必须更新文件以包含数组并专门列出数组。之前关于找不到元数据的错误已得到解决，但现在存在有关类型“{}”上不存在的属性的错误。这绝对是一个不同的问题，所以如果需要，我将开始一个新帖子。感谢您的帮助。tsconfig.app.jsonfilesapp/app.module.ts

0赞 Ian Preglo 3/24/2019

很好，你能够用一些提示解决你男人的好工作

0赞 Dominick 3/24/2019 #4

我能够通过更新tsconfig.app.json文件以包含files属性并特别在数组中列出来解决这个问题。app/app.module.ts

3赞 Lincoln 5/27/2020 #5

以防万一这对某人有帮助，在 tsconfig.app.json（或您定义 tsconfig 设置的任何位置）中，这个 Angular 编译器选项，当设置为 true 时，即使文件没有直接在元数据中引用，也会导致各种元数据失败（只需在中导入文件就足够了）。NgModuleindex.ts

单个文件/类型可以用注释进行压制，或者...您可以检查以确保将其设置为 false：// @dynamicstrictMetadataEmit

tsconfig.json：

"angularCompilerOptions": {
    "strictMetadataEmit": false
}

就我而言，这在某个时候被设置为 true，因此 Angular 在与模块 defs 无关的类的元数据上失败了。将其设置为（这是默认值，如此处指定：https://angular.io/guide/angular-compiler-options）解决了该问题。false

1赞 Charlie Amao 6/22/2022 #6

就我而言，我可能有一个依赖错误。我尝试了此链接中的所有内容，但没有任何效果。从 6.2 更新到 7 后，我必须执行以下操作才能成功构建：

删除节点模块文件夹。
运行以下命令：.（基本上与官方 angular 更新指南中的更新命令相同，但带有标志。cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@7 update @angular/cli@7 @angular/core@7" --force--force
运行以下命令：.如果此操作失败，您可能必须再次使用该标志。npm install --legacy-peer-deps--force

环境：Windows 10、Node 10.9、Nvm 1.1.9、

0赞 M H 1/24/2023 #7

我已经尝试了关于此错误的所有 Stack Overflow 建议，以及所有关于此的帖子。没有任何效果，但我找到了适合我的解决方案。

这是组件中的这一行：

@Output() public editItemEvent : EventEmitter = new EventEmitter();

我使用了错误的包来导入 EventEmitter

import { EventEmitter } from 'protactor';

将其更改为

import { EventEmitter } from '@angular/core';

和

@Output() public editItemEvent : EventEmitter<string> = new EventEmitter<string>();

...修好了。

上一个：在控制和模拟循环中保存事件的模拟时间

下一个：覆盖 Owin 中间件中的响应正文

从 Angular 5 升级到 Angular 7 后，未找到“AppModule”的 NgModule 元数据

No NgModule metadata found for 'AppModule' after upgrade from Angular 5 to Angular 7

评论

评论

评论

评论