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

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

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.