What am I missing so I can use the router on Nativescript?

Question

I am attempting to build my first ever app using nativescript. I am going through the docs but not sure what I'm missing so I can't fix it.

I have the following structure:

- app
-- app-routing.module.ts
-- app.component.html
-- app.component.ts
-- app.css
-- app.module.ts
- home
-- home.component.css
-- home.component.html
-- home.component.ts
- restaurant
-- restaurant.component.css
-- restaurant.component.html
-- restaurant.component.ts

The thing is, I am trying to make it so that when someone taps on an element in the home.component.html:

<Image class="h3 m-5" col="0" row="0" src="~/images/beet-logo.jpg" (tap)="visitRestaurant()" height="87" width="80"></Image>

They are redirected to the restaurant.component.html page.

I defined the tap event as shown up there and then I have on my home.component.ts the following:

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

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

    constructor(private router: Router) {
    }

    visitRestaurant() {
        this.router.navigate(["/restaurant"]);
    }

    ngOnInit(): void {
    }
}

When I click it, it fails though with the error:

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

I thought about adding the route here and also into app-routing.module.ts but whenever I try I get cannot find name: RestaurantComponent. So I assume I need to export the component somewhere but not sure where or how.

Can you guys help me?

This is my app-routing-module.ts in case it's useful:

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

Here's my restaurant.component.ts code:

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

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

    constructor(private router: Router) {
    }

    ngOnInit(): void {
    }
}

Answer 1

You need to add a route for /restaurant. For example, you might do:

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

Additionally, you'll want to make sure your export/import statements appear appropriately.

Within restaurant.component.ts:

@Component({ ... })
export class RestaurantComponent { ... }

Within app-routing.module.ts:

import { RestaurantComponent } from ' ... ';