NativeScript Angular: ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'addpatient'

Question

So I just want my fab button in my home.component.ts to route to my addpatient.component. using tabs scaffolding, and placed my addpatient folder inside of the home folder. this is what my directory looks like:

app directory
rest of app directory

I'm really new to this so I feel like I'm just missing something really simple

home.component.ts

import { Component, OnInit, ViewContainerRef, NgModule } from 
"@angular/core";
var Sqlite = require("nativescript-sqlite");
import { registerElement } from "nativescript-angular/element-registry";
import { Fab } from "nativescript-floatingactionbutton";

import { AddPatientComponent } from "./addpatient/addpatient.component";

import { Router } from "@angular/router";
registerElement("Fab", () => Fab);


@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {
    constructor(private router: Router){}

    public redirectAddPatient(){
        this.router.navigate(["addpatient]);
    }
}

home.component.html

<FAB row="1" (tap)="redirectAddPatient()" icon="res://ic_plus_white" rippleColor="#f1f1f1" class="fab-button"></FAB>

addpatient.component.ts

import { Component } from "@angular/core";
import { Patient } from "./../../objects/patient.module"
import { NativeScriptRouterModule } from "nativescript-angular/router";

@Component({
    selector: "addpatient",
    moduleId: module.id,
    templateUrl: "./addpatient.component.html"
})

export class AddPatientComponent {
    public lastname: string;

    ngOnInit(): void{
        let patient = new Patient();

        patient.setLastName(this.lastname);
        console.log("lastname: ", patient.getLastName());
    }
}

app.routing.ts

import { AddPatientComponent } from 
"./tabs/home/addpatient/addpatient.component";
import { HomeComponent } from "./tabs/home/home.component";

export const appRoutes: any = [
    {path: "", component: HomeComponent},
    {path: "addpatient", component: AddPatientComponent}
];

export const appComponents: any = [
    HomeComponent,
    AddPatientComponent
];

main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { appComponents, appRoutes } from "./app.routing";

@NgModule({
    declarations: [AppComponent, ...appComponents],
    bootstrap: [AppComponent],
    imports: [
        NativeScriptRouterModule,
        NativeScriptRouterModule.forRoot(appRoutes)
    ],
})

class AppComponentModule {

}

platformNativeScriptDynamic().bootstrapModule(AppModule);

Answer 1

首先，您的this.router.navigate(["addpatient*here*]); redirectAddPatient()中缺少引号： this.router.navigate(["addpatient*here*]);其次，您要引导的模块是AppModule，而不是AppComponentModule。我建议添加将AppComponentModule声明并导入到AppModule中，并完全删除AppComponentModule，因为它没有任何用途（据我所知）。