typescript - Angular2 beta primește excepția "Fără furnizor pentru Router! (RouterLink -> Router)"

Îmi sparg capul cu asta de două zile. Încerc să implementez un routing simplu în Angular2 beta0.0.2. Vă rog să rețineți că folosesc typescript.

Deci, ceea ce înțeleg este că trebuie să pornesc componenta mea principală a aplicației cu ROUTER_PROVIDERS astfel încât aceste servicii să fie disponibile pentru toată aplicația mea ȘI să setez directivele pentru componentele care doresc să implementeze rutarea la ROUTER_DIRECTIVES.

Iată ce am:

//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: '/' })    
    ]);

Aplicația Angular se încarcă și șablonul este afișat, dar niciun link nu funcționează și primesc următoarea eroare în consola mea:

EXCEPȚIE: Niciun furnizor pentru Router! (RouterLink -> Router) angular2.dev.js

În fișierul meu index.html (pe care îl numesc view.html) am legat toate bibliotecile relevante și am inclus router.dev.js, iar fila surse a consolei mele îmi arată că toate scripturile necesare sunt încărcate cu succes.

Am citit despre fiecare întrebare de pe Stack Overflow legată de erorile router link pentru Angular2 și întreaga documentație a router-ului, dar nu pot găsi motivul pentru care al meu nu funcționează. Din câte pot spune, codul meu corespunde documentației Angular2.

Această documentație arată că ROUTER_DIRECTIVES include directive precum RouterOutlet și RouterLink

Întrebare?

Dacă reușesc să setez directivele pentru componentă la ROUTER_DIRECTIVES, de ce primesc eroarea „No provider for Router! RouterLink”?

Răspuns #1

Mută procesul tău de inițializare într-un fișier separat:

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: '/' })
]);

Importă acel fișier nou în index.html-ul tău:

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

Avantajele de a face asta pot fi găsite aici.

De asemenea, așa cum s-a menționat în comentariu, inițiază componenta rădăcină în locul unei componente copil.

Răspunsul #2

Soluția este injectarea în boot.ts (fișierul bootloader)

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Acest lucru a rezolvat problema mea.