Angular 2.1.2（SystemJS）无法解析AppComponent的所有参数

时间：2016-11-13 06:47:19

标签： angular angular2-routing

我在应用启动时收到错误

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();
}

1 个答案:

答案 0 :(得分：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 { }
相关问题
最新问题