从 Angular 5 升级到 Angular 7 后，找不到“AppModule"的 NgModule 元数据 [英] No NgModule metadata found for 'AppModule' after upgrade from Angular 5 to Angular 7

查看：30
本文介绍了从 Angular 5 升级到 Angular 7 后，找不到“AppModule"的 NgModule 元数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

  • Angular CLI:7.3.6
  • 节点:11.10.0
  • 操作系统:win32 x64
  • 角度:7.2.10

app.module.ts 文件是:

import { BrowserModule } from '@angular/platform-b​​rowser';从'@angular/core' 导入 { NgModule };import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };从 './layout/admin/admin.component' 导入 { AdminComponent };从 './layout/admin1/estimate.component' 导入 { AdminComponent1 };从 './layout/auth/auth.component' 导入 { AuthComponent };从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从 './shared/shared.module' 导入 { SharedModule };从'./shared/menu-items/menu-items'导入{菜单项}；从'./layout/admin/breadcrumbs/breadcrumbs.component'导入{面包屑组件}；从'../providers/services'导入{服务提供者}；从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从 './activate-guard' 导入 { AuthGuardService };从 './deactivate-guard' 导入 { AuthLoginService };从 './supperadmin-guard' 导入 { SupperAdmin };从 'ngx-progressbar' 导入 { NgProgressModule };从'angular2-notifications'导入{SimpleNotificationsModule}；从 '../assets/config/ConfigService' 导入 { ConfigService };@NgModule({声明: [应用组件，管理组件，管理组件1，身份验证组件，面包屑组件，],进口:[浏览器模块，浏览器动画模块，表单模块，反应形式模块，应用路由模块，共享模块，NgProgress 模块，SimpleNotificationsModule.forRoot(),浏览器模块，],提供者:[MenuItems, ServicesProvider, AuthGuardService, SupperAdmin, AuthLoginService, NgProgressModule, ConfigService],引导程序:[AppComponent]})导出类 AppModule { }

和 ma​​in.ts 文件是:

import { enableProdMode } from '@angular/core';从'@angular/platform-b​​rowser-dynamic'导入{platformBrowserDynamic}；从 './app/app.module' 导入 { AppModule };从'./environments/environment'导入{环境}；如果(环境.生产){enableProdMode();}platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));

而 index.html 如下:

<html lang="zh-cn"><头><meta charset="utf-8"><title>欢迎</title><base href="/"><!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--><脚本异步延迟 src="https://maps.googleapis.com/maps/api/js?key=xxx"></script><!-- <script src="https://maps.googleapis.com/maps/api/js"异步延迟></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, minimum-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"><风格></风格><!-- 谷歌字体--><link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/ng2-toastr@4.1.2/ng2-toastr.css" rel="stylesheet"/><身体><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 class="gap-patch"><div class="circle"></div>

<div class="circle-clipper right"><div class="circle"></div>

<div class="spinner-layer spinner-red"><div class="circle-clipper left"><div class="circle"></div>

<div class="gap-patch"><div class="circle"></div>

<div class="circle-clipper right"><div class="circle"></div>

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

<div class="gap-patch"><div class="circle"></div>

<div class="circle-clipper right"><div class="circle"></div>

<div class="spinner-layer spinner-green"><div class="circle-clipper left"><div class="circle"></div>

<div class="gap-patch"><div class="circle"></div>

<div class="circle-clipper right"><div class="circle"></div>

</app-root><script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-image/v0.0.4/leaflet-image.js'></script><脚本></html>

还有 angular.json 文件:

<代码>{"$schema": "./node_modules/@angular/cli/lib/config/schema.json",版本":1，"newProjectRoot": "项目",项目":{超级能力":{根": ""，"sourceRoot": "src","projectType": "应用程序",建筑师":{建造": {"builder": "@angular-devkit/build-angular:browser",选项": {"outputPath": "dist","index": "src/index.html","main": "src/main.ts","tsConfig": "src/tsconfig.app.json","polyfills": "src/polyfills.ts",资产":["来源/资产","src/favicon.ico","src/marker-icon.png",src/marker-icon-2x.png"],风格":["./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"],脚本":["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"]},配置":{产品":{文件替换":[{"replace": "src/environments/environment.ts","with": "src/environments/environment.prod.ts"}]},生产": {优化":真，"outputHashing": "全部",源地图":假，extractCss":真，"namedChunks": 假,aot":真的，"extractLicenses": 真,vendorChunk":假，构建优化器":true}}},服务": {"builder": "@angular-devkit/build-angular:dev-server",选项": {"browserTarget": "mega-able:build"},配置":{产品":{"browserTarget": "mega-able:build:prod"},生产": {"browserTarget": "mega-able:build:production"}}},提取-i18n":{"builder": "@angular-devkit/build-angular:extract-i18n",选项": {"browserTarget": "mega-able:build"}},测试": {"builder": "@angular-devkit/build-angular:karma",选项": {"main": "src/test.ts","karmaConfig": "./karma.conf.js","polyfills": "src/polyfills.ts","tsConfig": "src/tsconfig.spec.json",脚本":["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"],风格":["./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"],资产":["来源/资产","src/favicon.ico","src/marker-icon.png",src/marker-icon-2x.png"]}},棉绒":{"builder": "@angular-devkit/build-angular:tslint",选项": {tsConfig":["src/tsconfig.app.json",src/tsconfig.spec.json"],排除": [**/node_modules/**"]}}}},mega-able-e2e":{"root": "e2e","sourceRoot": "e2e","projectType": "应用程序",建筑师":{e2e":{"builder": "@angular-devkit/build-angular:protractor",选项": {"protractorConfig": "./protractor.conf.js","devServerTarget": "mega-able:serve"}},棉绒":{"builder": "@angular-devkit/build-angular:tslint",选项": {tsConfig":[e2e/tsconfig.e2e.json"],排除": [**/node_modules/**"]}}}}},"defaultProject": "mega-able",示意图":{@schematics/angular:component":{前缀":应用程序"，"styleext": "scss"},@schematics/angular:directive":{前缀":应用程序"}}}

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

  1. npm install -g @angular/cli
  2. npm install @angular/cli
  3. ng 更新@angular/cli
  4. 更新
  5. ng 更新 @angular/cli @angular/core
  6. ng 构建

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

  1. npm 删除 webpack
  2. npm install –save-dev @angular/cli@latest
  3. npm 缓存清理 –force
  4. npm 安装
  5. npm install –save-dev @angular/cli@latest
  6. ng 构建

问题仍然存在.下一个:

  1. 手动删除了 node_modules 文件夹
  2. npm 安装
  3. ng 构建

问题仍然存在.下一个:

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

问题仍然存在.下一个:

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

问题仍然存在.下一个:

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

问题仍然存在.下一个:

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

问题仍然存在.下一个:

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

问题仍然存在.下一个:

  1. 在 Visual Studio 代码中打开的项目
  2. 在终端窗口中运行 ng s
  3. 确认编译错误
  4. 打开 app.component.ts 文件
  5. 添加一个空格，将其删除并保存
  6. 项目自动重新编译
  7. 成功访问位于 http://localhost:4200
    8. 的站点
  8. 关闭 Visual Studio 代码
  9. 从 Git Bash 窗口运行 ng serve
  10. 项目编译失败
  11. 重新打开 Visual Studio Code
  12. 从终端窗口运行服务 - 错误仍然存​​在
  13. 重新保存了 app.component.ts 文件
  14. 成功访问了位于 http://localhost:4200
    15. 的站点
  15. 重新启动 Visual Studio Code
  16. 从 Visual Studio Code 的终端窗口运行构建 - 返回错误
  17. 重新保存了 app.component.ts 文件
  18. 重新运行构建命令 - 错误仍然存​​在

此时我不知道还有什么可尝试的，开发团队将在周二休假，因此由于时间有限，我们将不胜感激任何帮助或建议.在此先感谢您的帮助.

解决方案

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

可以使用 //@dynamic 注释抑制单个文件/类型，或者...您可以检查以确保 strictMetadataEmit 设置为 false:

tsconfig.json:

"angularCompilerOptions": {strictMetadataEmit":假}

就我而言，这在某些时候已设置为 true，因此 Angular 无法处理与模块定义无关的类的元数据.将其设置为 false(这是默认值，如下所示:https://angular.io/guide/angular-compiler-options) 解决了这个问题.

Our dev team recently updated an Angular 5 project to Angular 7. I've downloaded the repo and I'm trying to build the source, however when I run the ng build command I get a ERROR in No NgModule metadata found for 'AppModule'.

If I run the ng --version command it shows the following:

The app.module.ts file is:

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

and the main.ts file is:

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

And the index.html is as follows:

<!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/ng2-toastr@4.1.2/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>

And the angular.json file:

{
  "$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"
    }
  }
}

Below are all the various things I have tried based on Google searches. All the commands were run from a Git Bash window unless otherwise specified:

  1. npm install -g @angular/cli
  2. npm install @angular/cli
  3. ng update @angular/cli
  4. ng update
  5. ng update @angular/cli @angular/core
  6. ng build

The same issue about the NgModule metadata was still present. Next I tried the following:

  1. npm remove webpack
  2. npm install –save-dev @angular/cli@latest
  3. npm cache clean –force
  4. npm install
  5. npm install –save-dev @angular/cli@latest
  6. ng build

Issue persisted. Next:

  1. Manually deleted the node_modules folder
  2. npm install
  3. ng build

Issue persisted. Next:

  1. npm i -g @angular/cli@latest
  2. Manually deleted node_modules folder
  3. npm cache clear –force
  4. npm cache verify
  5. npm install
  6. npm uninstall webpack
  7. npm install –save-dev –save-exact @angular/cli@latest
  8. ng build

Issue persisted. Next:

  1. Manually deleted the node_modules folder
  2. Manually deleted the package-lock.json file
  3. npm install
  4. ng build

Issue persisted. Next:

  1. npm remove webpack
  2. npm install –save-dev @angular/cli@latest
  3. ng build

Issue persisted. Next:

  1. npm cache clean –force
  2. npm install
  3. npm install –save-dev @angular/cli@latest
  4. ng build

Issue persisted. Next:

  1. Manually deleted the node_modules folder
  2. Manually deleted the package-lock.json file
  3. npm cache clean –force
  4. npm install
  5. npm install –save-dev @angular/cli@latest

Issue persisted. Next:

  1. Opened project in Visual Studio code
  2. In the terminal window ran ng s
  3. Confirmed compilation error
  4. Opened the app.component.ts file
  5. Added a blank space, removed it, and saved
  6. Project automatically recompiled
  7. Successfully access the site at http://localhost:4200
  8. Closed Visual Studio Code
  9. From a Git Bash window ran ng serve
  10. Project failed to compile
  11. Re-opened Visual Studio Code
  12. Ran ng serve from terminal window – error persisted
  13. Resaved the app.component.ts file
  14. Successfully accessed the site at http://localhost:4200
  15. Restarted Visual Studio Code
  16. Ran ng build from terminal window in Visual Studio Code – error returned
  17. Resaved the app.component.ts file
  18. Reran ng build command – error persisted

I'm at a lost of what else to try at this point and the dev team is off until at Tuesday for a holiday so any help or suggestions would be greatly appreciated as I'm under some time constraints. Thank you in advance for any help.

解决方案

Just in case this helps someone, in tsconfig.app.json (or wherever you define your tsconfig settings), this Angular compiler option, when set to true, causes various metadata failures even if files are not directly referenced in the NgModule metadata (simply importing a file in an index.ts is enough).

Individual files / types can be surpressed with the // @dynamic comment, or ... you can check to make sure that strictMetadataEmit is set to false:

tsconfig.json:

"angularCompilerOptions": {
    "strictMetadataEmit": false
}

In my case, this had been set to true at some point, so Angular was failing on metadata for classes that had nothing to do with module defs. Setting it to false (which is the default, as specified here: https://angular.io/guide/angular-compiler-options) fixed the issue.

这篇关于从 Angular 5 升级到 Angular 7 后，找不到“AppModule"的 NgModule 元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆