javascriptangularjsgulpbreezewiredep

How to add breeze.bridge.angular to my build process with wiredep


I'm trying to use Breeze with my AngularJs application.

I added breeze to my bower dependencies using:

bower install --save-dev breeze-client

This command added the dependency to my bower.json file as follows:

"dependencies": {
   //Other dependencies here
   "breeze-client": "~1.5.4"
}

The thing is that I'm using wiredep with gulp to automate my build process, but when wiredep adds my dependencies it only injects the breeze.debug.js file as follows:

<script src="/bower_components/breeze-client/breeze.debug.js"></script>

Therefore, when I add this dependency to my core module in Angular it doesn't find the 'breeze.angular' module dependency

(function () {
'use strict';

    angular
         .module('app.core', ['breeze.angular']);
})();

// This is the thrown error
// Error: [$injector:modulerr] Failed to instantiate module breeze.angular due to:
// Error: [$injector:nomod] Module 'breeze.angular' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I know this is the error because when I add this reference manually, it works perfectly.

So my final question is: how can I add (after the breeze.debug.js dependency) the breeze.bridge.angular.js dependency located in the build/adapters folder using wiredep?


Solution

  • I managed to achieve this by editing my bower.json file. Overriding my breeze angular main dependency as follows:

    bower.json file

    "overrides": {
        "breeze-client": {
            "main": ["breeze.debug.js", "build/adapters/breeze.bridge.angular.js"],
        }
    }
    

    This way I am referencing the main file and then the breeze.bridge.angular.js file. Now my bower dependencies are added as I need:

    <!-- bower:js -->
    // Previous dependencies
    <script src="/bower_components/breeze-client/breeze.debug.js"></script>
    <script src="/bower_components/breeze-client/build/adapters/breeze.bridge.angular.js"></script>
    <!-- endbower -->
    

    Now everything is working perfectly