ИСКЛЮЧЕНИЕ Angular2: нет провайдера для e! (е -> е)

Итак, у меня есть довольно простой компонент, который загружается с помощью простого маршрутизатора. Я использую все базовые вещи, такие как ngFor, ngSwitch, ngIf, и внедряю их через COMMON_DIRECTIVES.

Я получаю эту довольно неоднозначную ошибку без трассировки стека, поэтому я действительно не знаю, что происходит. Я видел что-то потенциально похожее в https://github.com/angular/angular/issues/6223< /а> .

ИСКЛЮЧЕНИЕ: Нет провайдера для e! (е -> е)

ТРАССИРОВКИ СТЕКА:

Ошибка: исключение DI в t [как конструктор] (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:6:5082) в t [как конструктор] (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:1:26551) в новом t (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:1:27079) в e._throwOrNull (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5943) в e._getPrivateDependency (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:6605) на e._getByKeyHost (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:6397) на e._getByKey (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5826) на e._getByDependency (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:5602) в e._instantiate (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:3644) в e._instantiateProvider (http://localhost:5000/node_modules/angular2/bundles/angular2.min.js:9:3376)

Вот мой код:

.джейд:

.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 })
    ]
);

person ditoslav    schedule 13.01.2016    source источник
comment
COMMON_DIRECTIVES и FORM_DIRECTIVES добавлять не нужно, они добавляются автоматически. Так что лучше их удалить. Вы добавили HTTP_PROVIDERS в свою функцию bootstrap?   -  person Poul Kruijt    schedule 13.01.2016
comment
Как вы понимаете, что они автоматически добавляются? Есть ли источник для этого? Также проверьте мое редактирование   -  person ditoslav    schedule 13.01.2016
comment
В чейнджлоге не могу найти, но добавлять FORM_PROVIDERS в бутстрап тоже не нужно. Но, как сказал Тьерри, попробуйте использовать версию .dev.js, чтобы получить более подробное описание вашей ошибки.   -  person Poul Kruijt    schedule 13.01.2016


Ответы (1)


Чтобы иметь более читаемые ошибки, вы можете использовать файл xxx.dev.js из дистрибутива Angular2.

В вашем сообщении об ошибке говорилось, что возникла проблема при попытке что-то внедрить. Что касается кода, который вы предоставляете, он может быть связан с внедрением экземпляра класса Http. Добавляете ли вы HTTP_PROVIDERS при загрузке вашего приложения:

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

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
person Thierry Templier    schedule 13.01.2016
comment
Спасибо за предложение .dev. У меня он загружен, хотя... (см. мое редактирование) - person ditoslav; 13.01.2016
comment
Кажется, я пропал › ИСКЛЮЧЕНИЕ: Нет провайдера для NgSwitch! (NgSwitchWhen -> NgSwitch), но событие после того, как я его добавлю, все равно выдает ошибку - person ditoslav; 13.01.2016
comment
Вы определяете это в своем компоненте: directives: [NgSwitch, NgSwitchWhen, NgSwitchDefault]. Вот пример использования: plnkr.co/edit/DQMTII95CbuqWrl3lYAs?p=preview . - person Thierry Templier; 13.01.2016
comment
Огромное спасибо. Дело в том, что у меня был второй ngSwitchWhen вне охвата ngSwitch - person ditoslav; 13.01.2016
comment
Если бы вы упомянули об ошибке переключения и, возможно, выделили жирным шрифтом или что-то еще, тот факт, что добавление .dev действительно поможет, потому что это действительно так, я приму ваш ответ. - person ditoslav; 13.01.2016