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 <oss@nativescript.org>",
      "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

Answer 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'