Angular + Onsen setImmediate error

[TommyPA]

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

[pootow]

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

[tompalan]

I am also experiencing this error, any help?

[emccorson]

This is a known bug that I have now fixed but not released. Hoping to release in the first half of April.

I’ll try to merge the fix tomorrow so you can use the master branch if you need the fix now.

[emccorson]

Fixed here:
https://github.com/OnsenUI/OnsenUI/pull/2735

It’s not released yet so if you need the fix now use master instead of the latest release.