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

问题描述

我正在使用 nativescript 和 angular 11.0.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 <[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"
      }
    }

这是我的 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",// { path: "items",component: ItemsComponent },// { path: "item/:id",component: ItemDetailComponent }
   
];

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

VSCode 中的项目结构

解决方法

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

import { RouterExtensions } from '@nativescript/angular'