如何使用angular-cli生成特定文件夹中的组件？

Question

我正在使用angualr4和angular-cli,我可以使用以下命令创建新组件.

E:\HiddenWords>ng generate component plainsight

但我需要在平原内生成一个子组件.有没有办法处理angular-cli？

Answer 1

您可以使用ng g命令提及路径

ng g component plainsight/yourchildcompname

以上将yourchildcompname在plainsight文件夹中创建一个组件和必要的文件.如果plainsight文件夹不存在,那么它也会创建该文件夹.

Answer 2

在ng g component plainsight/some-name使一个新的目录,当我们使用它.

最终输出将是:

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

为避免这种情况,请使用平面选项 ng g component plainsight/some-name --flat ,它将生成文件而无需创建新文件夹

plainsight/some-name.component.ts

Answer 3

快速,简单,无错误的方法

即您要在app/component文件夹中创建组件,然后按照这些步骤操作

1. 右键单击组件文件夹,然后选择 Open in Command Prompt
2. 现在输入ng g c my-new-component新创建的终端

您也可以通过此图片查看此过程

Answer 4

ng g c component-name

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

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

Similarl方法可以用于产生等其他部件directive,pipe,service,class,guard,interface,enum,module,等.

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 

希望这有助于某人

Answer 6

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

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

Answer 7

超级简单，

另一种方式，

在终端去你的文件夹，

** xxx\FOLDER_NAME>cd FOLDER_NAME

xxx\FOLDER_NAME> ng 生成组件普通

如果你像我一样喜欢复制路径（Visual Studio 代码），那就加分，

Answer 8

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

Answer 9

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

ng g c folder-name/component-name

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

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

Answer 10

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

cd path/to/specific/directory

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

Answer 11

要在 VS code 中打开终端，只需键入CTRL+~即可打开终端。步骤如下：

1. 检查需要生成新组件的特定组件。

2. 将路径重定向到需要生成另一个组件的特定文件夹/组件

例如：cd src/app/particularComponent

在特定组件的位置，键入您需要在其中生成新组件的组件名称。

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

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

Answer 12

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

Answer 13

2021 进一步加快使用 IDE 插件的速度

如果您想进一步加快这个通常的过程并避免浪费时间的常见错误，您可以尝试使用 Visual Studio Code 插件。

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