如何使用 Angular CLI 在特定文件夹中生成组件？

ng g component plainsight/some-name 在我们使用时会创建一个新目录。

最终输出将是：

plainsight/some-name/some-name.component.ts

为避免这种情况，请使用 flat option ng g component plainsight/some-name --flat，它会生成文件而不创建一个新文件夹

plainsight/some-name.component.ts

---

有几种方法可以在特定目录中创建组件。

方法 1：“在集成终端中打开” - 快速、简单且无错误的方法

即您想在 app/common 文件夹中创建一个组件，如下图所示，然后按照以下步骤操作

右键单击要在其中创建组件的文件夹。选择在集成终端中打开或在命令提示符中打开选项。在新终端中（您将看到您选择的路径），然后输入 ng gc my-component

https://i.stack.imgur.com/LAZGn.png

方法2：“复制相对路径”并粘贴到终端

右键单击要在其中创建组件的文件夹 从上下文菜单中，选择在终端上复制相对路径，键入 cd，按空格键，然后按 ctrl + v 粘贴复制的路径并按 Enter 您将看到该目录已更改。

https://i.stack.imgur.com/KwniH.png

方法3：在终端输入完整路径

即你想在某个文件夹中创建component，你输入整个命令，包括路径和组件名称。

ng g c relative-path/my-component

https://i.stack.imgur.com/bpVI6.png

注意（方法 3）： angular 不允许您在 app 文件夹之外创建组件，因此对于组件，您的基本路径将是 app，这就是为什么在我的情况下我必须从 auth/a-component 而不是src/app/auth/a-component

---

ng g c component-name

对于指定自定义位置：ng g c specific-folder/component-name

这里 component-name 将在特定文件夹中创建。

类似的方法可用于生成其他组件，如 directive、pipe、service、class、guard、interface、enum、module 等。

---

生成组件的更短代码：ng g c component-name
指定其位置：ng g c specific-folder/component-name

附加信息
生成指令的更短代码：ng g d directive-name
指定其位置：ng g d specific-folder/directive-name

---

上述选项对我不起作用，因为与在终端中创建目录或文件不同，当 CLI 生成组件时，它默认将路径 src/app 添加到您输入的路径中。

如果我像这样从我的主应用程序文件夹生成组件（错误的方式）

ng g c ./src/app/child/grandchild 

生成的组件是这样的：

src/app/src/app/child/grandchild.component.ts

所以我只需要输入

ng g c child/grandchild 

希望这可以帮助某人

---

超级简单，

https://i.stack.imgur.com/oezqU.png

另一种方式，

在终端去你的文件夹，

**xxx\文件夹名称>cd 文件夹名称

xxx\FOLDER_NAME> ng 生成组件plainsight

如果您像我一样懒惰地复制路径（Visual Studio 代码），则可以加分，

https://i.stack.imgur.com/AjzgL.png

---

使用'ng生成组件./target_directory/Component_Name'

---

在特定文件夹中创建组件：

ng g c folder-name/component-name

使用 Angular-CLI 在文件夹中为特定（现有）模块创建一个组件：

ng g c folder-name/component-name --module=folder-name/moduleName.module.ts

---

ng g c folderName/SubFolder/.../componentName --spec=false 

---

要在 VS 代码中打开终端，只需键入 CTRL + ~ 即可打开终端。以下是步骤：

检查需要生成新组件的特定组件。将路径重定向到您需要生成另一个组件的特定文件夹/组件

例如：cd src/app/particularComponent

在 specificComponent 的位置，输入您需要在其中生成新组件的组件名称。

进入需要生成新组件的组件后，只需键入以下命令：ng gc NewComponentName

（将名称 NewComponentName 更改为您所需的组件名称。）

---

我对上述答案（包括--flat）没有任何运气，但对我有用的是：

cd path/to/specific/directory

从那里，我运行了 ng g c mynewcomponent

---

Angular CLI 提供了您在应用程序开发中需要的所有命令。对于您的特定要求，您可以轻松地使用 ng g (ng generate) 来完成工作。

ng g c directory/component-name 将在 directory 文件夹中生成 component-name 组件。

以下是您可以在应用程序中使用的一些简单命令的示意图。

ng gc comp-name 或 ng generate component comp-name 以创建名为“comp-name”的组件 ng gs serv-name 或 ng generate service serv-name 以创建名为“serv-name”的服务 ng gm mod-name 或 ng generate module mod-name 以创建名为“mod-name”的模块 ng gm mod-name --routing 或 ng generate module mod-name --routing 以创建名为“mod-”的模块带有角度路由的名称

希望这可以帮助！

祝你好运！

---

使用自定义目录时需要使用--dryRun

您可以将自定义目录路径与 ng 命令一起传递。

ng g c myfolder\mycomponent

https://i.stack.imgur.com/PtKY5.png

验证结果后，您可以运行不带 -d 的相同命令来进行更改。

--dryRun=true|false 当为真时，运行并报告活动而不写出结果。默认值：false 别名：-d

官方文档：- https://angular.io/cli/generate

---

2021 使用 IDE 插件进一步加速

如果你想进一步加快这个通常的过程并避免常见的错误，你可以尝试使用 Visual Studio 代码插件。

例如，我使用 Angular-Schematics 并避开终端。您可以使用鼠标选择调用 ng cli。

https://i.stack.imgur.com/ra2Xc.gif

---

打开特定文件夹终端使用此命令

ng gc 组件名称 --flat

---

简单的

ng g component plainsight/some-name

它将创建“plainsight”文件夹并在其中生成一些名称组件。

---

尝试使用

ng g component plainsight/some-name.component.ts

或者手动尝试，如果您感觉更舒服。

---

进入项目目录后。使用 cd path/to/directory 然后使用 ng g c component_name --spec=false 它会自动执行所有操作并且没有错误

g c 表示生成组件

---

在命令提示符或项目终端中转到项目文件夹。

运行 cmd : ng gc 组件名

https://i.stack.imgur.com/jD4qm.png

---

首先要创建一个您需要使用的组件：-

ng gc componentname 通过使用上述命令，将在您上面指定的 (componentname) 文件夹中创建新组件。

但是，如果您需要在另一个组件内或特定文件夹中创建一个组件：-

ng gc 组件名/新组件名

---

如果您使用 VSCode，请考虑使用 Angular Console

它为 Angular CLI 提供了一个接口。您将看到指定路径的选项。

Angular CLI 非常强大且可扩展。事实上，有如此多的功能，对于开发人员来说，为每个可用的命令提供所有不同的配置选项是很有帮助的。使用 Angular 控制台，您将获得建议，甚至能够提取最容易忘记或很少使用的功能！首先，Angular Console 是使用 Angular CLI 提供的更高效的方式。

---

假设您要在模块 Box 中创建组件 Container，并且模块已经创建并且存在于它自己的文件夹 src/app/box 中。

您可以这样做 - 当询问组件名称时，提供组件路径和组件名称。

ng g c -m box
? What name would you like to use for the component? box/Container
CREATE src/app/box/container/container.component.scss (0 bytes)
CREATE src/app/box/container/container.component.html (24 bytes)
CREATE src/app/box/container/container.component.spec.ts (647 bytes)
CREATE src/app/box/container/container.component.ts (288 bytes)
UPDATE src/app/box/box.module.ts (286 bytes)

---