Is there a demo for Onsen2/Angular 1.5.x that works with Webpack/Browserify?

[Guest]

I have been trying to figure how to set this up properly, but I get the following errors on the browser console:

=====
Uncaught TypeError: Cannot read property ‘lock’ of undefined
setup.js:10147Uncaught TypeError: Cannot read property ‘prepare’ of undefinedutil.createElement @ setup.js:388
setup.js:9933Uncaught TypeError: Cannot read property ‘prepare’ of undefinedutil.createElement @ setup.js:388
setup.js:10147Uncaught TypeError: Cannot read property ‘prepare’ of undefined
setup.js:9933Uncaught TypeError: Cannot read property ‘prepare’ of undefined

if I add:

window.ons = require('onsenui/js/onsenui');

then nothing gets initialized and it shows a blank page.

Has anybody encounter these issues?

Sample Github demo with errors:
https://github.com/oocoder/onsenui-wp-demo

[Fran Diox]

@OOCoder Hello!

Most of these errors are fixed in gh#1294 , I tested your app with that PR.
However, window.ons is undefined when the bindings try to load so it still fails with Uncaught TypeError: Cannot read property ‘lock’ of undefined. I guess this is something related to Webpack configuration but unfortunately I don’t know too much about it. Perhaps @argelius has an idea?

frandiox created this issue in OnsenUI/OnsenUI

closed Import fix #1294

[Guest]

Thanks Fran. But if you set window.ons = require(‘onsenui/js/onsenui’), then it has access to the lock object, but then the screen is blank.

[munsterlander]

I posted this on SO: http://stackoverflow.com/questions/36048553/is-there-a-demo-for-onsen2-angular-1-5-x-that-works-with-webpack-browserify/36075715#36075715

I am unfamiliar with webpack, but adding Onsen to a project is really nothing more than adding some additional files to a standard html project. Some installer options are listed here: https://onsen.io/guide/getting_started.html

Also, to get started with browserify, see the docs here: https://onsen.io/2/

var onsen = require('onsenui/js/onsenui');

onsen.ready(function() {
  onsen.notification.alert({message: 'Onsen UI works with browserify!'});
});

So, if that is not working, I often recommend for people to get started by going here: https://monaca.io/cloud.html

Sign up for their free account which is to access their awesome cloud IDE. From there, just create a project and select the Onsen 2.0 Quickstart. After that you can export the project and import it into your favorite IDE. You are now setup to develop Onsen apps.

On a side note, I really recommend their cloud IDE. It has so many amazing features and it makes development a breeze. Plus they now have iOS app publishing for developers without access to a Mac. This is awesome!

[Guest]

Thanks @MUNSTERLANDER for replying to stackoverflow as well. The sample is fine if you have onsenui2 by it self. The problem is when you combine OnsenUI2 with AngularJS using webpack. There seem to be an issue with angular-onsenui.js bindings. Fran Diox #1294, was able to fix several issues with it but something still not right.

I setup a demo app in github which is configured with onsenui2/Angular 1.5.x and webpack that you can play around with in case your curious. https://github.com/oocoder/onsenui-wp-demo

[Guest]

Alright, thank you guys. I was able to resolve my issue by assigning ons to the global window object and waiting for Angular on ready event to run the onsenui bindings.

Use: onsenui@2.0.0-beta.7

[Fran Diox]

@OOCoder Thanks for sharing!