如何在本地安装 Angular CLI（不带 -g 标志）

Posted 2023-03-07

【中文标题】如何在本地安装 Angular CLI（不带 -g 标志）

【英文标题】：How to install Angular CLI locally (without the -g flag)

【发布时间】：2018-06-16 03:58:48

【问题描述】：

我刚刚开始使用 Angular 和 Angular-CLI，我已经看到，根据文档，我需要安装 $ npm install -g @angular/cli 和 -g（全局）标志。

但是，我希望将 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 目录。

【问题讨论】：

全局安装并不妨碍您在本地安装。这就是 ng new 要做的事情：它将创建一个新项目并在项目中安装 ng-cli。全局 ng 命令委托给项目的 cli。任何人都可以下载项目并使用 npm 命令调用本地 ng cli（无需全局安装）。但当然，开发人员应该在全球范围内安装它以使事情变得更容易。

1.能够创建新项目。 2. 只需键入ng xxx 而不是./node_modules/.bin/ng xxx，即可在项目中使用其他ng 命令。

请注意，您应该使用@angular/cli。您只需要ng 命令的全局导入即可在任何地方直接工作，而不仅仅是通过node_modules/.bin。当您签出现有项目时，您可以通过 package.json 为所有内容设置别名。

您只能在 2k 总代表和最多（1k，请参阅***.com/help/whats-reputation）每个用户的编辑中获得代表，因此您的论点并没有真正成立。如果您在 1k 之前没有意识到这一点，可以使用注释帮助：***.com/help/editing。我正在编辑，因为 1. 格式不好（查看帮助/降价语法，请不要将实际上不是代码的东西放在 inline code 中）； 2. 这根本不是框架的名称。再次请注意，angular-cli 是包的旧名称，已弃用。

我搜索了很多内容以找到您的解决方案，但我一无所获。最肮脏的方法是在它为您创建子目录之后移动创建的文件和文件夹，如果它在您的 node_module 中，仍然可以使用更高一级的 angular-cli

【参考方案1】：

要从命令行使用 ng，它需要位于该目录或系统 PATH 变量中。

在你有一个项目之前，你没有可用的 ng。使用npm i @angular/cli 安装它只会将其安装在 node_modules 文件夹中，而不会使其在 PATH 中可用。

因此需要至少全局安装一次，因为全局安装的节点模块可以选择在 PATH 中可用。

完成此操作后，您可以在项目文件夹中安装您选择的版本，因为该版本将在全局版本存在时使用。

【讨论】：

所以根据这个答案，一旦我使用 ng new project-name 创建了一个新项目，我可以从 global node_models 中删除 angular-cli 并且仍然能够使用ng generate X（因为angular-cli也安装在本地node_modules?

不，因为这是仅在键入 'ng' 时首先执行的内容（因为它在 PATH 变量中），但它会在您当前的文件夹 node-modules 中查找另一个版本并执行如果存在。

试试这个：全局安装旧版本（比如 1.5.5），输入 ng --version 现在会生成 1.5.5。在本地安装另一个版本（比如 1.6.0），输入 ng --version 现在会生成 1.6.0。删除全局版本。输入 ng --version 将不会执行。

【参考方案2】：

正如一些 cmets 所建议的，您可以在系统上安装本地和全局版本的 angular cli。

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

例如 npm run-script ng generate component SomeCoolComponent

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

【讨论】：

这非常适合我的问题，即能够在无法安装全局版本的构建服务器上执行本地包而不是全局包。

【参考方案3】：

TL;DR使用名为 npx 的包（如果尚未安装，请运行 npm i -g npx） 以及当您需要创建 Angular 项目时，第一次使用这个命令：npx -p @angular/cli ng new hello-world-project

说明： 例如，如果你想创建 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 项目

编辑：

这里有一些有用的版本信息，说明哪个 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，它将使用 cli 版本 1.7.4，这是 angular 5 的最新稳定版本。

查看这个 SO 答案 here，其他一些开发人员正试图解开这个谜团。

【讨论】：

npx 现在默认安装了 5.2+ 的 npm 是 node.js 的默认管理器。这应该是 2018 年更广泛接受的答案

当你说“你可以回到使用普通的ng generate”时，你的意思是在你的其他项目中，对吧？在这个项目中，你必须使用npx ng generate。

不，在这个项目中也使用相同的ng generate（使用npx创建）。不再需要打扰 npx。简而言之，npx 将仅用于使用所需的角度版本创建/设置您的项目，仅此而已。之后就忘了 npx。

【参考方案4】：

如何在您的系统上安装较低版本的 Angular 或其他版本的 Angular 确保全局安装更新版本 npm install g @angular/cli

转到您具有较低版本的项目目录或与全局安装版本不同的其他版本的角度项目 例如，如果你想处理 angular 2 ..运行下面的命令

npm install ng serve

Note: don't copy any of your node modules from your previous project if the current project you want to work on ,its version its different from formal project which you work on in the past check "@angular/cli": "version" check "@angular/cli": "version", which is located in package.json if its version 1.2.0 its angular 2, version 1.7.0 its angular 6

【参考方案5】：

使用命令全局安装 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 版本根据安装的本地 ng 版本创建 Angular 应用程序版本 5 或 6 或 7。

在现有的一个中安装本地只使用命令 npm install @angular/cli@(latest or 1).

【讨论】：

用户特别询问如何在不使用 -g 标志的情况下执行此操作。

【参考方案6】：

简答/TLTR

通过指定包-p @angular/cli来启动你的项目，这样node就可以找到程序了：

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

长答案

npm 生态系统越来越倾向于将工具安装为 project-local devDependencies，而不是要求用户在全球范围内安装它们。 这被认为是一种很好的做法。因为它允许使用多个版本（每个项目一个），而不是使用一个唯一的全局版本。

为了从头开始项目，您需要指向带有-p标志的包（否则npx将找不到它）：

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

-npx

npx 是与node 和npm 一起安装的命令，从5.2 版（2017 年7 月）开始。很可能您已经安装了它。

npx 允许您运行该 npm 命令，而无需在本地安装它。 npx 将查找指定包的最新版本（在本例中为 @angular/cli）并从 bin 文件夹中运行命令 ng。

- 特定版本

您还可以安装特定版本的 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 命令，这是一个指向../@angular/cli/bin/ng 的软链接，本地安装的ng 命令。

链接

npx Angular CLI

【讨论】：

是npx -p @angular/cli@9.1 ng new <project-name> 与npx -p @angular/cli@9.1 new <project-name> 不同吗？

是的，它们是不同的。在第一个中，您要求 npm 1）首先安装此软件包，然后 2）运行“ng”命令。在您要求的第二个版本中 2) 运行“new”命令，结果将是 new: command not found

【参考方案7】：

只要遵循这个命令

npm install  @angular/cli

它对我有用。

【参考方案8】：

要在本地安装 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

键入以下内容以在本地检查角度版本

    c:\angular6\ng6-test-project> npx ng --version

这将导致新的角度版本保存在本地

要在新端口中运行项目 - 键入以下内容 -

    c:\angular6\ng6-test-project> npx ng serve --port 4201

【参考方案9】：

本地安装 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