Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. TommyPA
    3. Posts
    T
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups

    Posts made by TommyPA

    • 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

      posted in Onsen UI
      T
      TommyPA