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

Question

我正在使用 Angular CLI 和 Angular 4，可以通过以下命令创建一个新的组件。

E:\HiddenWords>ng generate component plainsight

但是我需要在明显的地方生成一个子组件。在使用Angular CLI的情况下是否有方法可以实现？

- user8520658

---

生成组件的命令为 "ng generate component your/path/from/the/app/folder/plainsight"。 - maxime1992

正如@Maxime所提到的，或者进入该目录(cd into the directory)。 - Z. Bagley

如果你第一次运行 ng generate component plainsight 时得到了一个不错的结果，现在你想要生成一个子组件，那么只需要运行 ng generate component plainsight/child 即可。 - Martin Zamora

我使用的一个方便的工具是在命令的末尾加上-d，这将执行干运行，即不会实际将文件添加到您的项目中，只会显示它们应该放置的位置。这样，您就可以检查它们是否进入了所需的文件夹：ng generate component path/to/folder/plainsight -d - Juan Pablo

Answer 1

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

最终输出结果为：

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

为了避免这种情况，请使用flat选项ng g component plainsight/some-name --flat，它将生成文件而不需要创建新的文件夹

plainsight/some-name.component.ts

- user3611927

---

“--flat”选项正是我要找的！ - mishap

@user3611927 --flat 是答案，因为它将使用现有文件夹并仅创建不存在的文件夹。完美！我认为这应该是默认行为。 - Andrew Day

“--flat” 实际上是默认启用的，因此无需显式输入。如果我们希望生成的文件放置在一个文件夹中，则使用“--flat false”生成。 - Christian

Answer 2

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

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

例如，您想要在下面给出的图像中的app/common文件夹中创建一个组件，然后按照以下步骤操作：

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

您还可以通过此图像检查此过程

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

1. 在您想要创建组件的文件夹上右键单击
2. 从上下文菜单中选择“复制相对路径”
3. 在终端上，输入“cd”，按下空格键，然后按下Ctrl + V粘贴复制的路径，然后按Enter键
4. 您将看到目录已更改。

您还可以通过此图像检查此过程

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

即，您想要在某个文件夹中创建组件，您可以输入包括路径和组件名称的完整命令。

ng g c relative-path/my-component

你也可以通过这张图片来查看这个过程

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

- WasiF

---

你是个天才，或者我只是太笨了……这是有史以来最好的方式！ - Ap0st0l

这是最佳解决方案。谢谢！ - Gobind

这是最好的，绝对的。 - Leandro Castro

方法1和方法2都忽略了我的工作目录，并在根目录创建了它。 - xr280xr

@xr280xr 这是不可能的。它们应该可以工作。你一定犯了一些错误。 - WasiF

Answer 3

ng g c component-name

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

这里的component-name将会在specific-folder内创建。

同样的方法也可以用于生成其他组件，如directive，pipe，service，class，guard，interface，enum，module等。

- VIKAS KOHLI

Answer 4

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

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

- Ace Valdez

Answer 5

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

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

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

产生的组件是这个：

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

所以我只需要打字

ng g c child/grandchild 

希望这能对某人有所帮助

- Sofía

Answer 6

使用命令 'ng generate component ./target_directory/Component_Name' 生成组件。

- Matthew

---

它有效了，非常感谢！ - André Luiz Myszko

Answer 7

非常容易,

另一种方法是，在终端中进入您的文件夹，

**xxx\FOLDER_NAME>cd FOLDER_NAME

xxx\FOLDER_NAME> ng generate component plainsight

如果您像我这样懒惰，可以复制路径（视觉工作室代码）以获得额外的奖励点，

- Prageeth godage

Answer 8

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

ng g c folder-name/component-name

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

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

- Seshu Vuggina

---

我们可以使用以下命令来创建组件：ng g c modules/moduleName/IfComponentsFolder/ComponentYouWantToCreate --project parentProjectName - sid7747

Answer 9

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

- SACHIN DUHAN

Answer 10

我尝试了以上回答（包括 --flat），但是都没有成功，对我有帮助的方法是：

cd path/to/specific/directory

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

。

- esitarz