Nativescript cannot find module '#nativescript/angular/router' - angular-ui-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'