CODEWITHSUNDEEP
javascriptangulartypescriptangular2-routing
Vendicto
Vendicto

Reputation: 95

ORIGINAL EXCEPTION: No provider for Router! angular 2 RC5

Can't use this.router.navigate.

This is my: app.module.ts

    import {NgModule, NgModuleMetadataType}      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {FormsModule}    from '@angular/forms';
    import { HttpModule } from '@angular/http';
    ...
    import {routing} from "./app.routing";
    import {entry} from "./entry.component";
imports: [ 
        BrowserModule,
        FormsModule,
        routing,
        HttpModule,
    ],

Test component

import { Component } from '@angular/core';
import {HttpClient} from "./HttpClient.component";
import {Router} from "@angular/router-deprecated";

@Component({
    templateUrl: 'templates/entry.html'
})
export class entry {
    ...
    constructor(head:HeaderComponent, private httpClient: HttpClient, private router: Router) {
        this.httpClient = httpClient;
    }
    nav_test(){
        this.router.navigate(['search']);
    }
}

and app.routing

import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full',
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'search',
        component: SearchComponent

    }

];
export const routing = RouterModule.forRoot(appRoutes, {useHash: true});

and at end i have this error:

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in ./entry class entry_Host - inline template:0:0 ORIGINAL EXCEPTION: No provider for Router!

Thank you in advance!

Upvotes: 1

Views: 763

Answers (2)

Madhu Ranjan
Madhu Ranjan

Reputation: 17944

Issue is with your test component import,

you are using 

import {Router} from "@angular/router-deprecated";

you should be using,

import { Router } from '@angular/router';

Hope this helps!!

Upvotes: 1

Yakov Fain
Yakov Fain

Reputation: 12376

Not sure how the useHash: true works, but I specify the location strategy in @NgModule:

providers:[{provide: LocationStrategy, useClass: HashLocationStrategy}]

And I use the latest router, not the deprecated one.

The working RC.6 code samples are here: https://github.com/Farata/angular2typescript/tree/master/chapter3/router_samples

Upvotes: 0

Related Questions