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