2016-08-16 12 views
8

Mam do czynienia z problemem przy użyciu nowego routera Angular 2 RC5 (wersja routera to RC1).Angular 2 RC5: Brak dostawcy dla routera

Oto log otrzymuję od konsoli dev:

EXCEPTION: Error in /templates/app.component.html:2:0 
ORIGINAL EXCEPTION: No provider for Router! 

Oto co moi app.modules.ts wygląda następująco:

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { AppComponent } from './components/app.component'; 
import { routing } from './app.routes'; 

@NgModule({ 
    declarations: [AppComponent], 
    imports:  [BrowserModule, RouterModule, FormsModule, HttpModule, routing], 
    bootstrap: [AppComponent], 
}) 
export class AppModule {} 

Oto mój plik boot.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app.module'; 

platformBrowserDynamic().bootstrapModule(AppModule); 

Moi app.routes.ts plik ...

import { Routes, RouterModule } from '@angular/router'; 

// Components 
import { HomeComponent } from './components/home.component'; 

const routes: Routes = [ 
    // Root 
    { path: '/', name: 'Home', component: HomeComponent, useAsDefault: true}, 
]; 

// - Updated Export 
export const routing = RouterModule.forRoot(routes); 

... i mój plik app.component.ts:

import { Component, ViewContainerRef } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl: '/templates/app.component.html' 
}) 

export class AppComponent { 
    viewContainerRef: any; 

    public constructor(viewContainerRef:ViewContainerRef) { 
     // You need this small hack in order to catch application root view container ref 
     this.viewContainerRef = viewContainerRef; 
    } 
} 

Czy coś mi tu brakuje?

+1

"useAsDefault" nie jest już poprawną właściwością. Chciałbym również usunąć znak "/" na ścieżce i dodać do pliku index.html. –

+1

Należy również usunąć nazwę trasy. – SudarP

Odpowiedz

9

Wewnątrz app.routes.ts pliku:

Dodaj ten stan import

import { ModuleWithProviders } from '@angular/core'; 

niż

export const routing: ModuleWithProviders = RouterModule.forRoot(routes); 

to powinno działać.

+0

Hej @ EmanuelScarabin Dodawanie ModuleWithProviders nie naprawiono dla mnie. Mam "Brak dostawcy dla routera!" Błąd zaraz po dodaniu znacznika w app.component.html – SudarP

+1

@SudarP należy również sprawdzić, czy nie używasz "przestarzałego routera" w żadnym ze składników. To był drugi powód, dla którego spowodowałem tę kwestię. –

+0

@EmmanuelScarabin, Dziękuję bardzo za naprawienie tego. – SudarP