Angular 7 错误在未找到 NgModule 元数据中'AppModule'



ng 构建给出错误,但没有显示任何其他线索,如文件名。该项目是 asp.net 具有角度 7 的核心应用程序

c:UserssivaMyappClientApp>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"
}
}

主要.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 安装,npm 缓存清除 --force,我尝试删除和卸载 nodejs 和源代码,并从 scratch 开始。同样的错误来了.如何排查错误原因?

如果在 ng 构建中使用 --aot 参数,则会出现不同的错误

TypeError: Cannot read property 'flags' of undefined

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

  1. 删除了整个 asp.net 核心项目

  2. 卸载的 NodeJS

  3. 已删除的文件夹 npm 缓存和 npm 在 C:\Users\myname\AppData\Roaming\
  4. 已安装的 NodeJS
  5. 获得了新的副本 我的工作项目

  6. 在 package.json 所在的 angular 项目文件夹中运行npm install

  7. 运行"node_modules\.bing 构建">
  8. 运行"node_modules\.bing 服务">

网站正在运行

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

我正在从事VS Professional 2017 asp.net 核心项目。从 IDE 在 IIS 中启动项目足以让我运行站点。所以我还没有在全球范围内安装 @angular/cli。

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