Posts made by 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