添加路由后启动 NativeScript 白屏答案

【问题标题】：NativeScript white screen on launch after adding routing添加路由后启动 NativeScript 白屏
【发布时间】：2018-10-12 12:54:46
【问题描述】：

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

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 { }

home-routing-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 { }

【问题讨论】：

标签： angular2-nativescript

【解决方案1】：

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

【讨论】：

您能详细说明一下吗？我不确定我是否了解在何处以及如何添加它。谢谢。
您能否将<router-outlet></router-outlet> 添加为您的app.component.html 的第一行
添加到原始问题中。
你在app.component.html中添加了router outlet吗？还是不行？
它没有帮助。我已经在有效的解决方案下面发布了。谢谢你的帮助！我的代码仍然存在问题，当按下按钮时它没有导航到任何地方......

【解决方案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 { }

按下按钮时的导航仍然不适合我，但至少应用程序正在启动。

【讨论】：