15
votes

I'm trying to inject ActivatedRoute component into my component to access the ID of the object I'm editing (or to find out, there's no ID param, new object is created).

I've created only the template for the component, and when I load start page (not event the page with the component I want to use) I get the following error:

Error: (SystemJS) Can't resolve all parameters for ActivatedRoute: (?, ?, ?, ?, ?, ?, ?, ?).

This is my code:

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

import { ActivatedRoute} from "@angular/router";

@Component({
    selector: 'my-edit',
    templateUrl: './templates/my-edit.htm',
    providers: [ActivatedRoute]
})

export class MyEditComponent implements OnInit {

    constructor(private route : ActivatedRoute){
        console.log(route.params)
    }

    ngOnInit() : void {
    }

}

It's based on the code from example from AngularJS site (Heroes), and I really don't get where's the problem here... Can't I import ActivatedRoute into Component, or I need something extra to be able to import it?

My routing configuration is:

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

where routes are the collection of routes, just like in angular example, and AppRoutingModule is imported in app.module.

2
Did you provide Router.forRoot() at the AppModule?Günter Zöchbauer
And don't add the ActivatedRoute to the @Component.providersPaul Samsotha
@peeskillet it seems to be that, I've got it wrong, I thought .providers are necessary to inject params into constructor9ilsdx 9rvj 0lo

2 Answers

26
votes

Remove providers: [ActivatedRoute] from @Component() there is no need for that. RouterModule.forRoot() already provides everything that is required.

2
votes

To extend @günter-zöchbauer's answer. Make sure that you added RouterModule to property exports of @NgModule. Directives/pipes/modules specified in exports will be

used within the template of any component that is part of an Angular module that imports this Angular module.

i.e. in all child components of the module.