如何在本地安装Angular CLI(不使用-g标志)

78

我刚开始学习 Angular,使用 Angular-CLI,根据文档,需要使用 $ npm install -g @angular/cli 命令进行全局安装。

但是我想将 Angular-CLI 安装在本地,和其他的 node_modules 包一起。这样当我从 git 上下载我的项目时,只需要运行 $ npm install 命令即可安装所有依赖项(在 package.json 文件中定义)。

我试图通过运行命令 $ npm init 创建一个新项目,然后运行命令 $ npm i @angular/cli -D(其中 -D 等同于 --save-dev)。但是当我运行 $ ng new project-name 命令时,会创建一个新的子目录,并且有一个独立的 node_modules 目录。


8
全局安装并不会阻止你在本地安装。这就是ng new要做的事情:它会创建一个新项目,并在项目内安装ng-cli。全局的ng命令代理到项目的cli上。任何人都可以下载该项目,并使用npm命令调用本地的ng cli(无需全局安装)。但当然,开发者应该全局安装以使事情更容易些。 - JB Nizet
5
  1. 能够创建新项目。
  2. 只需键入 ng xxx 而不是 ./node_modules/.bin/ng xxx ,就可以在项目中使用其他 ng 命令。
- JB Nizet
2
请注意,您应该使用 @angular/cli。您只需要全局导入 ng 命令即可在任何地方直接运行,而不仅仅通过 node_modules/.bin 运行。当您检出现有项目时,您可以通过 package.json 别名来简化所有操作。 - jonrsharpe
1
你只能在总声望低于2k的编辑下获得声望,并且每个用户最多只能获得1k(请参见https://stackoverflow.com/help/whats-reputation),因此你的论点并不成立。如果你在1k之前不知道这一点,请注意有帮助可用:https://stackoverflow.com/help/editing。我正在进行编辑,因为1.格式不好(请查看帮助/Markdown语法,并请不要将实际上不是代码的内容放在“内联代码”中);2.那根本不是框架的名称。还请注意,“angular-cli”是该软件包的旧名称,已被弃用。 - jonrsharpe
1
我花了很多时间来寻找解决方案,但是我什么也没找到。最肮脏的方法是在它为您创建子目录后,将创建的文件和文件夹移动到更高的一级。如果angular-cli在您的node_module中,则仍然可用。 - Vala Khosravi
显示剩余10条评论
11个回答

60

正如一些评论所建议的那样,您可以在系统上拥有本地和全局版本的 Angular CLI。

为了能够访问您的本地版本而不是全局版本(假设您在本地安装了不同版本),请使用npm run-script ng

例如:npm run-script ng generate component SomeCoolComponent

查看这个在 Github 上类似问题的答案:https://github.com/angular/angular-cli/issues/5955#issuecomment-320273493


4
这正好解决了我的问题。我的问题是希望在构建服务器上能够执行本地的软件包,而不是安装全局版本,因为在该服务器上安装全局版本不可行。 - Robharrisaz

57

简短回答 / TLTR

通过指定包 -p @angular/cli 来启动您的项目,这样Node就可以找到程序:

npx -p @angular/cli ng new <project-name>

长答案

最近,npm生态系统已经越来越倾向于将工具安装为项目本地的devDependencies,而不是要求用户全局安装它们。这被认为是一种良好的实践。因为它允许使用多个版本(每个项目一个版本),而不是只有一个全局版本。

要从头开始启动项目,您需要使用-p标志指向该软件包(否则npx将找不到它):

npx -p @angular/cli ng new <project-name>

- npx

npx 是一个命令,与 nodenpm 一起安装,在版本5.2(2017年7月)之后启用。您很可能已经安装了它。

npx 允许您在不本地安装的情况下运行 npm 命令。npx 将查找指定软件包的最新版本(在这种情况下为 @angular/cli),并从 bin 文件夹中运行 ng 命令。

- specific versions

您还可以安装特定版本的 Angular CLI。例如,假设我们需要安装9.1版本。我们可以运行以下命令:

npx -p @angular/cli@9.1 ng new <project-name>

- 安装完成后

在 Angular CLI 安装项目后,前往该文件夹并直接使用 npx ng 命令。例如:

npx ng serve

这将搜索node_modules/.bin/文件夹中的ng命令,该命令是指向本地安装的ng命令的软链接,其指向为../@angular/cli/bin/ng

链接


npx -p @angular/cli@9.1 ng new <project-name>npx -p @angular/cli@9.1 new <project-name> 有什么不同? - McFiddlyWiddly
1
是的它们是不同的。在第一种方法中,您要求npm首先安装此软件包,然后执行“ng”命令。而在第二个版本中,您要求执行“new”命令,其结果将是“new: command not found”。 - Carlos Morales
要在本地未安装Angular/Cli的情况下运行ng命令,您可以使用相同的npx命令npx ng g c home --change-detection - Tlotli Otlotleng

36

TL;DR
使用一个名为 npx 的包(如果尚未安装,请运行 npm i -g npx,当你需要创建一个 Angular 项目时,只需在第一次使用此命令:
npx -p @angular/cli ng new hello-world-project

Explanation:
例如,如果您想创建 Angular 4 项目,请修改上面的命令以包含 angular-cli 版本 1.4.10,像这样:npx -p @angular/cli@1.4.10 ng new hello-world-project,然后,在设置完成项目后,您可以返回使用正常的 ng generate 和其他命令。

angular-cli 版本表示将与项目关联的 Angular 版本,angular-cli 1.4.10 创建 Angular 4 项目

Edits:

以下是有关哪个 CLI 创建哪个 Angular 版本的有用版本信息。

 CLI version     Angular version

 1.0 - 1.4.x       ^4.0.0
 1.5.x             ^5.0.0
 1.6.x - 1.7.x     ^5.2.0
 6.x               ^6.0.0
 7.x               ^7.0.0

此外,如果您想使用最新的稳定版本创建某个Angular项目,只需像这样使用npx命令:npx -p @angular/cli@1.7,它将使用 Angular 5 的最新稳定版本 cli 1.7.4。

在这里查看此SO答案链接,其中一些其他开发人员正在尝试揭开这个谜团。


6
npm 5.2+ 版本开始,npx 工具已默认与 node.js 的默认管理器一起安装。这应该是2018年时更广为接受的答案。 - shadowbq
1
当你说“你可以回到使用正常的ng generate”时,你是指在你的其他项目中,对吗?在这个项目中,你将不得不使用npx ng generate - Noumenon
不需要,只需在此项目中使用相同的 ng generate(使用 npx 创建)即可。无需再打扰 npx。简单来说,npx 只用于创建/设置您所需的 Angular 版本的项目,其余的就忘了 npx。 - Junaid
@Junaid 感谢您的回答,为了实验目的,我已经全局卸载了 Angular CLI npm uninstall -g @angular/cli,然后使用 npx -p @angular/cli ng new hello-world-project 创建了一个新的 Angular 项目,并在运行命令 ng build 后出现错误 The term 'ng' is not recognized as the name of a cmdlet...,因此看起来在这种方法中需要使用 npx 命令。 - Volodymyr Gorodytskyi

11

本地安装Angular的方法:

npm init -y
npm i @angular/cli
npx ng new app-name

要更新本地已安装的Angular版本,比如将8.x升级到9.x,您可以使用:

npx ng update @angular/core@9 @angular/cli@9

3

只需按照此命令操作即可:

npm install  @angular/cli

这对我有用。


2
要在本地安装Angular,请按以下步骤操作 - 假设已经全局安装了Angular 8,并且我们需要在本地安装Angular 6 - 我们将在C驱动器中创建一个名为“angular6”的文件夹,并在其中创建一个名为“ng6-test-project”的Angular 6项目。
在终端中键入以下命令 -
    c:\> md angular6
    c:\> cd angular6
    c:\angular6> md ng6-test-project
    c:\angular6> cd ng6-test-project
    c:\angular6\ng6-test-project> npm install @angular/cli@6.1.1
    c:\angular6\ng6-test-project> cd..
    c:\angular6> npx -p @angular/cli@6.1.1 ng new ng6-test-project
    c:\angular6> cd ng6-test-project
    c:\angular6\ng6-test-project> npx ng --version
    c:\angular6\ng6-test-project> npm audit fix
    c:\angular6\ng6-test-project> npx ng serve --port 4201

如果在任何包和版本(例如rxjx)中出现错误,请打开package.json文件并找到"rxjs": "~6.4.0",将其更改为"rxjs": "6.0.0"并保存。然后在终端中输入以下内容以更新rxjs -
    c:\angular6\ng6-test-project> npm install

要修复软件包中的任何警告,请运行以下命令 -

    c:\angular6\ng6-test-project> npm audit fix

在本地检查Angular版本,请输入以下内容。
    c:\angular6\ng6-test-project> npx ng --version

这将导致新的Angular版本被保存在本地。
要在新端口上运行项目,请输入以下内容 -
    c:\angular6\ng6-test-project> npx ng serve --port 4201

1

在使用以下命令全局安装Angular CLI后:

npm i -g @angular/cli@(latest or 1)

ng new app-name

前往您想要创建Angular应用程序的文件目录。使用命令ng new any-name创建Angular应用程序,全局Angular CLI将负责安装本地CLI版本。

要手动安装新项目,请执行以下操作:

npm init -y

npm install @angular/cli@(latest or 1)

(在使用下一个命令之前删除package.json) ng new app-name 这里ng将使用本地CLI版本创建Angular应用程序版本5、6或7,具体取决于已安装的本地ng版本。

要在现有项目中安装本地CLI,请仅使用以下命令: npm install @angular/cli@(latest or 1)


4
用户特别询问如何在不使用-g标志的情况下完成此操作。 - Jennifer S

1

如何在您的系统上安装较低版本的 angular 或另一个版本的 angular

请确保已全局安装更新版本 npm install g @angular/cli

进入项目目录,该项目具有比全局安装版本不同的较低版本或另一个版本的 angular 项目。例如,如果您想使用 Angular 2,请运行以下命令

npm install ng serve

注意: 如果您要处理的当前项目与以前您曾经开发过的项目版本不同,则不要复制以前项目中的 node modules 检查 "@angular/cli": "version",位于 package.json 中 如果它的版本是 1.2.0,则是 angular 2, 如果是 1.7.0 版本,则是 angular 6


1
要从命令行使用ng,它需要在该目录中或系统PATH变量中。在创建项目之前,您没有可用的ng。使用“npm i @angular/cli”安装它只会将其安装在node_modules文件夹中,并不会使其在PATH中可用。因此,至少需要全局安装一次,因为全局安装的节点模块可以选择在PATH中可用。完成此操作后,您可以在项目文件夹中安装所需版本,因为当全局版本存在时,该版本将由全局版本使用。

所以根据这个答案,一旦我使用 ng new project-name 创建了一个新项目,我就可以从全局node_modules 中删除 angular-cli 并仍然能够使用 ng generate X(因为 angular-cli 也安装在本地node_modules 中? - Gil Epshtain
1
不会,因为当你只输入“ng”时,它是首先执行的(因为它在PATH变量中),但它会在当前文件夹的node-modules中查找另一个版本并执行它(如果存在)。 - jornare
尝试这个:全局安装一个旧版本(比如1.5.5),输入ng --version将显示1.5.5。本地安装另一个版本(比如1.6.0),输入ng --version将显示1.6.0。删除全局版本后,输入ng --version将不会执行。 - jornare

1
自从 Angular 14 版本以来,现在可以实现...
npm init @angular

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接