添加路由后启动NativeScript白屏

Question

我正在用NativeScript编写我的第一个应用程序，而且我对前端开发不太熟悉。我刚开始，用两个按钮创建了一个简单的第一个屏幕。当按下按钮时，它应该导航到另一个屏幕。我已根据基本教程添加了一个Route，但现在该应用程序根本没有显示任何内容。我不知道如何调试问题或看到任何日志/错误可以帮助我找出问题所在。这是我的代码：

app.routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
   { path: "", redirectTo: "/home", pathMatch: "full" },
   { path: "home", loadChildren: "./home/home.module#HomeModule" },

];

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

家用路由module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { HomeComponent } from "./home.component";
import { MathComponent } from "../math/math.component";

const routes: Routes = [
    { path: "", component: HomeComponent },
    { path: "math", component: MathComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule { }

export const navigatableComponents = [
    MathComponent
];

home.component.html

<GridLayout>
    <ScrollView class="page">
        <StackLayout class="home-panel">
            <Label textWrap="true" text="Test" class="h2 description-label"></Label>
            <Button text="Math" (tap)="onMathTap()"></Button>
        </StackLayout>
     </ScrollView>
</GridLayout>

home.component.ts

import { Component, OnInit } from "@angular/core";
import { Router } from "@angular/router";

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ['./home.component.css']
})
 export class HomeComponent implements OnInit {

    onMathTap(): void {
        console.log("Math was pressed");
        this.router.navigate(["/math"])
    }


    constructor(private router: Router) { }

    ngOnInit(): void {
    }
}

app.modules.ts

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

Answer 1

你在AppComponent模板（html）中缺少<router-outlet></router-outlet>。 Official doc也指这个link

Answer 2

这个答案对我来说是解决方案：Component is not part of any NgModule or the module has not been imported into your module

我在home.module.ts中添加了我想在NgModules声明中导航到的组件。

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui- autocomplete/angular";
import { NativeScriptUIGaugeModule } from "nativescript-ui-gauge/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { HomeRoutingModule } from "./home-routing.module";
import { HomeComponent } from "./home.component";
import { MathComponent } from "../math/math.component";

@NgModule({
    imports: [
        NativeScriptUISideDrawerModule,
        NativeScriptUIListViewModule,
        NativeScriptUICalendarModule,
        NativeScriptUIChartModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIAutoCompleteTextViewModule,
        NativeScriptUIGaugeModule,
        NativeScriptCommonModule,
        HomeRoutingModule,
        NativeScriptFormsModule
    ],
    declarations: [
        HomeComponent,
        MathComponent,
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class HomeModule { }

按下按钮时的导航仍然无法正常工作，但至少应用程序正在启动。