I was using v4.2.1, but now upgraded to v4.2.2. But the error stays.
The error is in ‘omgevingenpage-component’ but the ons-navigator directive is in the app.component.html page. Below is some code. I stripped out some code to make it more simple.
omgevingenpage-component.ts;
import { OnInit } from '@angular/core';
import {
Component,
OnsenModule,
OnsNavigator,
CUSTOM_ELEMENTS_SCHEMA
} from 'ngx-onsenui';
import { MenuService } from '../menu.service';
import { OmgevingpageComponent } from '../omgevingpage-component/omgevingpage.component';
import { OmgevingserverinfoComponent } from '../omgevingserverinfo-component/omgevingserverinfo.component';
@Component({
selector: 'ons-page',
templateUrl: './omgevingenpage.component.html',
styleUrls: ['./omgevingenpage.component.css']
})
export class OmgevingenpageComponent implements OnInit {
page = OmgevingenpageComponent;
constructor(private menuService: MenuService, private _navigator:OnsNavigator) { }
openMenu() {
this.menuService.open();
}
push() {
this._navigator.element.pushPage(OmgevingpageComponent, { data: { omgeving: "TEST1" } });
}
ngOnInit() {
}
serverInfoClicked(id) {
alert(id);
}
}
omgevingenpage-component.html:
<div class="content">
<!--<ons-navigator swipeable [page]="page"></ons-navigator>-->
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
<div style="text-align: center; margin: 10px">
<ons-button (click)="push(navi)">push</ons-button>
</div>
</div>
app.component.html
<ons-splitter #splitter>
<ons-splitter-side [page]="sidePage" side="left" width="220px" collapse swipeable>
</ons-splitter-side>
<ons-splitter-content [page]="contentPage">
<ons-navigator [page]="contentPage" swipeable>
</ons-navigator>
</ons-splitter-content>
</ons-splitter>
app.component.ts
import { OnInit } from '@angular/core';
import { SwUpdate } from '@angular/service-worker';
import { config } from 'rxjs';
import {
Component,
Injectable,
ViewChild,
OnsenModule,
NgModule,
CUSTOM_ELEMENTS_SCHEMA
} from 'ngx-onsenui';
import { OmgevingenpageComponent } from './omgevingenpage-component/omgevingenpage.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
contentPage = OmgevingenpageComponent;
@ViewChild('splitter') splitter;
title = 'Lv Dashboard';
constructor(private swUpdate: SwUpdate) { }
ngOnInit() {
if (this.swUpdate.isEnabled) {
this.swUpdate.available.subscribe(() => {
if (confirm("Nieuwe versie beschikbaar, wil je deze laden?")) {
window.location.reload();
}
});
}
Notification.requestPermission(function (status) {
console.log('Notification permission status:', status);
});
}
openMenu() {
alert('OK');
}
}
