How do I install Angular 2 using NPM?

Question

I'm trying to setup my own local development environment for an Angular 2 app without using the QuickStart seed mentioned in the Angular 2 site or the Angular CLI because they tend to come with extra files that I don't really require.

Now, everything's going fine except that I don't know how to get Angular 2 using NPM. I've tried using npm install angular2 --save but I just found out that angular2 has been deprecated and was a pre-release version. So I guess how do I get the latest Angular 2.0 plugins using NPM, if at all possible at the moment?

Solution 1

at https://angular.io/docs/ts/latest/guide/setup.html, is recommended to use QuickStart seed, here is its package.json, so actually we need to download its dependencies:

"dependencies": {
  "@angular/common": "~2.4.0",
  "@angular/compiler": "~2.4.0",
  "@angular/core": "~2.4.0",
  "@angular/forms": "~2.4.0",
  "@angular/http": "~2.4.0",
  "@angular/platform-browser": "~2.4.0",
  "@angular/platform-browser-dynamic": "~2.4.0",
  "@angular/router": "~3.4.0",

  "angular-in-memory-web-api": "~0.2.4",
  "systemjs": "0.19.40",
  "core-js": "^2.4.1",
  "rxjs": "5.0.1",
  "zone.js": "^0.7.4"
}

you could also create your custom package.json, by running npm init, copying these dependencies (or most of them) and than running npm install with your package.json

Solution 2

Angular 4 could be installed in two ways:

Note: Make sure your system already installed node js and npm

1. Perform the clone-to-launch steps with terminal commands.
2. Download the QuickStart seed and unzip it into your project folder. Then perform the steps mentioned later with terminal commands.

1. Cloning :

Suppose you want to make a project named helloworld, then run the following commands from your terminal

 git clone https://github.com/angular/quickstart.git helloworld
 cd helloworld
 npm install
 npm start

After running last command you could see from your browser like this

2. Downloading :

Download the QuickStart seed and unzip it into your project folder. Then perform the below steps with terminal commands.

cd quickstart
npm install
npm start

For more details go to official site

Solution 3

1. Paste the below code into a file by creating and naming it as package.json.

   {
   "name": "demo-app",
   "version": "1.0.0",
   "author": "Aravind",
   "description": "set up files for the first Demo App",
   "scripts": {
       "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
       "tsc": "tsc",
       "tsc:w": "tsc -w",
       "lint": "tslint ./app/**/*.ts -t verbose",
       "lite": "lite-server",
       "typings": "typings",
       "postinstall": "typings install"
   },
   "license": "ISC",
       "dependencies": {
       "@angular/common": "2.0.0",
       "@angular/compiler": "2.0.0",
       "@angular/core": "2.0.0",
       "@angular/forms": "2.0.0",
       "@angular/http": "2.0.0",
       "@angular/platform-browser": "2.0.0",
       "@angular/platform-browser-dynamic": "2.0.0",
       "@angular/router": "3.0.0",
   
       "core-js": "^2.4.1",
       "reflect-metadata": "^0.1.3",
       "rxjs": "5.0.0-beta.12",
       "systemjs": "0.19.27",
       "zone.js": "^0.6.23",
   
       "bootstrap": "^3.3.6"
   },
   "devDependencies": {
       "concurrently": "^2.2.0",
       "lite-server": "^2.2.0",
       "tslint": "^3.7.4",
       "typescript": "^2.0.2",
       "typings": "^1.0.4"
   },
   "repository": {}
   }
   

2. navigate to the root folder in Cmd and

   npm install 
   
   or
   
   npm i 
   

Alternatively if you want to create a new package.json

1. Navigate to a folder in command prompt

2. Execute the command

   npm init
   

3. This will create a new package.json file and copy paste the above code to install angular2 along with few other basic dependencies.

If you are looking for a simple set up. Have a look at this post.

Solution 4

1. Install Angular CLI 1.1.3
2. Uninstall latest version of CLI > npm uninstall –g @angular/cli
3. Clean the Cache >npm cache clean
4. Install the Specific version of angular CLI > npm install –g @angular/[email protected]
5. Open the Node js Command prompt.
6. Navigate to Project folder location >cd project_name
7. Install below mentioned packages,
8. npm i codemirror
9. npm i ng2-codemirror
10. npm i ng2-split-pane
11. npm i ng2-daterange-picker
12. Run the npm install
13. Finally do > ng serve

Solution 5

It depend on your build tool, if it is webpack, you need just install angular components, like:

  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0"
}

And all additional vendor modules if it needed in your case.

View more solutions