Monaca Onsen UI Discord Chat Github Repo

Angular + Onsen setImmediate error



  • Hi - I’m new to Onsen and Angluar. Just trying to get a blank program to work with a browser that says “test.” I have a brand new project started clean with

    ng new new-project
    

    I follow the guide for Angular 2 + Onsen and install onsen

    npm install onsenui ngx-onsenui --save
    

    I add the necessary modifications to app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    
    import { OnsenModule } from 'ngx-onsenui';
    import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AppRoutingModule,
        OnsenModule
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    

    I add the modification to angular.json

    "styles": [
      "node_modules/onsenui/css/onsenui.css",
      "node_modules/onsenui/css/onsen-css-components.css",
      "src/styles.css"
    ],
    

    And…then Compile with ng serve to see what I get. Now before all of these modifications I tested the ng serve command on the newly generated new app and it works and serves a page I can see.

    When I compile and serve with these changes I successfully compile however nothing is visible in the web browser. Looking at the console I get the following run-time error:

    onsenui.js:1073 Uncaught ReferenceError: setImmediate is not defined
        at Object.push../node_modules/onsenui/js/onsenui.js.internal$1.waitDOMContentLoaded (onsenui.js:1073)
        at onsenui.js:1125
        at onsenui.js:4
        at Object../node_modules/onsenui/js/onsenui.js (onsenui.js:7)
        at __webpack_require__ (bootstrap:79)
        at Module../node_modules/ngx-onsenui/directives/ons-navigator.js (ons-navigator.js:1)
        at __webpack_require__ (bootstrap:79)
        at Module../node_modules/ngx-onsenui/ngx-onsenui.js (ngx-onsenui.js:1)
        at __webpack_require__ (bootstrap:79)
        at Module../src/app/app.module.ts (app.component.ts:8)
    push../node_modules/onsenui/js/onsenui.js.internal$1.waitDOMContentLoaded @ onsenui.js:1073
    (anonymous) @ onsenui.js:1125
    (anonymous) @ onsenui.js:4
    ./node_modules/onsenui/js/onsenui.js @ onsenui.js:7
    __webpack_require__ @ bootstrap:79
    ./node_modules/ngx-onsenui/directives/ons-navigator.js @ ons-navigator.js:1
    __webpack_require__ @ bootstrap:79
    ./node_modules/ngx-onsenui/ngx-onsenui.js @ ngx-onsenui.js:1
    __webpack_require__ @ bootstrap:79
    ./src/app/app.module.ts @ app.component.ts:8
    __webpack_require__ @ bootstrap:79
    ./src/main.ts @ environment.ts:16
    __webpack_require__ @ bootstrap:79
    0 @ main.ts:12
    __webpack_require__ @ bootstrap:79
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1
    

    I can’t figure out how to get past this. If anyone can help me I’d really really appreciate it!

    Thanks Kindly,
    Tom



  • Any update? I’m still experiencing this error today.