CODEWITHSUNDEEP
angularjsionic-frameworkbrowserifybrowserify-shim
benek
benek

Reputation: 2178

How to use ionic with browserify?

I first tried to install ionic from npm and require it with 

require('ionic')

It does not work, the npm ionic version in bundled in an browserify unknown path.

Then I installed it from bower, and added some browser-shim :

package.json

      "browserify-shim": {
        "ionic": "ionic"
      },
      "browserify": {
       "transform": [
         "browserify-shim"
       ]
     },
      "browser": {
        "ionic": "./libs/ionic/release/js/ionic.js"
...

libs is my bower folder.

It looks like ionic is found by browserify. But I have the following ionic error:

Uncaught TypeError: Cannot read property 'navigator' of undefined

ionic.js is complaining that window object is null.

Do you know what I am missing for requiring correctly ionic ?

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <link rel="stylesheet" href="styles/ionbio.css" media="screen" title="no title" charset="utf-8"> -->
        <title>BIO by Ionic</title>
    </head>
    <body ng-controller="baseCtrl">
         <ion-side-menus>
             <h1 class="title">{{ionbio.title}}</h1>
         </ion-side-menus>

        <script src="js/main.js"></script>
    </body>
</html>

js/main.js

'use strict';
require('ionic');

Upvotes: 2

Views: 1251

Answers (1)

benek
benek

Reputation: 2178

The error is due to window object which is null. And this is because of babel who is adding at some points a "use strict".

"this" is then equal to undefined.

So I disabled babel transformation as a workaround.

Upvotes: 1

Related Questions