Question

在部署该项目时我呆了两天。
我一遍又一遍地搜索，但仍然找不到原因。这个项目是由我亲自完成的。
这就是问题所在：

$ ng serve

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-06-22T09:18:54.790Z                                                       
Hash: f4e69e81ccb778bcfbeb
Time: 4294ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 3.17 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {scripts} scripts.bundle.js (scripts) 324 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 310 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 853 kB [initial] [rendered]

ERROR in No NgModule metadata found for 'AppModule'.

webpack: Failed to compile.

以下是文件： package.json：

{
  "name": "starter2.0",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.1",
    "@angular/cdk": "^5.2.1",
    "@angular/common": "^5.2.1",
    "@angular/compiler": "^5.2.1",
    "@angular/core": "^5.2.1",
    "@angular/forms": "^5.2.1",
    "@angular/http": "^5.2.1",
    "@angular/material": "^5.2.1",
    "@angular/platform-browser": "^5.2.1",
    "@angular/platform-browser-dynamic": "^5.2.1",
    "@angular/router": "^5.2.1",
    "angular2-auth": "^0.1.7",
    "angular2-fontawesome": "^0.9.3",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "ng2-google-charts": "^3.3.0",
    "ng2-truncate": "^1.3.11",
    "rxjs": "^5.5.2",
    "underscore": "^1.8.3",
    "web-animations-js": "^2.3.1",
    "webpack": "^3.11.0",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.1",
    "@angular/compiler-cli": "^5.2.1",
    "@angular/language-service": "^5.2.1",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jquery": "^3.2.16",
    "@types/node": "~6.0.60",
    "bower": "^1.8.4",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ngx-dropzone-wrapper": "^5.0.0",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

app.module.ts：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './/app-routing.module';

// components import
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthComponent } from './auth/auth.component';
import { InstanceService } from './services/instance.service';
import { InstanceComponent } from './instance/instance.component';
import { WrapperComponent } from './wrapper/wrapper.component';
import { ImportComponent } from './import/import.component';
import { SupportComponent } from './support/support.component';
import { InstallationComponent } from './installation/installation.component';
import { FormationComponent } from './formation/formation.component';
import { CopilComponent } from './copil/copil.component';

// services import
import { InstallationService } from './services/installation.service';
import { SupportService } from './services/support.service';
import { FormationService } from './services/formation.service';
import { TokenService } from './services/token.service';
import { AuthService } from './services/auth.service';

// DropZone
import { DropzoneModule } from 'ngx-dropzone-wrapper';
import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
import { TruncateModule } from 'ng2-truncate';

// google chart
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
// font-awesome
import { Angular2FontawesomeModule } from 'angular2-fontawesome/angular2-fontawesome';

// material angular import
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {CdkTableModule} from '@angular/cdk/table';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatStepperModule,
} from '@angular/material';
import { TokenComponent } from './token/token.component';

const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {

};


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    AuthComponent,
    InstanceComponent,
    WrapperComponent,
    ImportComponent,
    InstallationComponent,
    SupportComponent,
    FormationComponent,
    CopilComponent,
    TokenComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    DropzoneModule,
    TruncateModule,
    Ng2GoogleChartsModule,
    Angular2FontawesomeModule,
    BrowserAnimationsModule,
    CdkTableModule,
    MatAutocompleteModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,ng 
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule
  ],
  providers: [
    AuthService,
    InstallationService,
    SupportService,
    FormationService,
    TokenService,
    InstanceService,
      { provide: DROPZONE_CONFIG, useValue: DEFAULT_DROPZONE_CONFIG }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

由于您必须维护和改进此项目，因此您可以看到文件很大。

编辑：
我已经用最新版本的@ angular / cli重新安装了所有内容，并至少三遍仔细检查了webpack的版本，没有任何改善。

Answer 1

尝试1：-

   npm uninstall webpack --save
   rm -rf node_modules package-lock.json
   npm install

尝试2：-

将Angular CLI版本更新为最新版本-截至今天为1.7.4

如何检查@ angular / cli的版本

ng --version

转到该文件夹，然后键入以下命令以更新CLI。

npm remove @angular/cli
npm install —save-dev @angular/cli@latest

确保Webpack版本为3.11.0 如何检查Webpack的版本

npm list webpack

如何更新webpack

npm remove webpack
npm install webpack@3.11.0

这里包含更多解决问题的方法，请检查下面的链接

https://github.com/angular/angular-cli/issues/9292

https://github.com/angular/angular-cli/issues/8798

我希望它会有所帮助。

找不到“ AppModule”的NgModule元数据中的错误。和webpack：编译失败

1 个答案: