从 Angular 5 升级到 Angular 7 后，找不到“AppModule"的 NgModule 元数据 | AppModule
本文介绍了从 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-browser';从'@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-browser/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 { }和 main.ts 文件是:
import { enableProdMode } from '@angular/core';从'@angular/platform-browser-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/[email protected] /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 窗口运行:
npm install -g @angular/cli npm install @angular/cli ng 更新@angular/cli 更新 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 代码中打开的项目 在终端窗口中运行 ng s 确认编译错误 打开 app.component.ts 文件 添加一个空格，将其删除并保存 项目自动重新编译 成功访问位于 http://localhost:4200 的站点关闭 Visual Studio 代码 从 Git Bash 窗口运行 ng serve 项目编译失败 重新打开 Visual Studio Code 从终端窗口运行服务 - 错误仍然存在 重新保存了 app.component.ts 文件 成功访问了位于 http://localhost:4200 的站点重新启动 Visual Studio Code 从 Visual Studio Code 的终端窗口运行构建 - 返回错误 重新保存了 app.component.ts 文件 重新运行构建命令 - 错误仍然存在 此时我不知道还有什么可尝试的，开发团队将在周二休假，因此由于时间有限，我们将不胜感激任何帮助或建议.在此先感谢您的帮助.
解决方案
以防万一这对某人有帮助，在 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:
Angular CLI: 7.3.6 Node: 11.10.0 OS: win32 x64 Angular: 7.2.10 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/[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>
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:
npm install -g @angular/cli npm install @angular/cli ng update @angular/cli ng update ng update @angular/cli @angular/core ng build The same issue about the NgModule metadata was still present. Next I tried the following:
npm remove webpack npm install –save-dev @angular/cli@latest npm cache clean –force npm install npm install –save-dev @angular/cli@latest ng build Issue persisted. Next:
Manually deleted the node_modules folder npm install ng build Issue persisted. Next:
npm i -g @angular/cli@latest Manually deleted node_modules folder npm cache clear –force npm cache verify npm install npm uninstall webpack npm install –save-dev –save-exact @angular/cli@latest ng build Issue persisted. Next:
Manually deleted the node_modules folder Manually deleted the package-lock.json file npm install ng build Issue persisted. Next:
npm remove webpack npm install –save-dev @angular/cli@latest ng build Issue persisted. Next:
npm cache clean –force npm install npm install –save-dev @angular/cli@latest ng build Issue persisted. Next:
Manually deleted the node_modules folder Manually deleted the package-lock.json file npm cache clean –force npm install npm install –save-dev @angular/cli@latest Issue persisted. Next:
Opened project in Visual Studio code In the terminal window ran ng s Confirmed compilation error Opened the app.component.ts file Added a blank space, removed it, and saved Project automatically recompiled Successfully access the site at http://localhost:4200 Closed Visual Studio Code From a Git Bash window ran ng serve Project failed to compile Re-opened Visual Studio Code Ran ng serve from terminal window – error persisted Resaved the app.component.ts file Successfully accessed the site at http://localhost:4200 Restarted Visual Studio Code Ran ng build from terminal window in Visual Studio Code – error returned Resaved the app.component.ts file 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 元数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-29 22:45