Angular2, RouteParams not working

Question

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

• ASP.NET Core 1.0 RC1
• Angular2, 2.0.0-beta.15
• TypeScript, 1.7.6.0

---

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.

---

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);
    }
}

Sweetening

Can you put the actual code – Tartu

RouteParams can only be injected in components that are added by the router. Otherwise what @kemsky said. Ensure that ROUTER_PROVIDERS are added only on the root component (or alternatively only in bootstra()) – Suchta

@GünterZöchbauer, please provide an answer as you are the one that is correct. The issue is that of the two subclass components, the one that errors out is not added by the router. – Sweetening

Answer 1

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())

Observant

The was certainly the "RouteParams can only be injected in components that are added by the router." I wish that was documented in the Angular2 docs. Thank you! – Sweetening

The router is still work-in-progress. I guess they don't want to spend too much time to document things that may change at any time. – Suchta

Are you familiar with any builtin way in Angular2 to parse a URL from a component that doesn't have a Router or RouteParams? I saw URLSearchParams but that seems to be only for query string. – Sweetening

I think it was mentioned recently that something like that might be added to Location – Suchta

Answer 2

Remove RouteParams from providers, injection should use inherited instance.

Well, check super call, it seems that parameters have wrong order, settings is redundant.

Mcknight

try adding ROUTER_PROVIDERS – Mcknight

Tried that too, followed all of the examples and spent a day searching the web for it. Nothing obvious is going to be the answer, I think there is a bug with the base class somehow? – Sweetening