Failed to find module: "@angular/router/common_router_providers" error with angular router upgrade

Question

I am trying to upgrade my nativescript application to use the new Angular Router, however, I get the following error message:

java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Failed to find module: "@angular/router/common_router_providers", relative to: /app/tns_modules/
    at android.app.ActivityThread.handleBindApplication(ActivityThread.java:4710)
    at android.app.ActivityThread.-wrap1(ActivityThread.java)
    at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1405)
    at android.os.Handler.dispatchMessage(Handler.java:102)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:5417)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
Caused by: com.tns.NativeScriptException: Failed to find module: "@angular/router/common_router_providers", relative to: /app/tns_modules/
    at com.tns.Module.resolvePathHelper(Module.java:220)
    at com.tns.Module.resolvePath(Module.

in my main.ts I have:

import {nativeScriptBootstrap} from "nativescript-angular/application";
import {AppComponent} from "./app.component";
import {APP_ROUTER_PROVIDERS} from "./app.routes";

nativeScriptBootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

then in my app.routes.ts I have:

import {RouterConfig} from '@angular/router';
import {nsProvideRouter} from "nativescript-angular/router";
import {HomePage} from "./Components/Home/home.component";
import {Bottles} from "./Components/BottleList/bottleList.component";

const routes: RouterConfig = [
    { path: "", redirectTo: "/home", terminal: true },
    { path: "home", component: HomePage },
    { path: "bottles", component: Bottles },
];

export const APP_ROUTER_PROVIDERS = [
    nsProvideRouter(routes, {enableTracing: false })
];

then my app.component.ts:

import {Component, OnInit} from "@angular/core";
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";

@Component({
  selector: "main",
  directives: [NS_ROUTER_DIRECTIVES],
  template: "<page-router-outlet></page-router-outlet>"
})

export class AppComponent implements OnInit {
  page: Page;
}

Any ideas what I have done wrong?

Update:

I am using -

tns-android: 2.1.1
@angular/common: 2.0.0-rc.4
@angular/router: 3.0.0-beta.2
nativescript-angular: 0.2.0
tns-core-modules: 2.1.0
nativescript (global): 2.1.1
node (global): 4.4.7

Did I see correctly that you got this resolved via GitHub or Slack? Was this an issue with a conflict or some missing API's in the latest router with Angular rc4? — HK1
@HK1 nope, I am still facing this... The issue I saw says they resolved it be using a previous version of the router but that hasn't worked for me... — George Edwards
Can you post which versions of tns, angular, and angular router your project uses? Maybe just post the whole contents of your packages.json file. — HK1
@HK1 Sure, please see above (my package.json file is pretty long, so I only added the bits I think are relevant). All other angular bits are -rc.4 and I tried using @angular/[email protected]but I got the same result ... — George Edwards

Dat Nguyen Dat Nguyen · Accepted Answer · 2016-07-11T14:06:13

I found something but it's only a workaround : by using all the rc3 version of the angular2 component (except router (3.0.0-alpha.7) and router-deprecated (2.0.0-rc.2)), it works. But you need to add some changes in your files too (check here)

Failed to find module: "@angular/router/common_router_providers" error with angular router upgrade

Update:

3 Answers