Nativescript cannot find module '@nativescript/angular/router'

Question

I am developing an app using nativescript and angular 11.0. For initial startup creating a login screen. Facing issues while running the application. Get the below exception. The issue happens only when routing is enabled in the module.

ERROR in ./app/login/login.component.ts
Module not found: Error: Can't resolve '@nativescript/angular/router' in 'D:\Mobile_dev\ns-ng-quiz\app-ns-ng\src\app\login'
     @ ./app/login/login.component.ts 3:0-64 5:0-51 40:113-132 78:38-57
     @ ./app/app.module.ts
     @ ./main.ts

ng update says everything is in order. Deleting node_modules folder and a fresh npm install did not help either.

Here is my package.json

{
      "name": "@nativescript/template-hello-world-ng",
      "main": "main.js",
      "version": "7.0.8",
      "author": "NativeScript Team <[email protected]>",
      "description": "NativeScript Application",
      "license": "SEE LICENSE IN <your-license-filename>",
      "publishConfig": {
        "access": "public"
      },
      "keywords": [
        "nativescript",
        "mobile",
        "angular",
        "{N}",
        "template"
      ],
      "repository": {
        "type": "git",
        "url": "<fill-your-repository-here>"
      },
      "bugs": {
        "url": "https://github.com/NativeScript/NativeScript/issues"
      },
      "dependencies": {
        "@angular/animations": "~11.0.0",
        "@angular/common": "~11.0.0",
        "@angular/compiler": "~11.0.0",
        "@angular/core": "~11.0.0",
        "@angular/forms": "~11.0.0",
        "@angular/platform-browser": "~11.0.0",
        "@angular/platform-browser-dynamic": "~11.0.0",
        "@angular/router": "~11.0.0",
        "@nativescript/angular": "~11.0.0",
        "@nativescript/core": "~7.0.0",
        "@nativescript/theme": "~3.0.0",
        "reflect-metadata": "~0.1.12",
        "rxjs": "^6.6.0",
        "zone.js": "~0.11.1"
      },
      "devDependencies": {
        "@angular/compiler-cli": "~11.0.0",
        "@nativescript/android": "7.0.1",
        "@nativescript/types": "~7.0.0",
        "@nativescript/webpack": "~3.0.0",
        "@ngtools/webpack": "~11.0.0",
        "typescript": "~4.0.0"
      },
      "private": "true",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      }
    }

Here is my app-routing.module.ts

import { LoginComponent } from './login/login.component';
import { HomeComponent } from './home/home.component';
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";

import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";

const routes: Routes = [
    
    {path: "", redirectTo: "/login", pathMatch: "full" },
    {path:"login", component:LoginComponent},
    {path:"home", component:HomeComponent}
   //{ path: "", redirectTo: "/items", pathMatch: "full" },
   // { path: "items", component: ItemsComponent },
   // { path: "item/:id", component: ItemDetailComponent }
   
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes,{
        enableTracing:true
    })],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Project Structure in VSCode

William Juan · Accepted Answer · 2020-12-31 06:50:52Z

1

You should be able to import both RouterExtensions for navigation and NativeScriptRouterModule in the module from @nativescript/angular instead of the previous @nativescript/angular/router path.

import { RouterExtensions } from '@nativescript/angular'

answered Dec 31, 2020 at 6:50

William Juan

1,4151 gold badge9 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anto Over a year ago

After importing the '@antivescript/angular' the issue resolved. The next thing coming in place the navigation not working as expected. There is no exception caught in the terminal. The below code used for navigating another component from my login screen. this.routerExtensions.navigate(["../home"],{ clearHistory: true });

Anto Over a year ago

By adding the below code in my app.component.html. The component navigation is working as expected. <page-router-outlet actionBarVisibility="never"></page-router-outlet>

Collectives™ on Stack Overflow

Nativescript cannot find module '@nativescript/angular/router'

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related