Бета-версия Angular2 получает исключение Нет провайдера для маршрутизатора! (РоутерЛинк -> Маршрутизатор)

Уже второй день бьюсь об это головой. Я пытаюсь реализовать простую маршрутизацию в Angular2 beta0.0.2. Обратите внимание, что я использую typescript.

Итак, я понимаю, что мне нужно загрузить мой корневой компонент приложения с помощью ROUTER_PROVIDERS, чтобы эти службы были доступны моему приложению who И установить директивы для компонентов, которые хотят внедрить маршрутизацию на ROUTER_DIRECTIVES.

Вот что у меня есть:

//ANGULAR  ******************************
import {provide, Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {
        APP_BASE_HREF,
        ROUTER_DIRECTIVES,
        ROUTER_PROVIDERS,
        HashLocationStrategy,
        LocationStrategy,
        RouteConfig,
        } from 'angular2/router';

//COMPONENTS  ******************************
import {ShiftCalendarComponent} from './components/calendar/shift-calendar.component';
import {ShiftAdminComponent} from './components/admin/shift-admin.component';
import {ShiftListComponent} from './components/shifts/shift-list.component';

//CLASS  ******************************
@Component({
    selector: 'shift-app',
    directives: [ROUTER_DIRECTIVES],
    template: `<div>
                 <nav>
                     <h3> Navigation: </h3>
                     <ul>
                         <li><a [routerLink]="['Calendar']" > Home </a></li>
                         <li><a [routerLink]="['Admin']" > About </a></li>
                         <li><a [routerLink]="['Shifts']" > Contact us </a></li>
                     </ul>
                 </nav>            
                 <router-outlet></router-outlet>
             </div>`
})
@RouteConfig([
    { path: '/', name: 'root', redirectTo: ['/Calendar'] },
    { path: '/calendar', name: 'Calendar', component: ShiftCalendarComponent },
    { path: '/admin', name: 'Admin', component: ShiftAdminComponent },
    { path: '/shifts', name: 'Shifts', component: ShiftListComponent }
])
export class ShiftApp { } 

//BOOTSTRAP   ******************************
    bootstrap(ShiftApp, [
        ROUTER_PROVIDERS, 
        provide(LocationStrategy, { useClass: HashLocationStrategy }),
        provide(APP_BASE_HREF, { useValue: '/' })    
    ]);

Приложение angular загружается, и шаблон отображается, но ссылка не работает, и я получаю следующую ошибку в своей консоли:

ИСКЛЮЧЕНИЕ: Нет провайдера для маршрутизатора! (RouterLink -> Маршрутизатор) angular2.dev.js

В моем index.html (который я называю view.html) я связался со всеми соответствующими библиотеками и включил router.dev.js, и вкладка источников моей консоли показывает мне, что все необходимые сценарии успешно загружаются.

Я читал о каждом вопросе о переполнении стека с ошибками ссылки на маршрутизатор для Angular2 и всей документации по маршрутизатору, но не могу найти, почему мой не работает. Насколько я могу судить, мой код соответствует документации Angular2.

Эта документация показывает, что ROUTER_DIRECTIVES включает такие директивы, как RouterOutlet и RouterLink

Вопрос?

Если я успешно устанавливаю директивы для компонента на ROUTER_DIRECTIVES, почему я получаю сообщение об ошибке «Нет провайдера для Router! RouterLink»?


typescript angular angular2-routing
person J King    schedule 04.02.2016    source источник
comment
В приложении должно быть что-то еще, чего нет в посте, я воссоздал предоставленный вами код, и он работает с моей стороны. Вы можете скачать мой код отсюда, возможно, вы заметили разницу, которая заставляет его работать на моей стороне: drive.google.com/file/d/0Bwb6Bsfrx94pX0RzdXl0VlNmdWM/   -  person Szabolcs Dézsi    schedule 05.02.2016
comment
спасибо, щас посмотрю   -  person J King    schedule 05.02.2016
comment
@SzabolcsDézsi - Чувак! Digital High Five — я изменил свой код, чтобы он соответствовал вашему, и он работает. Я применял загрузку к дочернему компоненту, а не к основному корневому компоненту. Если вы опубликуете ответ с кодом из вашего файла boot.ts, я приму его. Еще раз спасибо!   -  person J King    schedule 05.02.2016
comment
Я счастлив, что все уладилось.   -  person Szabolcs Dézsi    schedule 05.02.2016

Ответы (3)


arrow_upward
2
arrow_downward

Переместите процесс начальной загрузки в отдельный файл:

import {bootstrap} from 'angular2/platform/browser';
import {provide, Component} from 'angular2/core';
import {ShiftApp} from './app.component';

import {
    APP_BASE_HREF,
    ROUTER_DIRECTIVES,
    ROUTER_PROVIDERS,
    HashLocationStrategy,
    LocationStrategy
} from 'angular2/router';

bootstrap(ShiftApp, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, { useClass: HashLocationStrategy }),
    provide(APP_BASE_HREF, { useValue: '/' })
]);

Импортируйте этот новый файл в свой index.html:

System.config({
    packages: {
        app: {
            format: 'register',
            defaultExtension: 'js'
        }
    }
});
System.import('app/boot')
    .then(null, console.error.bind(console));

Преимущества этого можно найти здесь.

Также, как упоминалось в комментарии, загрузите свой корневой компонент вместо дочернего компонента.

person Szabolcs Dézsi    schedule 04.02.2016

arrow_upward
1
arrow_downward

Решение вводится в boot.ts (файл загрузчика)

import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {ROUTER_PROVIDERS} from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Это решило мою проблему.

person Michael Horojanski    schedule 20.04.2016

arrow_upward
0
arrow_downward

У меня возникла проблема «ИСКЛЮЧЕНИЕ: нет провайдера для маршрутизатора! (RouterLink -> Router)», и я успешно исправил ее, внеся изменения в boot.ts. Настройте свой boot.ts в соответствии с приведенным ниже кодом, и он будет работать нормально.

import {provide} from 'angular2/core';
import {bootstrap}    from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component';


bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  provide(LocationStrategy, { useClass: HashLocationStrategy }),
  HTTP_PROVIDERS
]);
person user2318652    schedule 14.12.2016