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

Question

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

E:\HiddenWords>ng generate component plainsight

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

Answer 1

您可以使用 ng g 命令

提及路径

ng g component plainsight/yourchildcompname

以上内容将在plainsight文件夹中创建 yourchildcompname 组件和必要文件。如果plainsight文件夹不存在，那么它也会创建该文件夹。

Answer 2

我们使用时会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

Answer 3

ng g c component-name

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

此处component-name将在特定文件夹中创建。

类似方法可用于生成其他组件，例如directive，pipe，service，class，guard，interface，{ {1}}，enum等

Answer 4

快速，简单且无错误的方法

即您想要在app/component文件夹中创建一个组件，然后按照以下步骤操作

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

您还可以通过这张图片检查此过程

Answer 5

生成组件的更短代码：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 6

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

如果我是这样从错误的主应用程序文件夹中生成组件的，

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

生成的组件是这样的：

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

所以我只需要输入

ng g c child/grandchild 

希望这对某人有帮助

Answer 7

要以VS代码打开终端，只需键入CTRL + ~，这将打开终端。步骤如下：

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

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

例如：cd src/app/particularComponent

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

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

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

Answer 8

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

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

ng g c myfolder\mycomponent

但是，您可能会错过拼写路径的机会，并且可能会创建新文件夹或更改目标目录。因此，dryRun非常有用。它显示更改如何受到影响的输出。

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

-dryRun = true | false

为true时，不记录结果就运行并报告活动。

默认：false

别名：-d

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

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

2021 使用 IDE 插件进一步加速

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

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

Answer 11

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

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

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

1. ng g c comp-name或ng generate component comp-name创建名称为'comp-name'的组件
2. ng g s serv-name或ng generate service serv-name创建名称为“ serv-name”的服务
3. ng g m mod-name或ng generate module mod-name创建名称为'mod-name'的模块
4. ng g m mod-name --routing或ng generate module mod-name --routing来创建名称为'mod-name'且具有角形布线的模块

希望这会有所帮助！

祝你好运！

Answer 12

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

Answer 13

一旦您位于项目目录中。 使用cd path/to/directory，然后使用ng g c component_name --spec=false可以自动执行所有操作，并且没有错误

g c表示生成组件

Answer 14

请考虑您的项目是食谱书。 首先通过以下方式导航到应用程序文件夹

cd src

cd app

然后，如果您想在应用程序中创建文件夹，则只需键入

ng g c mycomponent

它将在应用程序文件夹中创建 现在您想在mycomponent内部创建组件，然后键入

ng g c myComponent/newmyComponent

它将在myComponent文件夹中创建新组件。

谢谢。

Answer 15

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

• ng g c组件名称

  通过使用以上命令，新组件将在具有
  的文件夹中创建 （组件名称）是您在上面指定的。

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

• ng c componentname / newComponentName

Answer 16

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

它为Angular CLI提供了一个界面。您将看到一个用于指定路径的选项。

  

Angular CLI非常强大且可扩展。实际上，功能太多了，这对于开发人员为他们可用的每个命令提供所有不同的配置选项很有帮助。

     

有了Angular Console，您将获得建议，甚至可以拉起最容易忘记或很少使用的功能！

     

首先，Angular Console是使用Angular CLI提供的内容的一种更有效率的方式。

Answer 17

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

cd path/to/specific/directory

从那里开始运行ng g c mynewcomponent

Answer 18

转到在CMD或Project Terminal中保护文件夹。

运行cmd：ng g c组件名称

Answer 19

尝试使用

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

或者，如果您觉得更舒适，请手动尝试。

Answer 20

超级简单

其他方式，

在终端中进入您的文件夹，

** xxx \ FOLDER_NAME> cd FOLDER_NAME

xxx \ FOLDER_NAME> ng生成组件明晰

如果您喜欢我复制路径（Visual Studio代码），则奖励积分，

Answer 21

使用'ng generate component ./target_directory/Component_Name'

Answer 22

简单

ng g component plainsight/some-name

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