如何使用 Angular CLI 在特定文件夹中生成组件？
Posted
技术标签:
【中文标题】如何使用 Angular CLI 在特定文件夹中生成组件？【英文标题】：How to generate components in a specific folder with 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
【参考方案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
【讨论】：
以上是关于如何使用 Angular CLI 在特定文件夹中生成组件？的主要内容，如果未能解决你的问题，请参考以下文章
使用 angular-cli 在 Angular 中为静态文件添加前缀路径