WARNING: Tried to load angular more than once. Angular + Ionic + Require JS

Question

I'm building an hybrid app using ionic. Inside this app I decided to have Require.js as a dependency loader (maybe not the best choice but I'm used to work with that and since I have lots of projects is easier for me to have a unique standard for WebApps and Apps).

The problem is that in my main.js I require angular and ionic (ionic.bundle) one after the other and Ionic, since it has its own angular implementation, tries to load Angular even if it's already loaded.

It's not a breaking thing, it's just a Log, but I would like to understand how to make it disappear and a best way.

This is my main.js

 require.config({ paths: { "angular": "../bower_components/angular/angular.min", "ionic": "../bower_components/ionic/release/js/ionic.bundle.min", "angular-animate": "../bower_components/angular-animate/angular-animate.min", "angular-touch": "../bower_components/angular-touch/angular-touch.min", "angular-cookies": "../bower_components/angular-cookies/angular-cookies.min", "angular-aria": "../bower_components/angular-aria/angular-aria.min", "angular-material": "../bower_components/angular-material/angular-material.min", "angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router.min", "angular-modal-service": "../bower_components/angular-modal-service/dst/angular-modal-service.min", text: "../bower_components/text/text", "angular-file-model": "../bower_components/angular-file-model/angular-file-model.min", "moment": "../bower_components/moment/min/moment.min", "angular-moment": "../bower_components/angular-moment/angular-moment.min", "moment-it": "../bower_components/moment/locale/it", }, shim: { angular: { exports: "angular" }, ionic: { deps: ["angular", "angular-aria", "angular-animate"], exports: "ionic" }, "angular-ui-router": ["angular"], "angular-modal-service": ["angular"], "angular-file-model": ["angular"], "angular-cookies": ["angular"], "angular-moment" : [ "angular", "moment", ], "moment-it": ["moment"], "angular-animate": ["angular"], "angular-aria": ["angular"], "angular-touch": ["angular"], "angular-material": ["angular", "angular-animate", "angular-aria"] } }); require([ "angular", "./dependencies", "./configs/configs", "./services/services", "./states/states", "./directives/directives", // "./dialogs/dialogs", "./toasts/toasts", ], function(angular) { "use strict"; var modules = Array.prototype.slice.call(arguments, 1).map(function(module) { return module.name; }); angular.module("app", modules); angular.bootstrap(document, ["app"]); }); 

Answer 1

I resolved changing my main.js in the following way:

I called "angular" the ionic.bundle.js. Don't forget to still include ionic as an angular dependency

 require.config({ paths: { //"angular": "../bower_components/angular/angular.min", "angular": "../bower_components/ionic/release/js/ionic.bundle.min", "angular-animate": "../bower_components/angular-animate/angular-animate.min", "angular-cookies": "../bower_components/angular-cookies/angular-cookies.min", "angular-aria": "../bower_components/angular-aria/angular-aria.min", "angular-material": "../bower_components/angular-material/angular-material.min", "angular-ui-router": "../bower_components/angular-ui-router/release/angular-ui-router.min", "angular-modal-service": "../bower_components/angular-modal-service/dst/angular-modal-service.min", text: "../bower_components/text/text", "angular-file-model": "../bower_components/angular-file-model/angular-file-model.min", "moment": "../bower_components/moment/min/moment.min", "angular-moment": "../bower_components/angular-moment/angular-moment.min", "moment-it": "../bower_components/moment/locale/it", }, shim: { angular: { exports: "angular" }, "angular-ui-router": ["angular"], "angular-modal-service": ["angular"], "angular-file-model": ["angular"], "angular-cookies": ["angular"], "angular-moment" : [ "angular", "moment", ], "moment-it": ["moment"], "angular-animate": ["angular"], "angular-aria": ["angular"], "angular-material": ["angular", "angular-animate", "angular-aria"] } }); require([ "angular", "./dependencies", "./configs/configs", "./services/services", "./states/states", "./directives/directives", // "./dialogs/dialogs", "./toasts/toasts", ], function(angular) { "use strict"; var modules = Array.prototype.slice.call(arguments, 1).map(function(module) { return module.name; }); angular.module("app", modules.concat(["ionic"])); angular.bootstrap(document, ["app"]); });