title: Unexpected value 'undefined' declared by the module 'AppModule' at SyntaxError.ZoneAwareError
body: <p>I am getting below error when I run my angular 2 app with npm version 4.6.1. My ng build and gulp works fine on the project. Any comments/help appreciated. Thanks.</p>
  
  <pre><code>@angular/cli: 1.0.0
  node: 6.10.0
  os: linux x64
  @angular/cli: 1.0.0
  @angular/common: 2.4.10
  @angular/compiler: 2.4.10
  @angular/compiler-cli: 2.4.10
  @angular/core: 2.4.10
  @angular/forms: 2.4.10
  @angular/http: 2.4.10
  @angular/platform-browser: 2.4.10
  @angular/platform-browser-dynamic: 2.4.10
  @angular/platform-server: 2.4.10
  @angular/router: 3.4.10 
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule, Title } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { CookieService } from 'angular2-cookie/core';
  
  // shared gaming components
  import { UrlParserService } from 'component-ng2-common/lib/url-parser-
  service';
  import { RequestOptions } from 'component-ng2-common/lib/request-options';
  import { NG2CommonModule } from 'component-ng2-common/ng2-common.module';
  
  // application wide
  import { AppComponent } from './app.component';
  import { routing, appRoutingProviders } from './app-routing.module';
  import { LastRouterService } from './last-route.service';
  import { FilterControlComponent} from "./shared/reportControls";
  
  // Before
  import { CDSEDetailsComponent, DirectDebitBankDetailsComponent, 
  MachineDetailsComponent,} from "./reports";
  // After
  import { CDSEDetailsComponent } from "./reports/cdse-details/cdse-details-
  component";
   import { DirectDebitBankDetailsComponent } from "./reports/direct-debit-
  bank-details/direct-debit-bank-details-component";
   import { MachineDetailsComponent } from "./reports/machine-details/machine-
  details-component";
  
  import {MachineSearchComponent} from "./search/machine-search-component";
  
  @NgModule({
    declarations: [
      AppComponent,
  
      FilterControlComponent,
      CDSEDetailsComponent,
      DirectDebitBankDetailsComponent,
      MachineDetailsComponent,
      MachineSearchComponent,
    ],
    imports: [
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      HttpModule,
      routing,
      NG2CommonModule,
    ],
    providers: [appRoutingProviders, LastRouterService, CookieService, 
      UrlParserService, RequestOptions, Title],
    exports: [ FilterControlComponent ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Title }     from '@angular/platform-browser';
  import { Router, NavigationEnd } from '@angular/router';
  import { LastRouterService } from './last-route.service';
  import { IdleService } from 'component-ng2-common/component-ng2-common';
  
  @Component({
      selector: "app-project",
      templateUrl: './app.component.html',
  })
  export class AppComponent {
    public constructor( private titleService: Title, private router: Router, 
  lastrouterservice: LastRouterService,
                    private idleService: IdleService) {
      router.events.subscribe(event =&gt; {
        if (event instanceof NavigationEnd) {
          let title = this.getTitle(router.routerState, 
      router.routerState.root).join(' ').replace(/,\s*$/, '');
          titleService.setTitle(title);
        }
      });
    }
  
    public getTitle(state, parent) {
      let data = [];
      if (parent &amp;&amp; parent.snapshot.data &amp;&amp; parent.snapshot.data.title) {
        data.push(parent.snapshot.data.title);
      }
  
      if (state &amp;&amp; parent) {
        data.push(this.getTitle(state, state.firstChild(parent)));
      }
      return data;
    }
  
    public ngOnInit() {
      // 60 secs of no activity = idle then after 20 minutes of further     
      inactivity the user is logged out.
      this.idleService.setupIdle(60, 1200);
    }
  }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>import { ModuleWithProviders } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  //Before
  import { CDSEDetailsComponent, DirectDebitBankDetailsComponent, MachineDetailsComponent, } from "./reports";
  //After
  import { CDSEDetailsComponent } from "./reports/cdse-details/cdse-details-component";
  import { DirectDebitBankDetailsComponent } from "./reports/direct-debit-bank-details/direct-debit-bank-details-component";
  import { MachineDetailsComponent } from "./reports/machine-details/machine-details-component";
  
  import {MachineSearchComponent} from "./search/machine-search-component";
  
  const routes: Routes = [
    {
      component: MachineDetailsComponent,
      data: { menuKey: "pOverview", title: Machine Details" },
      path: "machineDetails/:vId/:gid",
    },
    {
      component: MachineSearchComponent,
      data: { menuKey: "machineSearch", title: "Search for a Machine" },
      path: "machineSearch",
    },
    {
      component: DirectDebitBankDetailsComponent,
      data: { menuKey: "DirectDebitBankDetails", title: "DGR Direct Debit Bank Details" },
      path: "directDebitBankDetails",
    },
    {
      component: CDSEDetailsComponent,
      data : { title : "CDSE Details Report"},
      path: "CDSEDetailsReport",
    },
    {
      redirectTo: '/pOverview',
      path: '',
      data: { menuKey: "pOverview", title: "Ps Overview" },
      pathMatch: 'full'
    }
  ];
  
  export const appRoutingProviders: any[] = [];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
  </code></pre>
  
  <p><strong>last-route.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Router, NavigationEnd, NavigationStart } from '@angular/router';
  
  @Injectable()
  export class LastRouterService {
    lastRoute = "";
  
    constructor(router: Router) {
      router.events.pairwise().subscribe((e) =&gt; {
        if (e[0] instanceof NavigationEnd &amp;&amp; e[1] instanceof NavigationStart) {
          this.lastRoute = (e[0] as NavigationEnd).urlAfterRedirects;
        }
      });
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;ng2common-site-header&gt;&lt;/ng2common-site-header&gt;
  &lt;div class="full height"&gt;
    &lt;app-mainmenu&gt;&lt;/app-mainmenu&gt;
    &lt;div class="content"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
    &lt;ng2common-site-footer [jurisdiction]="ABC"&gt;&lt;/ng2common-site-footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>main.ts</strong></p>
  
  <pre><code>import './polyfills.ts';
  
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppModule } from './app/';
  
  if (environment.production) {
    enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p><strong>index.ts under src/app folder</strong></p>
  
  <pre><code>export * from "./app.component";
  export * from "./app.module";
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Title - Project&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" type="text/css" href="&lt;&lt;uxBaseUrl&gt;&gt;/semantic/semantic.min.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"&gt;&lt;/script&gt;
    &lt;script src="&lt;&lt;uxBaseUrl&gt;&gt;/scripts/script-pack.min.js"&gt;&lt;/script&gt;
    &lt;script src="&lt;&lt;uxBaseUrl&gt;&gt;/scripts/daterangepicker.js"&gt;&lt;/script&gt;
  
    &lt;!-- FAVICONS --&gt;
    &lt;link rel="apple-touch-icon" sizes="180x180" href="&lt;&lt;uxBaseUrl&gt;&gt;/favicon/apple-touch-icon.png"&gt;
    &lt;link rel="icon" type="image/png" href="&lt;&lt;uxBaseUrl&gt;&gt;/favicon/favicon-32x32.png" sizes="32x32"&gt;
    &lt;link rel="icon" type="image/png" href="&lt;&lt;uxBaseUrl&gt;&gt;/favicon/favicon-16x16.png" sizes="16x16"&gt;
    &lt;link rel="manifest" href="&lt;&lt;uxBaseUrl&gt;&gt;/favicon/manifest.json"&gt;
    &lt;link rel="mask-icon" href="&lt;&lt;uxBaseUrl&gt;&gt;/favicon/safari-pinned-tab.svg" color="#de2828"&gt;
    &lt;meta name="theme-color" content="#ffffff"&gt;
  
  &lt;/head&gt;
  &lt;body class="mWrapper"&gt;
    &lt;app-project&gt;&lt;/app-project&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Error log on console</strong></p>
  
  <pre><code>  Error: Unexpected value 'undefined' declared by the module 'AppModule' at SyntaxError.ZoneAwareError (http://test-project-test.com/vendor.bundle.js:122965:33) at SyntaxError.BaseError [as constructor] (http://test-project-test.com/vendor.bundle.js:92472:16) at new SyntaxError (http://test-project-test.com/vendor.bundle.js:11029:16) at http://test-project-test.com/vendor.bundle.js:23759:40 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (http://test-project-test.com/vendor.bundle.js:23757:54) at JitCompiler._loadModules (http://test-project-test.com/vendor.bundle.js:59144:64) at JitCompiler._compileModuleAndComponents (http://test-project-test.com/vendor.bundle.js:59104:52) at JitCompiler.compileModuleAsync (http://test-project-test.com/vendor.bundle.js:59070:21) at PlatformRef_._bootstrapModuleWithZone (http://test-project-test.com/vendor.bundle.js:45972:25) at PlatformRef_.bootstrapModule (http://test-project-test.com/vendor.bundle.js:45947:21) at Object.594 (http://test-project-test.com/main.bundle.js:787:124) at __webpack_require__ (http://test-project-test.com/inline.bundle.js:53:30) at Object.1194 (http://test-project-test.com/main.bundle.js:6:18) at __webpack_require__ (http://test-project-test.com/inline.bundle.js:53:30) 
  </code></pre>