未找到“AppModule”的 NgModule 元数据

Question

I have checked for several times but not sure what missing in AppModule.ts I have another module for AppRoutingModule.ts

Error :

C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web>ng build
Date: 2017-11-26T14:01:44.636Z
Hash: 3222da75cdc5af92bdb9
Time: 8949ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 303 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]

ERROR in Error:

No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:20111:23)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:15101:60)
    at visitLazyRoute (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:29995:104)
    at AotCompiler.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler\bundles\compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler-cli\src\transformers\program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (C:\Ravidas\Visual.Studio\Publish Health\Club.90.Web\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:538:50)

AppModule.ts

 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { ChartsModule } from 'ng2-charts/ng2-charts'; import { Chart } from 'chart.js'; // Register 'Route Module' in main AppModule import { AppRoutingModule } from './route.config/app-routing.module'; /// All Custom Component Registerd here import { AppComponent } from './app.component'; import { HeaderComponent } from './header/header.component'; import { FooterComponent } from './footer/footer.component'; import { LoginFormComponent } from './login-form/login-form.component'; import { ForgetPasswordComponent } from './login-form/forgetPassword.component'; // import { DashboardComponent } from './dashboard/dashboard.component'; import { LoadingComponent } from './header/loading.component'; import { UserMenuComponent } from './dashboard/user.menu.component'; import { UserDashComponent } from './user/user.dash.component'; import { UserFeedComponent } from './user/user.feed.component'; import { BodyMeasurementComposiotnComponent } from './user/body.measurement.component'; import { UserGalleryComponent } from './user/user.gallery.component'; import { CustomerBodyDetailComponent } from './user/customer.body.detail.component'; import { AdminMenuComponent } from './admin/admin.menu.component'; import { AdminDashComponent } from './admin/admin.dash.component'; import { CustmoersComponent } from './admin/customers.component'; import { EditCustomerComponent } from './admin/edit.customer.component'; import { AddCustomerComponent } from './admin/add.customer.component'; import { MembershipPlanComponent } from './admin/membershipPlan.component'; import { AddMembershipPlanComponent } from './admin/add.membershipPlan.component'; import { EditMembershipPlanComponent } from './admin/edit.membershipPlan.component'; import { MembershipModalComponent } from './admin/membership.modal.component'; // Registered all Pipes import { SearchPipe } from './pipes/search.pipe'; // Registered all services import { CommonService } from './services/common.service'; import { UserProfile } from './services/user.profile'; import { UserService } from './services/user.service'; import { CustomerService } from './services/customer.service'; import { MembershipPlanService } from './services/membershipPlan.service'; import { MembershipDetailService } from './services/membershipdetail.service'; import { CustomerBodyDetailService } from './services/customer.body.detail.service'; import { DailyCustomerFeedService } from './services/daily.customer.feed.service'; import { MonthlyCustomerFeedService } from './services/monthly.customer.feed.service'; import { ManageCustomerService } from './services/manage.customer.service'; @NgModule({ imports: [ BrowserModule , FormsModule , ReactiveFormsModule , HttpModule , AppRoutingModule /// Routing Mdoule added , ChartsModule ], declarations: [ AppComponent , LoadingComponent , HeaderComponent , FooterComponent , LoginFormComponent , ForgetPasswordComponent // User Components , UserMenuComponent , UserDashComponent , UserFeedComponent , BodyMeasurementComposiotnComponent , UserGalleryComponent , CustomerBodyDetailComponent // Admin Components , AdminMenuComponent , AdminDashComponent , CustmoersComponent , EditCustomerComponent , AddCustomerComponent , MembershipPlanComponent , AddMembershipPlanComponent , EditMembershipPlanComponent , MembershipModalComponent // Pipes , SearchPipe ], providers: [ CommonService , UserProfile , UserService , CustomerService , MembershipPlanService , MembershipDetailService , CustomerBodyDetailService , DailyCustomerFeedService, , MonthlyCustomerFeedService , ManageCustomerService ], bootstrap: [AppComponent] }) export class AppModule { }

AppRoutingModule.ts

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard } from '../auth.guard'; ///// All Custom Component Registerd here import { LoginFormComponent } from '../login-form/login-form.component'; import { ForgetPasswordComponent } from '../login-form/forgetPassword.component'; import { UserDashComponent } from '../user/user.dash.component'; import { UserFeedComponent } from '../user/user.feed.component'; import { BodyMeasurementComposiotnComponent } from '../user/body.measurement.component'; import { UserGalleryComponent } from '../user/user.gallery.component'; import { CustomerBodyDetailComponent } from '../user/customer.body.detail.component'; import { CustmoersComponent } from '../admin/customers.component'; import { AdminDashComponent } from '../admin/admin.dash.component'; import { AddCustomerComponent } from '../admin/add.customer.component'; import { EditCustomerComponent } from '../admin/edit.customer.component'; import { MembershipPlanComponent } from '../admin/membershipPlan.component'; import { AddMembershipPlanComponent } from '../admin/add.membershipPlan.component'; import { EditMembershipPlanComponent } from '../admin/edit.membershipPlan.component'; const routes: Routes = [ { path: 'login', component: LoginFormComponent }, { path: 'forgot-Password', component: ForgetPasswordComponent }, { path: 'customer/detail', component: CustomerBodyDetailComponent, canActivate: [AuthGuard] }, { path: 'feeds', component: UserFeedComponent, canActivate: [AuthGuard] }, { path: 'user/dashboard', component: UserDashComponent, canActivate: [AuthGuard], }, { path: 'body/measurement', component: BodyMeasurementComposiotnComponent, canActivate: [AuthGuard] }, { path: 'gallery', component: UserGalleryComponent, canActivate: [AuthGuard] }, { path: 'admin/dashboard', component: AdminDashComponent, canActivate: [AuthGuard] }, { path: 'customers', component: CustmoersComponent, canActivate: [AuthGuard] }, { path: 'customer/create', component: AddCustomerComponent }, { path: 'customer/edit/:id', component: EditCustomerComponent, canActivate: [AuthGuard] }, { path: 'membership/plans', component: MembershipPlanComponent, canActivate: [AuthGuard] }, { path: 'membership/plan/create', component: AddMembershipPlanComponent, canActivate: [AuthGuard] }, { path: 'mebership/plan/edit/:id', component: EditMembershipPlanComponent, canActivate: [AuthGuard] }, { path: '', redirectTo: '/login', pathMatch: 'prefix' }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], providers: [ AuthGuard ], exports: [RouterModule] }) export class AppRoutingModule { }

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

Package.json

 { "name": "club.90.web", "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.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/router": "^5.0.0", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "ng2-charts": "^1.6.0", "rxjs": "^5.5.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.5.4", "@angular/compiler-cli": "^5.0.0", "@angular/language-service": "^5.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "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", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~2.4.2" } }

Why I am getting No NgModule Metadata for 'AppModule'?

Answer 1

AppModule.ts

 , DailyCustomerFeedService, , MonthlyCustomerFeedService

There was an extra comma added while adding services inside provider. It frustrated me a lot and took hole day to identify it.

Answer 2

Similarly to @Ravidas Shiudkar answer I had to fix some tslint errors. For example: missing semicolons, whitespace, double to single quotes around my project and mainly in app.module.ts.

Answer 3

我不得不删除我现有的 typescript 版本 2.5.3 并在数小时试图弄清楚之后安装 typescript@2.6.2。

Answer 4

I finally resolved this issue. Resolution below. :-)

Update the Angular CLI version to latest – as of today it's 1.7.4

• how to check the version of Angular CLI

  ng --version

• Type the following command

  npm remove @angular/cli

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

-Make sure that webpack version is 3.11.0

npm list webpack

• If not then run the following command.

  npm remove webpack

  npm install webpack@3.11.0

Answer 5

In my case problem was caused by

skipCodeGeneration: true

in

  plugins: [
    new AngularCompilerPlugin({
      mainPath: "./src/main.ts",
      tsConfigPath: "./tsconfig.app.json",
      skipCodeGeneration: !AOT
    }),
  ],

so, changing version of @ngtools/webpack package saved my day

npm uninstall @ngtools/webpack

npm install @ngtools/webpack@6.0.0-beta.5