Javascript 如何使用 NPM 安装 Angular 2?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/41782253/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:38:06  来源:igfitidea点击:

How do I install Angular 2 using NPM?

javascriptangulartypescriptnpm

提问by duskmonarch

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 siteor the Angular CLIbecause they tend to come with extra files that I don't really require.

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

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 --savebut 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?

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

回答by Andriy

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:

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

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

您还可以创建您的自定义package.json,通过运行npm init,复制这些依赖项(或其中大部分),而不是npm install与您的 package.json 一起运行

回答by Amir

Angular 4could be installed in two ways:

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

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

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

  1. Perform the clone-to-launch steps with terminal commands.
  2. Downloadthe QuickStart seed and unzip it into your project folder. Then perform the steps mentioned later with terminal commands.
  1. 使用终端命令执行从克隆到启动的步骤。
  2. 下载QuickStart 种子并将其解压缩到您的项目文件夹中。然后使用终端命令执行后面提到的步骤。

1. Cloning :

1. 克隆:

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

假设您要创建一个名为 helloworld 的项目,然后从终端运行以下命令

 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 :

2.下载:

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

下载QuickStart 种子并将其解压缩到您的项目文件夹中。然后使用终端命令执行以下步骤。

cd quickstart
npm install
npm start

For more details go to official site

欲了解更多详情,请访问官方网站

回答by Aravind

  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 
    
  1. 通过创建并将其命名为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 
    

Alternatively if you want to create a new package.json

或者,如果你想创建一个新的package.json

  1. Navigate to a folder in command prompt
  2. Execute the command

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

  1. 在命令提示符中导航到文件夹
  2. 执行命令

    npm init
    
  3. 这将创建一个新的package.json文件并复制粘贴上述代码以安装 angular2 以及其他一些基本依赖项。

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

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

回答by Oleksii Sytar

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

这取决于你的构建工具,如果是 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"
}

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

以及所有其他供应商模块(如果您的情况需要)。

回答by Anna8483

  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
  1. 安装 Angular CLI 1.1.3
  2. 卸载最新版本的 CLI > npm uninstall –g @angular/cli
  3. 清理缓存 >npm cache clean
  4. 安装特定版本的 angular CLI > npm install –g @angular/[email protected]
  5. 打开 Node js 命令提示符。
  6. 导航到项目文件夹位置 >cd project_name
  7. 安装下面提到的软件包,
  8. npm i codemirror
  9. npm i ng2-codemirror
  10. npm i ng2-split-pane
  11. npm i ng2-daterange-picker
  12. 跑过 npm install
  13. 最后做> ng serve

回答by xameeramir

Installing Angular Dependencies

安装 Angular 依赖项

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

Angular是一个面向组件的框架。需要创建许多组件来构建整个应用程序。组件是一组自定义元素、HTML元素ShadowDOMHTML导入。

回答by Sapna

  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
    
  1. https://angular.io/下载示例
  2. 保存此代码并重命名。
  3. 导航到 Cmd 中的根文件夹。

    $ cd myproject
    
  4. 执行命令

    $ npm install
    $ npm start