How to update the version of Angular in Ionic Framework? - angularjs

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 angular.version on the console and:
Object {full: "1.3.6", major: 1, minor: 3, dot: 6, codeName: "robofunky-danceblaster"} comes up, so, how do I update to 1.3.8 at least ? or update to the latest ?
Is there a way to do that, or I have to work with that version of Angular until the Ionic people updates it ?

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.

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.

This is all you need to do:
ionic lib update
see documentation on Github!

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

Related

How to use jhipster and react-jhipster-mui generator

I would like to use use mui react library with jhipster. There seemed to be module react-jhipster-mui which should enable it, but I am not sure how to force jhipster to use it.
I have found simmilar blueprint module which is used by jhipster using --blueprint parameter, see bellow
jhipster --blueprint primereact-blueprint
unfortunately it doesnt work with latest version of jhipster.
Anyway execution of the module as blueprint doesn't work
jhipster --blueprint react-jhipster-mui
it ends with:
The generator-jhipster-react-jhipster-mui blueprint provided is not
installed. Please install it using command npm i -g
generator-jhipster-react-jhipster-mui*
react-jhipster-mui is not a blueprint, it's a replacement for react-jhipster library.
So you must edit the package.json file of your project, replace "react-jhipster" by "react-jhipster-mui" with correct version "1.1.0" and then run npm install.
However, it's very likely that it won't work as "react-jhipster-mui" has not been updated for last 6 months since it was forked from "react-jhipster".
If it does not work, you could try to contact its author to see if he/she is interested in updating it or you could make it work by yourself.

Using angular directive callback - updating a bower package locally

So i am using a bower package that is outdated. There is a pull request with code that fixes my issue however it has not been accepted.
The fix is only two lines and I tried changing it in my code, however its still not working.
How do I update the bower package locally?
https://github.com/onemightyroar/angular-camera/pull/19
I suggest not using bower if the package is deprecated. Instead download the package and move it outside of bower_components. This way you can edit the library to work, and bower won't touch the library anymore. However, if you make changes to the code inside of bower components, it still shouldn't be an issue and the problem might be with the two line fix you speak of.

Managing bower file with Angular files

Ok, I think that this is an easy question. I am new to Bower, and I am trying to keep my bower.json file in sync with the multiple libraries that Angular now provides. I am using angular-resource, angular-cookies, angular-sanitize, angular-animate, and then the main angular library. In my bower.json file I have all of these listed as dependencies, but I am having to update 1.2.4 to 1.2.5 for each of these items.
I am sure there is an easier way, and as I understand it I can do "~1.2" for each item and get all of the 1.2.x updates when doing a bower install. But if I want to get specific versions, do I have to update all of the strings to 1.2.5 or can I have a variable somewhere in the bower.json that I can reference, and just update that one variable?
You can't have variables in your bower.json file, so its not supported out of the box.
See: https://groups.google.com/forum/#!msg/twitter-bower/OvMPG6KS3OM/eo6L2VadxI8J
As a workaround if you have sed you can run something like:
# update 1.2.5 -> 1.2.7 in test.json
sed -i '' 's/1.2.5/1.2.7/' test.json

Upgrade ng-boilerplate to use angular ui bootstrap 3

I am using AngularJS v1.2.0-rc.3 with a project using ng-boilerplate. I want to use Bootstrap 3 so I've changed the bower file to use the branch for version 3, but now grunt fails when running the karma tests. I've isolated the problem to module dependencies on ui.bootstrap but I can't figure out what's wrong. Any ideas?
You'll probably need to fork it for now and change the dependency on ui.bootstrap to use their BS3 branch found here: https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
It turns out that I had to build the angular-ui-bootstrap package with grunt and change build.config.js vendor_files to use vendor/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.6.0-SNAPSHOT.min.js
If you're relatively new to ng-boilerplate and want to get jump started with angular support for boostrap3 this fork might be helpful.
https://github.com/MorrisLLC/ng-boilerplate
It uses the lastest versions of the boilerplate vendor libraries and most recent versions of the grunt tasks.
See the Quick Start for modified instructions on building angular-bootstrap. You have to build it because the current angular bootstrap branch does not include the tpls files (templates).
I ran into the same issue and already had written a lot in bootstrap 2.3.2. Instead of starting all over with someone else's git repo, you could just update several files:
build.config.js add in the vendor/bootstrap/js/.js where the file is the javascript that you are planning to use.
less/main.less which imports the bootstrap less. You could use specific less files from bootstrap or do an import of everything with:
#import '../../vendor/bootstrap/less/bootstrap.less';

angular 1.1.x bower dependency configuration

For my yeoman+angular app, I'm trying to add angular 1.1.5 to my bower dependency list. Unfortunately, angular's github page has only provided a bower repository for 1.0.7.
One answer I've seen on another stackoverflow question is to fork angular 1.1.5 into my github account and reference it there. Is there any other way to maintain a reference to an official angular release of 1.1.5?
There is a angular-unstable bower package. https://github.com/johannestroeger/bower-angular-unstable
1.1.5 is an unstable release, so it's not likely you'll be able to use it in a scenario like this in any official capacity. You'll probably have to wait till some of the changes in this branch make it to the stable release for any kind of official repo.
However, forking GitHub is probably a good idea to temporarily allow you to use the 1.1.5 build.

Resources