OnsNavigator angular6 problem
-
I want to use OnsNavigator with angular 6. But wathever I try, I can’t get it to work.
If I use OnsNavigator in the constructor of my pagecomponent I get:
zone.js:665 Unhandled Promise rejection: StaticInjectorError(AppModule)[OmgevingenpageComponent -> OnsNavigator]: StaticInjectorError(Platform: core)[OmgevingenpageComponent -> OnsNavigator]: NullInjectorError: No provider for OnsNavigator! ; Zone: <root> ; Task: Window.addEventListener:message ; Value: Error: StaticInjectorError(AppModule)[OmgevingenpageComponent -> OnsNavigator]: StaticInjectorError(Platform: core)[OmgevingenpageComponent -> OnsNavigator]: NullInjectorError: No provider for OnsNavigator! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979) at resolveToken (core.js:1232) at tryResolveToken (core.js:1182) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077) at resolveToken (core.js:1232) at tryResolveToken (core.js:1182) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077) at resolveNgModuleDep (core.js:9217) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9911) at resolveDep (core.js:10276) Error: StaticInjectorError(AppModule)[OmgevingenpageComponent -> OnsNavigator]: StaticInjectorError(Platform: core)[OmgevingenpageComponent -> OnsNavigator]: NullInjectorError: No provider for OnsNavigator! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (http://localhost:8080/vendor.js:33005:19) at resolveToken (http://localhost:8080/vendor.js:33258:24) at tryResolveToken (http://localhost:8080/vendor.js:33208:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:8080/vendor.js:33103:20) at resolveToken (http://localhost:8080/vendor.js:33258:24) at tryResolveToken (http://localhost:8080/vendor.js:33208:16) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (http://localhost:8080/vendor.js:33103:20) at resolveNgModuleDep (http://localhost:8080/vendor.js:41243:29) at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (http://localhost:8080/vendor.js:41937:16) at resolveDep (http://localhost:8080/vendor.js:42302:45)
-
What version of
ngx-onsenui
are you using? Angular 6 support is only available from v4.2.1 (latest is v4.2.2) so it could just be that.If the version isn’t the problem, could you post code that reproduces the problem please?
-
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'); } }
-
v4.2.3 seems to fix this issue
-
I have to re-open te case as it still exists in the lastest version.
Please advise!
-
I checked the OnsenUI internal Navigator example with Angular 6 and it seems to be working fine. Have a look here: https://github.com/OnsenUI/OnsenUI/tree/master/bindings/angular2/examples
If you are still having issues, can you create a codepen that reproduces the issue so I can take a look? (Unfortunately you can’t use Onsen UI Playground for this because it is not running Angular 6 yet.)