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';
Related
I am new to npm, react and webpack but I have a question. In npm how do you prevent a library from being included production package file?
For example, I am just building a very small component in react and on the site where I am going to place my small component. The problem is Jquery library and bootstrap is already being called in the masterpage of the site and I didn't want to call the same library again in my small application production build but I still want to use them during development(because I am only testing it on local and jquery is not called there). TIA
Appreciate your time ready this and hope I got to learn more from you. By the way I created the app using create-react-app but I already 'ejected' it, so its using the webpack 3
Take a look at Webpack externals
You can have two webpack configs, on the dev config you include the package as normal, but for your production config add externals for jquery, so it uses the global one already on the page
The ability you're looking for is named Code splitting
React loadable may be a good option for you as well
I have an older project that we want to add some more functionality to. It's a fairly big project so rewriting it is out of the question. I've been reading and following the Angular ngUpgrade guide to make the transition to be able to write Angular 2+ code and run it with my AngularJS application.
However, there are some things that I'm missing and I'm quite confused on what I need to do.
My team created the initial project using Grunt and Bower, looks like through a Yeoman generator. I've been following along in the PhoneCat Upgrade Tutorial and I'm at the part where it says to "Install Angular into the project, along with the SystemJS module loader."
At this point I've looked into SystemJS a bit and what we have with our Bower/Grunt setup but am fairly confused.
So my question is, do I need to change my AngularJS application to use SystemJS before continuing with the Angular Upgrade, or can Grunt and SystemJS work together in some way?
This should be straightforward - Is there a way to remove comments in HTML/view output during an angular build or render processes? The goal is simple - I don't want users to see them. I know this can be done with something like Grunt or Gulp, but want the comments to be visible during development (and currently have Grunt for a build tool). I've heard this can be done using the Angular CLI, which I know is for use in Angular >=2.0 projects, but am not sure if it could be using in a 1.x/JS project.
In Angular 2+:
ng build --prod
creates the dist/ folder in the root. It contains via webpack stripped down code without any comments, at least with the standard configuration.
Say, I need to use Wysiwyg editor and I found a 3rd party directive for it.
It has a good readme and how to setup in my project(Local).
Demo link: Wysiwyg Editor
Considering that I have done all the npms and integrations in my local project.
How can I deploy the project with new changes?
Maybe I am asking because I don't know about gulp or bower. Does my project needs to have gulp ad bower in order to use such directives. If so, how will the deployment go post setup and integration.
Assumption : There are no gulpfile.js and bower setup already.
In Jquery using a plugin is quite simple. Add a script tag for js file of plugin and use it in html or js as instructed. Does the process has to complicated always for using a 3rd party angular directive?
No. It is not compulsory to use gulp. Gulp just runs task like adding css,js to your file , minifing it and like.
you need to add js file which contain directive code. In your case it is
this is your link of directive
Now you can save this data in one of your js file and add it in index.html
OR
you can give this online link.
Using external directive need to add js n css file.
Question is will it work? We have to see dependancies of any external module we are using so what are dependancies of this module?
enter link description here
you need to add this module also
ADVANTAGES:
Using bower: you can install module in your project. bower install will download all your dependancies also.
using gulp : Gulp task will make sure of adding your css and js files in index.html
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