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

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

问题描述

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

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'.

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

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

  • Angular CLI: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));

index.html如下:

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>

和 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窗口运行的:

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更新@ angular/cli
  4. ng更新
  5. ng更新@ angular/cli @ angular/core
  6. ng构建

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

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

  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构建

问题仍然存在.下一个:

Issue persisted. Next:

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

问题仍然存在.下一个:

Issue persisted. Next:

  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构建

问题仍然存在.下一个:

Issue persisted. Next:

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

问题仍然存在.下一个:

Issue persisted. Next:

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

问题仍然存在.下一个:

Issue persisted. Next:

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

问题仍然存在.下一个:

Issue persisted. Next:

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

问题仍然存在.下一个:

Issue persisted. Next:

  1. 在Visual Studio代码中打开项目
  2. 在终端窗口中运行
  3. 已确认编译错误
  4. 打开app.component.ts文件
  5. 添加空格，将其删除并保存
  6. 项目自动重新编译
  7. 成功访问站点 http://localhost:4200
  8. 已关闭的Visual Studio代码
  9. 从Git Bash窗口运行服务
  10. 项目无法编译
  11. 重新打开Visual Studio代码
  12. 从终端窗口投放服务-错误仍然存​​在
  13. 重新保存app.component.ts文件
  14. 已成功访问 http://localhost:4200
    15. 处的站点
  15. 重新启动Visual Studio代码
  16. 在Visual Studio Code中从终端窗口进行构建-返回错误
  17. 重新保存app.component.ts文件
  18. 重新生成命令-错误仍然存​​在
  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.

推荐答案

只要在tsconfig.app.json(或定义tsconfig设置的任何地方)对某人有帮助的情况下，将此Angular编译器选项设置为true时，即使未直接在NgModule元数据中引用文件，也会导致各种元数据失败(仅在index.ts中导入文件就足够了.)

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

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

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:

tsconfig.json:

"angularCompilerOptions": {
    "strictMetadataEmit": false
}

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

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天全站免登陆