1. AngularJS Migration
  2. Step 2 - TypeScript & WebPack
  3. Converting Bower to NPM

Converting Bower to NPM

Important

The source code for this course can be found on GitHub. Each step has it’s own branch, instructions for how to checkout the correct code for each step are in the Project Setup lecture.

Converting Bower to NPM

Before we can bundle our application together and convert it into Javascript, we need to handle our project dependencies. Currently, this is done using bower. In this lecture, we are going to look at how we can remove bower and replace it with npm as our dependency management tool. So lets get started!

From .bowerrc to package.json

Bower uses a bower.json file to manage project dependencies that gets installed in the libs folder. Our AngularJS application has the following bower.json file at the project root:

Listing 1. bower.json
JSON
Copy{
  "name": "ng1-migrate",
  "description": "",
  "main": "index.js",
  "authors": [
    "Asim Hussain <jawache@gmail.com>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "app/libs",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.4.0",
    "angular-animate": "1.4.0",
    "angular-auto-validate": "^1.19.6",
    "angular-ladda": "^0.4.3",
    "angular-resource": "1.4.0",
    "angular-strap": "^2.3.12",
    "AngularJS-Toaster": "angularjs-toaster#^2.1.0",
    "bootstrap": "3.3.2",
    "bootstrap-additions": "0.3.1",
    "font-awesome": "4.3.0",
    "jquery": "2.1.3",
    "ngInfiniteScroll": "1.2.1",
    "angular-ui-router": "ui-router#^0.4.2",
    "angular-spinner": "^1.0.1"
  }
}

To move the dependency management to npm, we need to copy the dependencies section from the above bower.json file and paste it in the dependencies section of the package.json file like so:

Tip

Remove the '#' from the AngularJS-Toaster and angular-ui-router version information when copying the dependency list from the bower.json file to the package.json file.
Listing 2. package.json
JSON
Copy{
  "name": "angularjs-migrate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "cp ./data/orig-db.json ./data/db.json && json-server --watch ./data/db.json",
    "setup": "bower install",
    "start": "cd src && serve",
    "build": "rimraf src/dist && webpack --bail --progress --profile"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "1.4.0",
    "angular-animate": "1.4.0",
    "angular-auto-validate": "^1.19.6",
    "angular-ladda": "^0.4.3",
    "angular-resource": "1.4.0",
    "angular-strap": "^2.3.12",
    "AngularJS-Toaster": "angularjs-toaster^2.1.0",
    "bootstrap": "3.3.2",
    "bootstrap-additions": "0.3.1",
    "font-awesome": "4.3.0",
    "jquery": "2.1.3",
    "ng-infinte-scroll": "1.2.1",
    "angular-ui-router": "ui-router^0.4.2",
    "angular-spinner": "^1.0.1"
  },
  "devDependencies": {
    "bower": "^1.8.0",
    "json-server": "^0.9.6",
    "rimraf": "^2.6.2",
    "serve": "^5.1.2",
    "ts-loader": "^3.2.0",
    "typescript": "^2.6.2",
    "webpack": "^3.10.0"
  }
}

Run npm install from your terminal pointed to your project root to install the dependencies via npm. If all goes well, npm will install all the specified dependencies in the node_modules folder.

Tip

There can be package name or version incompatibilities across Bower and npm. Most of this can be easily fixed by analyzing the npm error thrown and modifying the specific dependency information in the package.json file.

Caught a mistake or want to contribute to the book? Edit this page on GitHub!


Advanced JavaScript

This unique course teaches you advanced JavaScript knowledge through a series of interview questions. Bring your JavaScript to the 2021's today.

Level up your JavaScript now!