OnsNavigator angular6 problem

[krism75]

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)

[emccorson]

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?

[krism75]

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');
  }
}

[krism75]

v4.2.3 seems to fix this issue

[krism75]

I have to re-open te case as it still exists in the lastest version.
Please advise!

[emccorson]

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.)