如何使用 NPM 安装 Angular 2？答案

【问题标题】：How do I install Angular 2 using NPM?如何使用 NPM 安装 Angular 2？
【发布时间】：2017-06-06 12:58:18
【问题描述】：

我正在尝试为 Angular 2 应用程序设置我自己的本地开发环境，而不使用 Angular 2 site 或 Angular CLI 中提到的 QuickStart 种子，因为它们往往带有我没有的额外文件真的需要。

现在，一切都很好，只是我不知道如何使用 NPM 获取 Angular 2。我试过使用npm install angular2 --save，但我刚刚发现 angular2 已被弃用并且是一个预发布版本。所以我想如果目前可能的话，我如何使用 NPM 获得最新的 Angular 2.0 插件？

【问题讨论】：

你试过stackoverflow文档了吗：stackoverflow.com/documentation/angular2/789/…

标签： javascript angular typescript npm

【解决方案1】：

https://angular.io/docs/ts/latest/guide/setup.html，推荐使用 QuickStart 种子，这里是它的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 运行 npm install

【讨论】：

【解决方案2】：

将以下代码粘贴到文件中，方法是创建并命名为 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": {}
}

在 Cmd 中导航到根文件夹并
```
npm install 

or

npm i 
```

或者，如果您想创建一个新的 package.json

在命令提示符下导航到文件夹
执行命令
```
npm init
```
这将创建一个新的 package.json 文件并复制粘贴上述代码以安装 angular2 以及其他一些基本依赖项。

如果您正在寻找简单的设置。看看这个post。

【讨论】：

【解决方案3】：

这取决于你的构建工具，如果是 webpack，你只需要安装 angular 组件，比如：

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

以及所有其他供应商模块（如果您需要）。

【讨论】：

【解决方案4】：

Angular 4 可以通过两种方式安装：

注意：确保你的系统已经安装了 node js 和 npm

使用终端命令执行从克隆到启动的步骤。
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

【讨论】：

【解决方案5】：

安装 Angular 依赖项

安装Node 的稳定版本（如果尚未安装）并使用node -v 验证安装
使用command npm install -g typescript 安装TypeScript
使用命令npm install -g @angular/cli下载并安装Angular CLI

Angular 是一个面向组件的框架。需要创建许多组件来构建整个应用程序。一个组件是一组custom elements, HTML elements, ShadowDOM & HTML imports.

【讨论】：

【解决方案6】：

从https://angular.io/下载示例
保存此代码并重命名。
在 Cmd 中导航到根文件夹。
```
$ cd myproject
```
执行命令
```
$ npm install
$ npm start
```

【讨论】：

【解决方案7】：

安装 Angular CLI 1.1.3
卸载最新版本的 CLI > npm uninstall –g @angular/cli
清理缓存>npm cache clean
安装特定版本的 Angular CLI > npm install –g @angular/cli@1.1.3
打开 Node js 命令提示符。
导航到项目文件夹位置>cd project_name
安装下面提到的包，
npm i codemirror
npm i ng2-codemirror
npm i ng2-split-pane
npm i ng2-daterange-picker
运行npm install
终于做到了> ng serve

【讨论】：