如何使用 NPM 安装 Angular 2？

Posted 2023-03-13

【中文标题】如何使用 NPM 安装 Angular 2？

【英文标题】：How do I install Angular 2 using NPM?

【发布时间】：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 插件？

【问题讨论】：

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

【参考方案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