Updating angular js version ahead of ionic's packaged version

ionic-v1
1

Hi,

I have started developing my app with ionic 1.0.0-beta9 which works with angular js 1.2.17 but v 1.3.0 - beta 15 is available now. I also see that angular 1.3 has significant changes from 1.2 and also easier to move to angular 2.0 when it comes. Hence dont want to start my new project with 1.2.17.

Can I move ahead on angular version alone without waiting for ionic to bring in the new version?

Amrudesh

2

do not use ionic.bundle.js -> use ionic.min.js and ionic-angular.min.js and load your own angularjs.

And hope everything works fine :wink:

You can get the sources here:
http://code.ionicframework.com/#

3

@bengtler . Thanks. ya… I could see that the bundle was wrapping it all. The crucial question I have though is whether it is advisable to go ahead using updated angular js files. I am new to this kind of development and hence wanted to be sure am not out of sync with best practices the community follows.

4

I know this is an old topic, but I’d like to know the answer too. I assume it is, “If you do it, we don’t support you”, which is fair, but I’d like to hear an official response on this. :slight_smile:

5

I just had the same problem and would like to share how I fixed it. Ionic 1.2.4 ships with angular 1.4.3 which has a few bugs that broke my app and were fixed in 1.4.4. Please note that this shows only how to update angular-core. Angular-animate, -sanitize and -ui-router aren’t touched but you can update them using the same way.

First I edited bower.json, now it looks like so:
{ "name": "myProjectName" ,"private": "true" ,"devDependencies": { "angular": "1.4.4" ,"ionic": "driftyco/ionic-bower#1.2.4" } ,"resolutions": { "angular": "1.4.4" } }

Note: the “resolutions” property fixes the conflict between angular 1.4.4 and ionics angular 1.4.3 dependency. It forces bower to solve the conflict by using angular 1.4.4.

Then you can install the packages:
cd [project-dir] bower install

Bower will install angular 1.4.4 in the ‘[project-dir]/www/lib/angular’ directory.
Now you have to edit the ‘[project-dir]/www/index.html’ file of your app and add a reference to the ‘angular.min.js’ file BEFORE the reference to the ‘ionic.bundle.js’ file:
`…

... ... ...`

And that’s it.

6

Thank you for your solution. I modified it slightly because I kept seeing “Warning: tried to load angular more than one” in the console output. I replaced ionic.bundle with ionic-angular and also added ionic.js before angular.js

7

For the record, and for all those who are not versed in the BOWER magic, we tried using:

{
  "name": "proj-name",
  "private": "true",
  "devDependencies": {
    "angular": "1.4.4",
    "angular-sanitize": "1.4.4",
    "angular-animate": "1.4.4",
...
  },
  "dependencies": {
...
  },
  "resolutions": {
    "angular": "1.4.4",
    "angular-sanitize": "1.4.4",
    "angular-animate": "1.4.4"
  }
}

and few items of our app were still broken. Then a colleague pointed out we try:

{
  "name": "proj-name",
  "private": "true",
  "devDependencies": {
    "angular": "1.4.4",
    ...
  },
  "dependencies": {
   "angular-sanitize": "1.4.4", <--- moved missing deps from 'devDeps' to 'deps' in 
    "angular-animate": "1.4.4",
     ...
  },
  "resolutions": {
    "angular": "1.4.4",
    "angular-sanitize": "1.4.4", <-- I don't know if this is necessary 
    "angular-animate": "1.4.4"
  }
}

And everything went back to normal. Thanks @dm17 for pointing the right direction. :slightly_smiling: :blush: