Nativescript 找不到模块“@nativescript/angular/router”

Question

我正在使用 nativescript 和 angular 11.0 开发应用程序。对于初始启动创建登录屏幕。运行应用程序时遇到问题。获取以下异常。只有在模块中启用路由时才会出现此问题。

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 表示一切正常。删除 node_modules 文件夹并重新安装 npm 也无济于事。

这是我的 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"
      }
    }

这是我的 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 { }

VSCode 中的项目结构

Answer 1

您应该能够从@nativescript/angular 导入模块中的RouterExtensions 导航和NativeScriptRouterModule，而不是之前的@nativescript/angular/router 路径。

import { RouterExtensions } from '@nativescript/angular'