CODEWITHSUNDEEP
javascriptangulartypescriptnpm
pdanem
pdanem

Reputation: 149

How do I install Angular 2 using NPM?

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?

Upvotes: 14

Views: 49452

Answers (7)

Dinesh Marathe
Dinesh Marathe

Reputation: 81

  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

Upvotes: 1

Sapna
Sapna

Reputation: 7

  1. Download example from https://angular.io/
  2. Save this code and rename it.

  3. Navigate to the root folder in Cmd.

    $ cd myproject

  4. Execute the command

    $ npm install
$ npm start

Upvotes: 0

Amir
Amir

Reputation: 8929

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

enter image description here

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

Upvotes: 3

Xameer
Xameer

Reputation: 31237

Installing Angular Dependencies

Angular is a component oriented framework. Many components needs to be created to make the whole application. A component is a group of custom elements, HTML elements, ShadowDOM & HTML imports.

Upvotes: 0

Andriy
Andriy

Reputation: 15442

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

Upvotes: 5

Oleksii Sytar
Oleksii Sytar

Reputation: 373

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.

Upvotes: 1

Aravind
Aravind

Reputation: 41533

  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.

Upvotes: 2

Related Questions