angularangular2-routingtypescript1.7

Angular2, RouteParams not working

I'm getting a error that is currently causing lots of frustration. Here's what I running with:

The error(s):

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
Attempting redirect to: /Design/0DEAC46A-7F58-49F9-B67E-2C187DFA49A7/
Navigated to http://localhost:5000/
EXCEPTION: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
STACKTRACE:
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.
    at resolvePromise (angular2-polyfills.js:602)
    at angular2-polyfills.js:638
    at ZoneDelegate.invokeTask (angular2-polyfills.js:423)
    at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.js:2118)
    at ZoneDelegate.invokeTask (angular2-polyfills.js:422)
    at Zone.runTask (angular2-polyfills.js:320)
    at drainMicroTaskQueue (angular2-polyfills.js:541)
    at XMLHttpRequest.ZoneTask.invoke (angular2-polyfills.js:493)
Unhandled Promise rejection: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable. ; Zone: angular ; Task: Promise.then ; Value: NoAnnotationError {message: "Cannot resolve all parameters for 'RouteParams'(?)… that 'RouteParams' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'RoutePar…//localhost:5000/js/angular2/angular2.js:9448:46)"}
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.(…)
Unhandled Promise rejection: Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable. ; Zone: <root> ; Task: Promise.then ; Value: NoAnnotationError {message: "Cannot resolve all parameters for 'RouteParams'(?)… that 'RouteParams' is decorated with Injectable.", stack: "Error: Cannot resolve all parameters for 'RoutePar…//localhost:5000/js/angular2/angular2.js:9448:46)"}
Error: Uncaught (in promise): Cannot resolve all parameters for 'RouteParams'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RouteParams' is decorated with Injectable.(…)

I have an abstract base class that has two subclasses, acting as Angular2 components. Each have a constructor that takes the RouteParams instance. Subclass one works just fine, but subclass two fails to load with the error message above.

The RouteDefinition is actually an AsyncRoute that is defined with a path like so: path: '/:appId/:customerId/'

Here is a screen capture from an error thrown in Angular when it attempts to reflect on RouteParams.

enter image description here

Base class:

import {Component, OnInit} from "angular2/core";
import {RouteParams, Location} from "angular2/router";
import {CustomerService} from "../../shared/services/customer.service";

@Component({
    providers: [CustomerService]
})

export abstract class BaseCustomerSelectorComponent implements OnInit {
    protected params: RouteParams;

    constructor(private customerService: CustomerService,
                private routeParams: RouteParams,
                private ngLocation: Location) {
        this.params = routeParams;
    }

    ngOnInit() {
        // omitted..
    }
}

Subclass Two:

import {Component} from "angular2/core";
import {RouteParams, Location} from "angular2/router";
import {BaseCustomerSelectorComponent} from "../../shared/components/base-customer-selector.component";
import {CustomerService} from "../../shared/services/customer.service";

@Component({
    selector: "customer-selector",
    templateUrl: "app/shell/templates/customer-selector.html",
    styleUrls: ["app/shell/styles/customer-selector.css"],
    providers: [CustomerService, Settings, RouteParams]
})

export class CustomerSelectorComponent extends BaseCustomerSelectorComponent {
    constructor(customerService: CustomerService,
                routeParams: RouteParams,
                ngLocation: Location) {
        super(customerService, routeParams, ngLocation);
    }
}
Solution

  • RouteParams can only be injected in components that are added by the router.

    In other components you can inject the Router and subscribe to it`

      constructor(private router:Router) {
    router.subscribe(route => {
      console.debug(this.router.currentInstruction.component.params);
    });
  }

    Otherwise what @kemsky said.

    Ensure that ROUTER_PROVIDERS are added only on the root component (or alternatively only in bootstrap())