How to update the version of Angular in Ionic Framework?

Question

I am having some issues with the Angular filters, everyone says: is because you are not using angular 1.3.8 or above versions, I just realized my version by doing angu

Answer 1

This is all you need to do:

ionic lib update

see documentation on Github!

Answer 2

If you are using Bower to manage your packages you don't want to manually include a different <script> tag for angular.

If you need to override the angular version (and you are using bower) just add angular as a dependancy in your bower.json, same place ionic should be. And then specify the version number. But please note, that as tasseKATT says, it may break things in ionic if you use an angular version different to what ionic is expecting.

If you still wish to do this, you can do it in two ways. Using the bower command line tool or manually.

Bower command line:

In the root of your application you can do the following which will add the latest version of angular to your bower.json

bower install angular --save

Or manually:

"dependencies": {
  "ionic": "driftyco/ionic-bower#1.2.4",
  "angular": "1.5.0"
}

Of course whether via the bower command or manually, make sure the resulting version now specified in your bower.json is the one you want.

You may find you need to add a conflict resolution in bower.json to choose your version over the one ionic suggests. However, as tasseKATT says, it may break things if you use an angular version different to what ionic is expecting.

Unable to find a suitable version for angular, please choose one:

1) angular#1.4.3 which resolved to 1.4.3 and is required by ionic#1.2.4

2) angular#^1.5.0 which resolved to 1.5.0 and is required by product-picker

3) angular#>= 1.0.8 which resolved to 1.5.0 and is required by angular-ui-router#0.2.13

4) angular#^1.x which resolved to 1.5.0 and is required by angular-local-storage#0.2.5

5) angular#1.5.0 which resolved to 1.5.0 and is required by angular-mocks#1.5.0

6) angular#^1.5.0 which resolved to 1.5.0

Then you choose an option, prefix it with ! to save the resoltion to bower.json, or just add the below, and change it to the version you want:

"resolutions": {
  "angular": "1.5.0"
}

So now your project will say "I need angular version X" and then Ionic says I need a different one, but you in your bower.json you specify which to override. If you want to look into this more, look at the bower.json file within bower_components/ionic/bower.json (There is also a .bower.json, not quite sure of the difference here.

Once you have done everything, so a final:

bower update

And this checks that everything is happy and installed. Any other conflicts will then come up at this point, which you can resolve using the above methods.

Answer 3

ionic.bundle.js is a concatenation of:

• ionic.js
• angular.js
• angular-animate.js
• angular-sanitize.js
• angular-ui-router.js
• ionic-angular.js

If you want to use a newer AngularJS version than the one included in the bundle you can include them separately with preferred version (instead of loading ionic.bundle.js).

Do note that the AngularJS version that is included in the newest Ionic version is the version that is/was used during testing (I assume). So by manually including a newer version Ionic may break.

Answer 4

Points to note in the excellent Plunker from @tasseKATT above:

• the version of angular in index.html e.g. <script src="https://code.angularjs.org/1.5.0-beta.2/angular.js"></script> must precede the inclusion of ionic.bundle.js
• you may need to add https://code.angularjs.org:* to your <meta http-equiv="Content-Security-Policy" ...
• You can check that you've loaded the version you want in a browser console using angular.version