在 Visual Studio IDE 中创建/生成新 Angular 组件的简单方法？

Posted 2023-03-13

【中文标题】在 Visual Studio IDE 中创建/生成新 Angular 组件的简单方法？

【英文标题】：Easy way to create / generate new Angular component in Visual Studio IDE?

【发布时间】：2018-02-11 20:46:03

【问题描述】：

使用 ASP.NET 核心项目 (Angular) 和 Visual Studio 作为我的 IDE。

有没有一种简单的方法来生成 Angular 组件文件并在 Visual Studio 的应用模块中注册新组件？

【问题讨论】：

使用 Angular cli

【参考方案1】：

只需在 VS Code 中打开集成终端并使用 Angular CLI 命令ng generate 或其别名ng g。以下是您可以与 ng g 命令一起使用的一些选项的列表：

ng g c - 生成一个新组件 ng g s - 生成新服务 ng g d - 生成新指令 ng g m - 生成一个新模块 ng g p - 生成新管道

这些命令中的每一个都需要一个参数，例如要生成的组件的名称。有关可用选项和参数的完整列表，请运行命令 ng help generate 或参考 Angular CLI 文档。以下是使用ng g 命令的一些示例：

ng g c product 将为目录 src/app/product 中的新产品组件生成四个文件（.ts、.html、.css、.spec.ts），并将 ProductComponent 类添加到声明中@NgModule 的属性

ng g c product -is -it -spec=false 将在目录 src/app/product 中生成具有内联样式和模板的单个文件 product.component.ts，并将 ProductComponent 添加到 @NgModule 的声明属性中

ng g s product 将生成文件 product.service.ts，其中包含一个用@Injectable() 装饰的类和目录 src/app 中的文件 product.service.spec.ts

ng g s product -m app.module 将生成与上述命令相同的文件，并将 ProductService 添加到 @NgModule 的 providers 属性中

【讨论】：

导航到组件文件夹并每次使用“ng g”命令生成将花费更多时间。 Visual Studio IDE 怎么样。

@YakovFain 发布了整个 cli 文档 +1。生成快速组件的好方法

Rahul，我真的很遗憾花时间回答你的问题。我拿什么回来？我复制粘贴的 CLI 文档的指控。祝你好运。

不确定如何将其标记为答案，因为它提供了有关如何从不同程序执行此操作的说明... Visual Studio 内没有集成终端，但它被视为你可以在这里看到：link。我推荐的选项是 1) 继续在 Visual Studio 中工作并使用命令提示符生成组件，或者 2) 创建带有角度解决方案的 asp.net 核心后，使用 VS Code 对 Angular 部分（客户端应用程序文件夹）进行编程。

由于与 VS Code 相关而被否决，问题是关于 Visual Studio IDE

【参考方案2】：

我从以下文章中找到了答案： Exploring Angular Fundamental With Visual Studio 2017 （我在 VS 2019 中这样做了）

如果您尚未下载 Angular 模板，请下载：Angular Templates Extension 右键单击您的应用文件夹（或您要放置组件的任何位置）：添加 -> 新建项目。 在右上角的搜索字段中搜索 Angular。 选择角度组件。