Can I remove ionic-angular.js and just use stock angular.js (same version)?

ionic-v1
1

I’m rewriting the gulpfile.js to add minification, concatenation, and all that good stuff.

I’m using the main-bower-files gulp plugin which will scan your dependencies in bower.json and you can process them all into a single concatenated, uglified file with source maps like this:

var gulp = require('gulp'),
  cache = require('gulp-cached'),
  gulpFilter = require('gulp-filter'),
  jsFilter = gulpFilter(['*.js']),
  sourcemaps = require('gulp-sourcemaps'),
  uglify = require('gulp-uglify'),
  concat = require('gulp-concat'),
  rename = require('gulp-rename'),
  bowerFiles = require('main-bower-files');

gulp.task('vendor', function () {
  return gulp.src(bowerFiles({ paths: './', debugging: true }))
    .pipe(jsFilter)
    .pipe(cache('vendor'))
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(rename({extname: '.min.js'}))
    .pipe(sourcemaps.write('../maps'))
    .pipe(gulp.dest('./www/js'));
});

Unfortunately, since Ionic embeds its own angular, identified as a depdendency called ionic-angular.js and I have other dependencies that also require stock angular.js, what ends up happening is that Angular is included twice, which is undesirable.

Here’s the debug output from this task when run:

[14:31:38] Starting 'vendor'...
PackageCollection add		 angular-webstorage /Users/davis/git/warehouse-mobile/bower_components/angular-webstorage
Package		 overriding main	 angular-webstorage angular-webstorage.js
Package		 overriding dependencies	 angular-webstorage {"angular":"1.x.x"}
PackageCollection add		 angular /Users/davis/git/warehouse-mobile/bower_components/angular
Package		 overriding main	 angular ./angular.js
Package		 overriding dependencies	 angular {}
PackageCollection add		 angular-resource /Users/davis/git/warehouse-mobile/bower_components/angular-resource
Package		 overriding main	 angular-resource ./angular-resource.js
Package		 overriding dependencies	 angular-resource {"angular":"1.3.6"}
PackageCollection add		 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic
Package		 overriding main	 ionic ["css/ionic.css","fonts/*","js/ionic.js","js/ionic-angular.js"]
Package		 overriding dependencies	 ionic {"angular":"1.3.6","angular-animate":"1.3.6","angular-sanitize":"1.3.6","angular-ui-router":"0.2.13"}
PackageCollection add		 angular-animate /Users/davis/git/warehouse-mobile/bower_components/angular-animate
Package		 overriding main	 angular-animate ./angular-animate.js
Package		 overriding dependencies	 angular-animate {"angular":"1.3.6"}
PackageCollection add		 angular-sanitize /Users/davis/git/warehouse-mobile/bower_components/angular-sanitize
Package		 overriding main	 angular-sanitize ./angular-sanitize.js
Package		 overriding dependencies	 angular-sanitize {"angular":"1.3.6"}
PackageCollection add		 angular-ui-router /Users/davis/git/warehouse-mobile/bower_components/angular-ui-router
Package		 overriding main	 angular-ui-router ./release/angular-ui-router.js
Package		 overriding dependencies	 angular-ui-router {"angular":">= 1.0.8"}
PackageCollection add		 lodash /Users/davis/git/warehouse-mobile/bower_components/lodash
Package		 overriding main	 lodash dist/lodash.compat.js
PackageCollection add		 d3 /Users/davis/git/warehouse-mobile/bower_components/d3
Package		 overriding main	 d3 d3.js
Package		 select file	 angular /Users/davis/git/warehouse-mobile/bower_components/angular/angular.js
Package		 select file	 angular-resource /Users/davis/git/warehouse-mobile/bower_components/angular-resource/angular-resource.js
Package		 select file	 angular-animate /Users/davis/git/warehouse-mobile/bower_components/angular-animate/angular-animate.js
Package		 select file	 angular-sanitize /Users/davis/git/warehouse-mobile/bower_components/angular-sanitize/angular-sanitize.js
Package		 select file	 angular-ui-router /Users/davis/git/warehouse-mobile/bower_components/angular-ui-router/release/angular-ui-router.js
Package		 select file	 lodash /Users/davis/git/warehouse-mobile/bower_components/lodash/dist/lodash.compat.js
Package		 select file	 d3 /Users/davis/git/warehouse-mobile/bower_components/d3/d3.js
Package		 select file	 angular-webstorage /Users/davis/git/warehouse-mobile/bower_components/angular-webstorage/angular-webstorage.js
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/css/ionic.css
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/fonts/ionicons.eot
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/fonts/ionicons.svg
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/fonts/ionicons.ttf
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/fonts/ionicons.woff
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/js/ionic.js
Package		 select file	 ionic /Users/davis/git/warehouse-mobile/bower_components/ionic/js/ionic-angular.js
[14:31:38] vendor bower_components/angular/angular.js
[14:31:38] vendor bower_components/angular-resource/angular-resource.js
[14:31:38] vendor bower_components/angular-animate/angular-animate.js
[14:31:38] vendor bower_components/angular-sanitize/angular-sanitize.js
[14:31:38] vendor bower_components/angular-ui-router/release/angular-ui-router.js
[14:31:38] vendor bower_components/lodash/dist/lodash.compat.js
[14:31:38] vendor bower_components/d3/d3.js
[14:31:38] vendor bower_components/angular-webstorage/angular-webstorage.js
[14:31:38] vendor bower_components/ionic/js/ionic.js
[14:31:38] vendor bower_components/ionic/js/ionic-angular.js
[14:31:38] vendor 10 items
[14:31:47] Finished 'vendor' after 9.3 s

You can see both angular.js and ionic-angular.js are included in the final vendor.min.js. If I override it in bower.json like this:

"overrides": {
   "angular": { "ignore": true }
}

This succeeds in not including angular.js, but the problem is that the order the files are concatenated in won’t work – since ionic-angular.js is concatenated near the end, the other dependencies fail to resolve angular when the app bootstraps.

So, my question is this:

Can I just remove ionic-angular.js and depend on stock angular.js or has the Ionic team somehow modified/customized the Angular source so Ionic code must have ionic-angular.js present?

If I can use stock angular.js – assuming I just keep the version number consistent with ionic-angular.js, then my problem is solved.

If not, I need to add some build logic to manually sort the concatenation, which is a workaround, but it is brittle, and not the preferred path.

Thanks in advance for a quick reply!

2

“ionic-angular.js” is Ionic (well, the Angular implementation of Ionic).

Ionic was designed to be framework-agnostic, so it comes in 2 parts: The “base” ionic code is in ionic.js, and then the angular-specific wrappers on top of it are in ionic-angular.js. For example: if, someday, the Ionic devs decide they want to use Ember.js instead of Angular, they’d still include “ionic.js” but they’d write a new ionic-ember.js instead that makes ember-wrappers around ionic.js.

Do you maybe mean “ionic.bundle.js” instead? That is, truly, just a concatenation of ionic, angular, angular-animate, angular-sanitize, angular-ui-router, and ionic-angular, and it is safe to include the separate .js files instead.

3

So ionic.bundle is just a combination of a few files.
You could swap that out for all the files individually.

<script src="https://code.angularjs.org/1.3.8/angular.js"></script>
  <script src="https://code.angularjs.org/1.3.8/angular-animate.js"></script>
  <script src="https://code.angularjs.org/1.3.8/angular-sanitize.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
  <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.js"></script>
  <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic-angular.js"></script>
4

Ah, thanks! That answers my question…great. I need to include ionic.js and ionic-angular.js but I can remove ionic-bundle.js (have to include ui-router also).