No NgModule metadata found for 'AppModule'

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

I had to remove my existing typescript version 2.5.3 and install [email protected] after hours of trying to figure it out .