Angular2 EXCEPTION：没有提供者的e！ （e - > e）

Question

所以我有一个非常简单的组件，它装载了一个简单的路由器。我使用的所有基本的东西，如ngFor，ngSwitch，ngIf和我通过COMMON_DIRECTIVES注入它们

我得到这个非常模棱两可的错误，没有堆栈跟踪，所以我真的不知道发生了什么事情。我已经在https://github.com/angular/angular/issues/6223中看到过类似的东西。

EXCEPTION: No provider for e! (e -> e)

STACKTRACE:

Error: DI Exception at t [as constructor] (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:6:5082) at t [as constructor] (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:1:26551) at new t (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:1:27079) at e._throwOrNull (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5943) at e._getPrivateDependency (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:6605) at e._getByKeyHost (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:6397) at e._getByKey (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5826) at e._getByDependency (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5602) at e._instantiate (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:3644) at e._instantiateProvider (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:3376)

这里是我的代码：

.jade：

.center-area('data-editable'="true") 
    header.center-header 
    .view-path Upravljaj administratorima 
    .center-content 
    header.content-header 
     .content-header-left 
     .content-header-title Administratori 
     .content-header-subtitle 
      | Pregledajte i upravljajte administratorima 
      | radiopostaje – dodijelite administrativne 
      | ovlasti korisnicima ili ih uklonite postojećim administratorima. 
      b Sustav smije imati najviše 10 administratora. 
     .content-header-right 
     i.material-icons.icon edit 
    nav.content-options('[ngSwitch]'="editable" '[ngClass]'="{'uneditable-ui': !editable, 'editable-ui': editable}") 
     button('*ngSwitchWhen'="false" '(click)'="toggleEditable()") Uredi popis administratora 
    nav.content-options.editable-ui 
     button('*ngSwitchWhen'="true" '(click)'="toggleEditable()") Završi uređivanje popisa 
    ul.content-primary.content-list 
     li.content-list-item.admin-item('*ngFor'="#admin of admins") 
     .content-list-item-content 
      .content-list-item-name {{admin.first_name}} {{admin.last_name}} 
      .content-list-item-data 
      .content-list-item-data-item.user-mail {{admin.email}} 
      .content-list-item-data-item.user-age {{admin.year_of_birth}} 
      .content-list-item-data-item.user-occupation {{admin.occupation}} 
     .content-list-item-options.editable-ui 
      button.alt 
      i.material-icons clear 
     li.content-list-item.content-list-search-item.editable-ui('*ngIf'="editable") 
     form 
      .content-list-item-content 
      label(for='add-item-search') Dodaj administratora 
      input.add-item-search(type='text', name='add_track_search') 
      .content-list-item-options 
      button.raised.add-item-button 
       i.material-icons person_add 

.TS：

import { View, Component } from 'angular2/core'; 
import { Location, RouteConfig, RouterLink, Router, CanActivate } from 'angular2/router'; 
import { Http } from 'angular2/http'; 
import { COMMON_DIRECTIVES, FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control } from 'angular2/common'; 

import { Form } from '../../utilities'; 

@Component({ 
    selector: 'ManageAdmins', 
    templateUrl: './dest/settings/manageAdmins/manageAdmins.html', 
    directives: [COMMON_DIRECTIVES, FORM_DIRECTIVES] 
}) 
export class ManageAdmins { 
    admins: Admin[]; 

    editable: boolean; 

    toggleEditable() { 
     this.editable = !this.editable; 
    } 

    constructor(http: Http) { 
     this.editable = false; 
     this.admins = new Array(); 
     http.get('/owner/admins/list').map((res) => res.json().data).subscribe((res) => { 
      for (let i in res) { 
       let admin = new Admin(res[i]); 
       this.admins.push(admin); 
      } 
     }); 
    } 
} 

class Admin { 
    id: number; 
    first_name: string; 
    last_name: string; 
    email: string; 
    year_of_birth: string; 
    occupation: string; 

    constructor(obj: Object) { 
     this.id = obj['id']; 
     this.first_name = obj['first_name']; 
     this.last_name = obj['last_name']; 
     this.email = obj['email']; 
     this.year_of_birth = obj['year_of_birth']; 
     this.occupation = obj['occupation']; 
    } 
} 

编辑： 我的根.TS

import { FORM_PROVIDERS } from 'angular2/common'; 
import { ROUTER_PROVIDERS, Location, LocationStrategy, PathLocationStrategy } from 'angular2/router'; 
import { HTTP_PROVIDERS, RequestOptions, BaseRequestOptions } from 'angular2/http'; 
import { bootstrap } from 'angular2/platform/browser'; 
import { provide, Injectable } from 'angular2/core'; 

import { App } from './app/app'; 

@Injectable() 
export class DefaultRequestOptions extends BaseRequestOptions { 
    constructor() { 
     super(); 
     this.headers.set("Content-Type", "application/x-www-form-urlencoded"); 
    } 
} 

bootstrap(
    App, 
    [ 
     FORM_PROVIDERS, 
     ROUTER_PROVIDERS, 
     HTTP_PROVIDERS, 
     provide(LocationStrategy, { useClass: PathLocationStrategy }), 
     provide(RequestOptions, { useClass: DefaultRequestOptions }) 
    ] 
); 

Answer 1

要获得更多可读错误，您可以使用Angular2发行版中的xxx.dev.js文件。

您的错误消息表示尝试注入某些内容时出现问题。关于您提供的代码，它可能与Http类的实例的注入有关。

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);