Easy way to create / generate new Angular component in Visual Studio IDE?

Question

Working on ASP.NET core project (Angular) & Visual Studio as my IDE.

Is there an easy way to generate Angular component files and register the new component in the app module in Visual Studio?

Answer 1

Just open the integrated terminal in VS Code and use the Angular CLI commands ng generate or its alias ng g. Here's the list of some options that you can use with the ng g command:

• ng g c - generate a new component
• ng g s - generate a new service
• ng g d - generate a new directive
• ng g m - generate a new module
• ng g p - generate a new pipe

Each of these commands requires an argument(s), e.g. the name of the component to generate. For the complete list of available options and arguments run the command ng help generate or refer to the Angular CLI documentation. Here are some of the examples of using the ng g command:

• ng g c product will generate four files (.ts, .html, .css, .spec.ts) for a new product component in the directory src/app/product and will add the ProductComponent class to the declaration property of @NgModule

• ng g c product -is -it -spec=false will generate a single file product.component.ts with inlined styles and a template in the directory src/app/product and will add ProductComponent to the declarations property of @NgModule

• ng g s product will generate file product.service.ts containing a class decorated with @Injectable() and the file product.service.spec.ts in the directory src/app

• ng g s product -m app.module will generate the same files as the above command and will also add ProductService to the providers property of @NgModule

Answer 2

I found the answer from the following article: Exploring Angular Fundamental With Visual Studio 2017 (I did this in VS 2019)

• Download Angular Templates if you have not already: Angular Templates Extension
• Right click on your app folder (or wherever you want to place the component): Add -> New Item.
• Search for Angular in the top right search field.
• Select Angular Component.