如何使用NPM安裝AngularJS 2？

Question

我正嘗試爲Angular 2應用程序設置我自己的本地開發環境，而不使用Angular 2 site或Angular CLI中提到的QuickStart種子，因爲它們往往帶有我不需要的額外文件。

現在，一切都很好，除了我不知道如何使用NPM獲取Angular 2。我試過使用npm install angular2 --save，但我剛剛發現angular2已被棄用，並且是預發佈版本。所以我想如何在現在使用NPM獲得最新的Angular 2.0插件？

Answer 1

在https://angular.io/docs/ts/latest/guide/setup.html，建議使用快速入門的種子，這裏是它的package.json，所以實際上我們需要下載它的依賴：

"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" 
} 

你也可以創建自定義的package.json，通過運行npm init ，複製這些依賴關係（或大部分），並且比你的package.json

Answer 2

1. 運行npm install粘貼以下合作通過創建並將其命名爲 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. 導航到Cmd的根文件夾和

   npm install 
   
   or 
   
   npm i 
   

另外，如果你想創建一個新的的package.json

1. 導航到一個文件夾中命令提示符

2. 執行命令

   npm init 
   

3. 這將創建一個新的的package.json文件，複製粘貼上面的代碼與其他一些基本的依賴關係一起安裝angular2。

如果您正在尋找一個簡單的設置。看看這個post。

Answer 3

它取決於你的編譯工具，如果它的WebPack，你只需要安裝角組件，如：

"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" 
} 

和所有其它賣方的模塊，如果它需要你的情況。

Answer 4

角4可以安裝在兩個方面：

注：請確保您的系統中已經安裝的節點js和NPM

1. 執行克隆到發射與終端命令的步驟。
2. Download QuickStart種子並將其解壓縮到您的項目文件夾中。然後用終端命令執行後面提到的步驟。

1克隆：

假設你想一個項目名爲HelloWorld的，然後從你的終端

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

運行下面的命令運行一個命令，你可以看到從你的後這樣的瀏覽器

2.下載：

Download快速入門種子並解壓到你的項目文件夾。然後使用終端命令執行以下步驟。

cd quickstart 
npm install 
npm start 

欲瞭解更多信息，請瀏覽official site

Answer 5

安裝角依賴

• 安裝的Node穩定版本（如果尚未安裝），並驗證使用node -v
• 安裝安裝TypeScript使用command npm install -g typescript
• 下載和使用命令npm install -g @angular/cli

Angular安裝Angular CLI是面向組件的框架。需要創建許多組件來創建整個應用程序。 A組分是從https://angular.io/

保存此碼組custom elements, HTML elements, ShadowDOM & HTML imports.

Answer 6

1. 下載示例的並重新命名。

2. 導航到Cmd中的根文件夾。

   $ cd myproject 
   

3. 執行命令

   $ npm install 
   $ npm start