Angular - RouteParams

Question

I am currently testing Angular Alpha 45, escpecially the Routing, and got problems by implementing routing with parameters. I have created a component for my detail view of one specific entity.

@Component({
    templateUrl: 'app/components/projekt/projekt.detail.html',
    directives: [FORM_DIRECTIVES]
})
export class ProjektDetailComponent {
    id: string;
    constructor(params: RouteParams){
        this.id = params.get('id');
    }   
}

The template is looking like this, just display the parameter "id": <h1>Projekt Details: {{id}}</h1> The RouteConfig looks like this:

@RouteConfig([
  { path: '/', component: StartComponent, as:'Start'} ,
  { path: '/projekte', component: ProjektOverviewComponent, as:'Projekte'},
  { path: '/projekte/:id', component: ProjektDetailComponent, as:'ProjektDetail'},
  { path: '/projekte/neu', component: NeuesProjektComponent, as:'ProjektNeu'}    
])

The Link and the RouteConfig, which is displayed above, are like the examples in the angular documentation. <a [router-link]="['/ProjektDetail', {'id': '1'}]" class="btn btn-default">Details</a>

So when I navigate to the detail view (e.g. 127.0.0.1:8080/src/#/projekte/1) I get the following error, which is displayed in the console of my browser(I've tested with Edge, Firefox 42, Chrome 46):

EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or annotations.


    18:25:41.376 EXCEPTION: Cannot resolve all parameters for ProjektDetailComponent(?). Make sure they all have valid type or    annotations.1 angular2.dev.js:21984:9
BrowserDomAdapter</BrowserDomAdapter.prototype.logError() angular2.dev.js:21984
BrowserDomAdapter</BrowserDomAdapter.prototype.logGroup() angular2.dev.js:21995
ExceptionHandler</ExceptionHandler.prototype.call() angular2.dev.js:4426
PlatformRef_</PlatformRef_.prototype._initApp/</<() angular2.dev.js:19685
NgZone</NgZone.prototype._notifyOnError() angular2.dev.js:10746
NgZone</NgZone.prototype._createInnerZone/errorHandling.onError() angular2.dev.js:10654
run() angular2.dev.js:141
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669
zoneBoundFn() angular2.dev.js:111
lib$es6$promise$$internal$$tryCatch() angular2.dev.js:1507
lib$es6$promise$$internal$$invokeCallback() angular2.dev.js:1519
lib$es6$promise$$internal$$publish() angular2.dev.js:1490
[4]</</</<() angular2.dev.js:219
NgZone</NgZone.prototype._createInnerZone/<.$scheduleMicrotask/</microtask() angular2.dev.js:10701
run() angular2.dev.js:138
NgZone</NgZone.prototype._createInnerZone/<.$run/<() angular2.dev.js:10669
zoneBoundFn() angular2.dev.js:111
lib$es6$promise$asap$$flush() angular2.dev.js:1301

Do you have any suggestions?

Solution 1

As @EricMartinez mentioned you have to import RouteParams correctly. I was playing with my plunker and was getting the exact same errors.

I realized I was importing from 'angular2/angular2' and needed to import from 'angular2/router'

Here is a plunker that does exactly what you are looking for but with a "cars" component. Plunker

Solution 2

I also got same problem when injecting my DataService & RouteParams and had to use @Inject in constructor. Here is what I did.

import {Component, Inject, View} from 'angular2/angular2';
import {RouteParams} from 'angular2/router';

@Component({
    selector: 'about'
})
@View({
    template: 'This is {{id}} about page {{name}}'
})
export class AboutComponent
{
    name: string = "Sandeep";
    id: number;
    constructor( @Inject(RouteParams) params: RouteParams)
    {
        this.id = +params.get('id');
    }
}

Hope it will help you.

Solution 3

In case of angular-2.rc3+, you can use this snippet.

post.component.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component(
   selector: 'projekte'
)
export class ProjekteComponent {
    private id: string;
    constructor(private route: ActivatedRoute) {
    }

    private sub;
    ngOnInit() {
        this.sub = this.route.params.subscribe(params => {
            this.id = params['id'];
        });
    }
    ngOnDestroy() {
        this.sub.unsubscribe();
    }
}

app.routes.ts

export const routes: RouterConfig = [
    { path: 'projekte/:id', component: ProjekteComponent }
];
export const appRouterProviders = [
    provideRouter(routes);
];

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
    appRouterProviders
]);

Hope this help!

Solution 4

It does not have to do with the issue you had, but its worth saying that you will face the same problem when migrating to Angular2 RC3 ou higher. The Route has changed completely, so your Component will fail again throwing the same exception.

In RC3 or above you will need to rewrite your routes WITHOUT names and your component will need to import ActivatedRoute from '@angular/router' in order to read your parameters. See:

constructor(private activatedRoute: ActivatedRoute) {

     this.activatedRoute.params.subscribe(params => {
            this.categoryUrl = params['categoryUrl'];

}

View more solutions

Comments

[Val Redchenko]

I'm curious if it's mandatory to unsubscribe in onDestroy or if recent versions of Angular handle it for us?