Monaca Onsen UI Discord Chat Github Repo

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)
    

  • administrators

    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!


  • administrators

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