Ionic3 lazy loading a Component in Page - lazy-loading

Question

I am working to an app that will be like a ppt presentation with a homepage, then slides(which are lazyloaded), each slide will have a navigation bar with: prev, home and next btn.
SO I thought: if that navigation will be common for all slides why not have it like a separate component, with a navCtrl and nextSLide will be transmitted like an #Input(), goHome- will be a seRoot() and back will be navCtrl.pop() - navPop directly in html. I will post code below :
slide1.ts
#IonicPage()
#Component({
selector: 'page-slide1',
templateUrl: 'slide1.html',
})
export class Slide1Page {
link:string = "Slide2Page"
}
slide1.htm
<ion-content padding>
<app-nav [toSlide]="link"></app-nav>
</ion-content>
nav.ts
#IonicPage()
#Component({
selector: 'app-nav',
templateUrl: 'nav.html'
})
export class NavComponent {
#Input() toSlide;
constructor(public navCtrl: NavController) {}
}
nav.html
<button class="nav_left" navPop></button>
<button class="to_home" (click)="goHome()"></button>
<button class="nav_right" [navPush]="toSlide"></button>
nav.module.ts I've made it IonicPagemodule
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { NavComponent } from './nav';
#NgModule({
declarations: [
NavComponent,
],
imports: [
IonicPageModule.forChild(NavComponent),
],
exports: [
NavComponent
]
})
export class NavComponentModule {}
When I navigate from homePage to slide1Page I got a long error(chunk of it here):
Uncaught (in promise): Error: Template parse errors: Can't bind to 'toSlide' since it isn't a known property of 'app-nav'. 1. If 'app-nav' is an Angular component and it has 'toSlide' input, then verify that it is part of this module. 2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
I want to know if my approach is good or doable, cuz I don't wanna spend time for nothing. Thanks!

Answer 1

Ok, so there error was because I didn't include NavCOmponent in slide1.module.ts
import { NavComponent } from './../../components/nav/nav';
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Slide1Page } from './slide1';
#NgModule({
declarations: [
Slide1Page,
NavComponent
],
imports: [
IonicPageModule.forChild(Slide1Page),
],
exports: [
Slide1Page,
NavComponent
]
})
export class Slide1PageModule {}
Still - is this a good approach?