CODEWITHSUNDEEP
angularjsangularnativescript
George Edwards
George Edwards

Reputation: 9229

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

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 -

Upvotes: 2

Views: 3214

Answers (3)

Yevgen Lysenko
Yevgen Lysenko

Reputation: 11

Having exactly the same behavior. The only workaround to the moment seems to be leaving @angular/router at version 3.0.0-alpha.7

Upvotes: 0

Nabil.A
Nabil.A

Reputation: 629

I did upgrade last week to @angular/router": "3.0.0-alpha.7 from @angular/router-deprecated": "2.0.0-rc.2 and it went successfully.

Take a look at this NativeScript/sample-Groceries branch https://github.com/NativeScript/sample-Groceries/tree/angular-v3-router it has the rc3 upgrade commits.

Also removing platforms & tns_modules folders and upgrading (remove and install) tns globally might fix your issue.

Upvotes: 1

Dat Nguyen
Dat Nguyen

Reputation: 232

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)

Upvotes: 2

Related Questions