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.
@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
app.module.ts
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 { }
app.component.ts
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 => {
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 && parent.snapshot.data && parent.snapshot.data.title) {
data.push(parent.snapshot.data.title);
}
if (state && 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);
}
}
app-routing.module.ts
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);
last-route.service.ts
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) => {
if (e[0] instanceof NavigationEnd && e[1] instanceof NavigationStart) {
this.lastRoute = (e[0] as NavigationEnd).urlAfterRedirects;
}
});
}
}
app.component.html
<ng2common-site-header></ng2common-site-header>
<div class="full height">
<app-mainmenu></app-mainmenu>
<div class="content">
<router-outlet></router-outlet>
</div>
<ng2common-site-footer [jurisdiction]="ABC"></ng2common-site-footer>
</div>
main.ts
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);
index.ts under src/app folder
export * from "./app.component";
export * from "./app.module";
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Title - Project</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="<<uxBaseUrl>>/semantic/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="<<uxBaseUrl>>/scripts/script-pack.min.js"></script>
<script src="<<uxBaseUrl>>/scripts/daterangepicker.js"></script>
<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="<<uxBaseUrl>>/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="<<uxBaseUrl>>/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="<<uxBaseUrl>>/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="<<uxBaseUrl>>/favicon/manifest.json">
<link rel="mask-icon" href="<<uxBaseUrl>>/favicon/safari-pinned-tab.svg" color="#de2828">
<meta name="theme-color" content="#ffffff">
</head>
<body class="mWrapper">
<app-project></app-project>
</body>
</html>
Error log on console
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)
