Angular2 beta bekommen Ausnahme “Kein provider für Router! (RouterLink -> Router)"

Ich habe schlug meinen Kopf gegen das jetzt seit zwei Tagen. Ich bin versucht zu implementieren einige einfache routing in Angular2 beta0.0.2. Bitte beachten Sie, dass ich mit Typoskript.

Also was ich verstehe ist, dass ich brauche, um bootstrap-mein root-app-Komponente, die mit ROUTER_PROVIDERS, so dass diese Dienste verfügbar sind, zu meinen, die app UND legen Sie die Richtlinien für die Komponenten implementieren wollen, um routing zu ROUTER_DIRECTIVES.

Hier ist was ich habe:

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

Den Winkel-app lädt und die Vorlage wird angezeigt, aber kein link funktioniert und ich bekomme die folgende Fehlermeldung in meiner Konsole:

AUSNAHME: Kein provider für Router! (RouterLink -> Router) angular2.dev.js

In meinem index.html (die nenne ich view.html) habe ich in Verbindung mit allen relevanten Bibliotheken haben und router.dev.js und die Quellen der Registerkarte meine Konsole zeigt mir, dass alle benötigten Skripte sind erfolgreich geladen.

Habe ich gelesen, die über jeden stack overflow Frage mit router link-Fehler für Angular2 und die gesamte router-docs aber nicht finden können, warum meins nicht funktioniert. So weit wie ich kann sagen, dass mein code entspricht die Angular2 Dokumentation

Diese Dokumentation zeigt, dass die ROUTER_DIRECTIVES umfasst die Richtlinien, wie RouterOutlet und RouterLink

Frage?

Wenn ich mich erfolgreich festlegen der Richtlinien für die Komponente ROUTER_DIRECTIVES, warum bin ich immer der "Keine-Anbieter für den Router! RouterLink" Fehler?

Es muss noch etwas anderes in der Anwendung, die nicht in der post, die ich neu erstellt, den code zur Verfügung gestellt, und es funktioniert auf meinem Ende. Herunterladen können Sie meinen code von hier, vielleicht entdecken Sie den Unterschied macht es auf meiner Seite: drive.google.com/file/d/0Bwb6Bsfrx94pX0RzdXl0VlNmdWM/...
vielen Dank, ill schauen Sie doch gleich jetzt
Dude! Digitales High-Five, zog ich meinen code um, um mit den Ihren übereinstimmen und es funktioniert. Ich war die Anwendung der bootstrapping, um eine Kind-Komponente und nicht die Haupt-root-Komponente. Wenn Sie eine Antwort mit dem code aus dem boot.ts-Datei, ich werde es akzeptieren. Nochmals Vielen Dank!
Ich bin glücklich, es wurde aussortiert.

InformationsquelleAutor J King | 2016-02-04

Bewegen Sie Ihre bootstrapping-Prozess in s separate Datei:

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, die neue Datei in Ihre index.html:

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

Vorteile zu tun, die gefunden werden können hier.

Auch wie bereits erwähnt im Kommentar, bootstrap-Ihre Stamm-Komponente statt einer Kind-Komponente.

InformationsquelleAutor Szabolcs Dézsi

Die Lösung ist die Injektion zu starten.ts (bootloader-Datei)

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

bootstrap(AppComponent, [ROUTER_PROVIDERS]);

Dieser mein Problem gelöst.

InformationsquelleAutor Michael Horojanski

ich habe ein Problem "AUSNAHME: Kein provider für Router! (RouterLink -> Router)" und ich Erfolg habe voll das Problem beheben, indem Sie änderungen in boot.ts, Konfigurieren Sie Ihr boot.ts nach unten code und es funktioniert gut.

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

InformationsquelleAutor user2318652

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.