Uninstall unused dependencies via bower - angularjs

I have created an AngularJS application utilising the SB Admin 2 layout. I installed it via Bower, which also installed a lot of dependencies such as Flot.js and others. My question is, I don't use any of this extra libraries, how can I remove this unnecessary libraries?

command to uninstall a bower package
bower uninstall library-name
use --save to remove the same as a dependency from bower.json
bower uninstall library-name --save
Before uninstalling, Make sure that you have removed the respective module as a dependency in your angular application.

Related

How should I include aws-appsync in AngularJS project

I am working on a AngularJS project that uses bower as package manager and gulp to inject the dependencies into the index.html file. I am not very familiar with both of these tools.
I now want to use AWS AppSync, but it is not available as a bower package.
Currently the AWS SDK is specified as a file dependency in bower.json as:
"aws-sdk": "./thirdparty/script/aws-sdk-2.69.0.min.js",
When I install aws-appsync with npm npm install aws-appsync the node_modules folder for aws-appsync contains multiple js files in the lib directory.
How can I include these with bower or is there another way to do this altogether?
I am currently unable to change much of the build and dependency management process so any suggestions working with the current tools would be much appreciated.
Thanks for reaching out!
The Bower team itself has recommended that people migrate to npm or yarn, and so aws-appsync has not been pushed to Bower.
It might be worth investigating whether you can install directly from github using something like...
bower install <github url>.git
... and install directly from the appsync-sdk github repo.
In the end I hacked together an interim solution until I can move the whole project over to npm and browserify.
I added the aws-appsync package using npm and required it in a new file. This file is then passed through a gulp task that uses the browserify plugin. The added file is then included into the rest of the build process as before.

How to use existing libraries in reactjs/webpack like GSAP?

I want to use existing library like GSAP. I am using webpack, though I don't know what is the right way to do this. Should I be using bower to install my packages and injecting them into my index.html where there are the js and css injection points as if I had used grunt? Or should I be npm installing packages?
You have to use npm package installation and you have to use like
npm install --save GSAP
it will also update your package.json file.

Add Angular-ui through bower

I'd like to use the angular-ui filters package and I'd like to install it through bower. I've run bower install --save angular-ui which installs it and inserts it into the bower.json file.
Unfortunately it doesn't seem to actually import the files into the project. I've already got ui.bootstrap in there, I can't find any instructions to install the filters part.
I've seen issues where the folder already exists in bower_components and so bower assumes that its already there and doesn't add the files.
bower uninstall angular-ui
check that the angular-ui folder isn't in bower-components and if it is then delete it.
bower install angular-ui --save

Package dependencies in NPM and Bower

First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.

Adding new dependencies to yeoman angular-fullstack project

I have started working on a new project in node js and I have generated the project using yeoman's angular fullstack generator. And now I would like to add a new bower dependency and a new node dependency. What is the best way to do this? Should I simply add the dependency in bower.json and package.json or should I run a specific command?
You don't need yeoman to install those dependancies for you. Instead, yeoman gives you an environment with everything set up to use tihngs like bower, npm, grunt etc. You can add additional dependencies like you normally would using npm or bower.
for bower (http://bower.io/) -
bower install -S <name-of-your-dependancy>
that command downloads the code for you, and it also adds a reference to it in your bower.json
similar for node (https://www.npmjs.com/) -
npm install -S <name-of-your-dependancy>
use npm packet manager, to install components, like if you want to install cordova, use:
npm install -g cordova
For installing AngularJs, follow the official site guide lines:
https://docs.angularjs.org/misc/started

Resources