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

【问题标题】：How to generate components in a specific folder with Angular CLI?如何使用 Angular CLI 在特定文件夹中生成组件？
【发布时间】：2018-04-01 18:15:43
【问题描述】：

我将 Angular 4 与 Angular CLI 一起使用，我可以使用以下命令创建一个新组件。

E:\HiddenWords>ng generate component plainsight

但我需要在 plainsight 中生成一个子组件。有没有办法用 Angular CLI 做到这一点？

【问题讨论】：

ng 生成组件 your/path/from/the/app/folder/plainsight
如@Maxime 所述，或 cd 进入目录
当你第一次运行类似的东西时有一个很好的结果：ng generate component plainsight 作为父母，现在你想生成一个孩子然后运行：ng generate component plainsight/child
我使用的一个方便的工具是命令末尾的 -d ，它会进行空运行，即实际上不会将文件添加到您的项目中，只会告诉您它们会去哪里。这样您就可以检查它们是否进入了所需的文件夹：ng generate component path/to/folder/plainsight -d

标签： angular typescript angular-cli

【解决方案1】：

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

【讨论】：

--flat 选项正是我想要的！
@user3611927 --flat 是答案，因为它将使用现有文件夹并且只创建不存在的文件夹。完美的！！这应该是默认行为恕我直言

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

ng g c component-name

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

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

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

【讨论】：

【解决方案4】：

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

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

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

右键单击要在其中创建组件的文件夹。
选择选项Open in Integrated Terminal 或Open in Command Prompt。
在新终端中（您将看到您选择的路径），然后输入ng g c my-component

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

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

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

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

方法三：终端输入完整路径

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

ng g c relative-path/my-component

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

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

【讨论】：

你是个天才，否则我就是个笨蛋……有史以来最好的办法！
这将在新终端中打开
这是最好的解决方案。谢谢！
这绝对是最好的

【解决方案5】：

简单

ng g component plainsight/some-name

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

尝试使用

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

如果您感觉更舒服，也可以手动尝试。

【讨论】：

【解决方案8】：

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

运行 cmd : ng g c 组件名

【讨论】：

【解决方案9】：

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

cd path/to/specific/directory

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

【讨论】：

【解决方案10】：

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

g c 表示生成组件

【讨论】：

Angular 9 “未知选项：'--spec'”出现以下错误
不要忽略规范文件。测试是有原因的。

【解决方案11】：

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

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

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

ng g c comp-name 或 ng generate component comp-name 创建一个名为“comp-name”的组件
ng g s serv-name 或 ng generate service serv-name 创建名为“serv-name”的服务
ng g m mod-name 或 ng generate module mod-name 创建一个名为“mod-name”的模块
ng g m mod-name --routing 或 ng generate module mod-name --routing 使用角度路由创建名为“mod-name”的模块

希望这会有所帮助！

祝你好运！

【讨论】：

【解决方案12】：

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

ng g c 组件名

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

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

ng g c 组件名/新组件名

【讨论】：

【解决方案13】：

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

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

Angular CLI 非常强大且可扩展。事实上，有如此多的功能，对于开发人员来说，为每个可用的命令提供所有不同的配置选项是很有帮助的。

使用 Angular 控制台，您将获得建议，甚至可以提取最容易忘记或很少使用的功能！

Angular 控制台首先是使用 Angular CLI 提供的更高效的方式。

【讨论】：

【解决方案14】：

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

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

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

生成的组件是这样的：

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

所以我只需要输入

ng g c child/grandchild

希望这对某人有所帮助

【讨论】：

【解决方案15】：

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

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

ng g c myfolder\mycomponent

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

验证结果后，您可以在不使用-d 的情况下运行相同的命令来进行更改。

--dryRun=true|false

如果为 true，则运行并报告活动而不写出结果。

默认值：假

别名：-d

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

【讨论】：

【解决方案16】：

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

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

例如：cd src/app/particularComponent

在 particularComponent 处，输入您需要在其中生成新组件的组件名称。

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

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

【讨论】：

【解决方案17】：

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

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 modules/moduleName/IfComponentsFolder/ComponentYouWantToCreate --project parentProjectName

【解决方案18】：

超级简单，

其他方式，

在终端中转到您的文件夹，

**xxx\FOLDER_NAME>cd FOLDER_NAME

xxx\FOLDER_NAME> ng 生成组件plainsight

如果你像我一样懒惰复制路径（Visual Studio 代码），则奖励积分，

【讨论】：

【解决方案19】：

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

【讨论】：

【解决方案20】：

2021 使用IDE插件进一步加速

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

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

【讨论】：

【解决方案21】：

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

ng g c 组件名称 --flat

【讨论】：