Angular 2.1.2 (SystemJS) Can't resolve all parameters for AppComponent

I am getting an error at the app startup

Error: (SystemJS) Can't resolve all parameters for AppComponent: (?, ?, ?). Error: Can't resolve all parameters for AppComponent: (?, ?, ?). at CompileMetadataResolver.getDependenciesMetadata (https://npmcdn.com/@angular/[email protected]:14598:21) at CompileMetadataResolver.getTypeMetadata (https://npmcdn.com/@angular/[email protected]:14499:28) at CompileMetadataResolver.getDirectiveMetadata (https://npmcdn.com/@angular/[email protected]:14274:30) at eval (https://npmcdn.com/@angular/[email protected]:14678:35) at Array.forEach (native) at CompileMetadataResolver._getEntryComponentsFromProvider (https://npmcdn.com/@angular/[email protected]:14677:32) at eval (https://npmcdn.com/@angular/[email protected]:14635:85) at Array.forEach (native) at CompileMetadataResolver.getProvidersMetadata (https://npmcdn.com/@angular/[email protected]:14622:21) at eval (https://npmcdn.com/@angular/[email protected]:14629:43) Error loading http://localhost:3000/app/main.ts at CompileMetadataResolver.getDependenciesMetadata (https://npmcdn.com/@angular/[email protected]:14598:21) at CompileMetadataResolver.getTypeMetadata (https://npmcdn.com/@angular/[email protected]:14499:28) at CompileMetadataResolver.getDirectiveMetadata (https://npmcdn.com/@angular/[email protected]:14274:30) at eval (https://npmcdn.com/@angular/[email protected]:14678:35) at Array.forEach (native) at CompileMetadataResolver._getEntryComponentsFromProvider (https://npmcdn.com/@angular/[email protected]:14677:32) at eval (https://npmcdn.com/@angular/[email protected]:14635:85) at Array.forEach (native) at CompileMetadataResolver.getProvidersMetadata (https://npmcdn.com/@angular/[email protected]:14622:21) at eval (https://npmcdn.com/@angular/[email protected]:14629:43) Error loading http://localhost:3000/app/main.ts 

Here is the code

app.module.ts

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule,RequestOptions } from '@angular/http'; /* App Root */ import { AppComponent } from './app.component'; /* Routing Module */ import { AppRoutingModule } from './app.routing.module'; import { PlatformLocation, Location, LocationStrategy, HashLocationStrategy, PathLocationStrategy, APP_BASE_HREF} from '@angular/common'; import {ComponentRef, enableProdMode, } from '@angular/core'; import {AuthService} from '../login/auth.service'; import {RouteNames,CustomRequestOptions} from '../shared/services/index'; @NgModule({ imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpModule, AppRoutingModule, ], exports: [ FormsModule, HttpModule ], declarations: [ AppComponent, ], bootstrap: [ AppComponent, [ AppRoutingModule, { provide: RequestOptions, useClass: CustomRequestOptions }, { provide: LocationStrategy, useClass: HashLocationStrategy }, //provide(APP_BASE_HREF, {useValue: location.pathname}), AuthService, HttpModule, RouteNames ] ] }) export class AppModule { } 

app.routing.module.ts

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent} from '../home/home.component'; import { AppComponent } from './app.component'; import { AuthGuard, LoginComponent } from '../login/auth.index'; export const routes: Routes = [ { path: '', component: AppComponent }, { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {} 

app.component.ts

import { Component } from '@angular/core'; //,provide, OnInit import { Router } from '@angular/router'; // import { DialogService, DialogComponent, RouteNames} from "../shared/services/index"; import { AuthService,LoginComponent } from '../login/auth.index'; @Component({ selector: 'my-app', templateUrl: 'app/appshell/app.component.html', styleUrls: ['app/appshell/app.component.css'], }) export class AppComponent { title = {}; constructor( public _auth: AuthService, public router: Router, private _routeNames:RouteNames ) { this._routeNames.name.subscribe(n => this.title = n); } onLogout() { this._auth.logout(); this.router.navigate(['/login']); } onHome() { this.router.navigate(['/home']); } } 

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './appShell/app.module'; platformBrowserDynamic().bootstrapModule(AppModule); 

systemjs.config.js

(function(global) { var ngVer = '@2.1.2'; // lock in the angular package version; do not let it float to current! var routerVer = '@3.1.2'; // lock router version //map tells the System loader where to look for things var map = { 'app': 'app', // angular bundles '@angular/core': 'https://npmcdn.com/@angular/core' + ngVer, '@angular/common': 'https://npmcdn.com/@angular/common' + ngVer, '@angular/compiler': 'https://npmcdn.com/@angular/compiler' + ngVer, '@angular/platform-browser': 'https://npmcdn.com/@angular/platform-browser' + ngVer, '@angular/platform-browser-dynamic': 'https://npmcdn.com/@angular/platform-browser-dynamic' + ngVer, '@angular/http': 'https://npmcdn.com/@angular/http' + ngVer, '@angular/router': 'https://npmcdn.com/@angular/router' + routerVer, '@angular/forms': 'https://npmcdn.com/@angular/forms' + ngVer, '@angular/upgrade': 'https://npmcdn.com/@angular/upgrade' + ngVer, // Other libraries 'rxjs': 'https://npmcdn.com/[email protected]', 'angular-in-memory-web-api': 'https://npmcdn.com/angular-in-memory-web-api', // get latest 'ts': 'https://npmcdn.com/[email protected]/lib/plugin.js', 'typescript': 'https://npmcdn.com/[email protected]/lib/typescript.js', }; //packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'main.ts', defaultExtension: 'ts' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, }; var ngPackageNames = [ 'common', 'compiler', 'core', 'http', 'forms', 'platform-browser', 'platform-browser-dynamic', 'upgrade', ]; // Add package entries for angular packages ngPackageNames.forEach(function(pkgName) { // Bundled (~40 requests): //packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; }); var config = { transpiler: 'ts', meta: { 'typescript': { "exports": "ts" } }, map: map, packages: packages }; System.config(config); // Bootstrap the `AppModule`(previously in `app/main.ts` that normally does this) function bootstrap() { // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html System.set(System.normalizeSync('app/main.ts'), System.newModule({ })); // bootstrap and launch the app (equivalent to standard main.ts) Promise.all([ System.import('@angular/platform-browser-dynamic'), // previously in index.html System.import('app/main').then().catch() System.import('app/app.module') ]) .then(function (imports) { var platform = imports[0]; var app = imports[1]; platform.platformBrowserDynamic().bootstrapModule(app.AppModule); }) .catch(function(err){ console.error(err); }); } })(this); 

What did I miss here?

route.names.service.ts

import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Rx'; @Injectable() export class RouteNames{ public name = new Subject(); }