角2.1.2（SystemJS）無法解析所有的參數AppComponent

Question

我在應用程序啓動時

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

這裏得到一個錯誤的代碼是

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/rxjs@5.0.0-beta.12', 
    'angular-in-memory-web-api': 'https://npmcdn.com/angular-in-memory-web-api', // get latest 
    'ts':       'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', 
    'typescript':     'https://npmcdn.com/typescript@2.0.3/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); 

什麼我錯過這裏？

route.names.service.ts

import {Injectable} from '@angular/core'; 
import {Subject} from 'rxjs/Rx'; 

@Injectable() 
export class RouteNames{ 
    public name = new Subject(); 
} 

Answer 1

更改app.module到：

@NgModule({ 
    imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpModule, 
      AppRoutingModule, ], 
    // exports: [ FormsModule, HttpModule ], 
    declarations: [ AppComponent, ], 
    bootstrap: [ AppComponent ], 
    providers: [ 
     { provide: RequestOptions, useClass: CustomRequestOptions }, 
     { provide: LocationStrategy, useClass: HashLocationStrategy }, 
     //provide(APP_BASE_HREF, {useValue: location.pathname}), 
     AuthService, 
     RouteNames 
    ] 
    ] 
}) 
export class AppModule { }