Visual Studio 2019 Angular

In this article I will teach you how to create an ASP .Net Core Web API using Visual Studio 2019. If you don’t have Visual Studio 2019, you can download it from https://visualstudio.microsoft.com/ for free.

Advertisements

Update Visual Studio 2019 Asp.Net Core Angular Project. The updated Angular project template in Visual Studio 2019 (and 2017 before that) provides a convenient starting point for ASP.NET Core apps using Angular and the Angular CLI to implement a rich, client-side user interface (UI). The template is equivalent to creating an ASP.NET Core project to act as an API backend and an Angular CLI. Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Angular is an extremely popular JavaScript library used by developers to build web and mobile client apps. Visual Studio 2015 improves the HTML and JavaScript editors to help developers building with.

In installing Visual Studio 2019. Make sure to check ASP.NET and web development.

After installing Visual Studio 2019. Open Visual Studio 2019 and create a new ASP.Net Core Web Application project.

For the project name. Name it NetStore then select API in the project template.

Advertisements

The first thing we will do is to set up our Entity Framework. Create a new folder in your solution explorer and call it Model. Then inside the Model folder add new class and call it Product.

Add Properties Id, Name, Category and Price in the Product class. Your Product class should look like this.

Then add another class and call it NetStoreContext. This class will inherit the DbContext. Then add Product as a DbSet in your NetStoreContext and call it Products.

In the solution explorer open appsettings.json file then add a ConnectionString configuration. Your appsettings.json now should look like the code below.

Change the ConnectionString value with your desired connection string.

Back in solution explorer. Open the Startup.cs and look for the method ConfigureServices. Here you can NetStoreContext in the services by adding this code in ConfigureServices method.

Your Startup.cs now should look like this.

Advertisements

Build your project then open a command prompt. Using the command prompt navigate to the root directory of your project.

You can get the root directory of your project by doing a right click in the project name in solution explorer then select Open Folder in File Explorer. A folder will open then copy the location and paste it to the command prompt with the cd command.

then execute this command in the project root directory using command prompt to create our database.

Angular

Then add an initial migration to the database by running this command.

Then update our database.

After creating our let’s scaffold our web api. In the solution explorer right click to Controllers folder. Click add then controller.

Select API Controller with actions, using Entity Framework.

Select Product class for model. Then NetStoreContext for data context and let the controller name to default ProductsController.

Studio

Now run your application and use Postman to test your api. If you don’t have Postman installed in your machine. You can download it here
https://www.getpostman.com/downloads/

Advertisements

The image below is a sample of Post request. Change https://localhost:44373 based on your project url.

Then use the Get request to get the products in your database.

You can also try Put and Delete to update and delete products in your database.

Angular 8.0 is out and so Visual Studio 2019 with .NET Core 3.0. With the recent preview release of .NET Core 3.0, the Angular SPA template for ASP.NET Core 3.0 has now been updated to use Angular 8. So you no longer have to install any third-party templates to create an Angular 8 based app. This post talks about how to create an Angular 8 App with Visual Studio 2019.

If you want to learn all of Angular, I want to personally recommend ng-book as the single-best resource out there. You can get a copy here. The book is updated to Angular 8.

In this post, we’ll use an ASP.NET Core 3.0 based Angular template project, which out of the box creates an Angular 8 app.

Before we create the application, first we need to install Visual Studio 2019 and .NET Core 3.0. Let’s first install .NET Core 3.0 SDK.

Installing .NET Core 3.0

To download .NET Core 3.0 preview, visit this link. Based on your platform, download the appropriate installer(if you have already installed, then please update to the latest version). Once the download is complete, run the installer to install .NET Core 3.0 on your system. The .NET Core 3.0 preview installation will not impact your existing .NET Core version installation.

Visual studio 2019 angular 9

Installing Visual Studio 2019 Preview

To install Visual Studio 2019 preview, download the installer from this location. Don’t worry. Visual Studio and Visual Studio “Preview” can be installed side-by-side on the same device. It will have no impact on your current stable VS installation.

Visual Studio 2019 offers a completely new project creation experience. You can read more about the new experience here. Once the installation is complete, let’s open the Visual Studio 2019 preview and create the ASP.NET Core 3.0 app. Select the ASP.NET Core Web Application template.

You will also need to install the latest version of Node.js, npm and Angular CLI. If you have already installed node then please update it to the latest version.

Now, open the Visual Studio 2019 preview and create the ASP.NET Core 3.0 app. Select the ASP.NET Core Web Application template. When you click Ok, you will get the following prompt. Select ASP.NET Core 3.0 (make sure ASP.NET Core 3.0 is selected) and choose the Angular template.

If you don’t see ASP.NET Core 3.0 in the dropdown, you can try these fixes provides in here and here. However, in my case, nothing worked. So to fix it, I uninstalled the VS 2019 and installed the latest version again. After successful installation, I was able to see ASP.NET Core 3.0 in the framework selection dropdown.

From the template selection dialog box, select Angular and hit OK. Visual Studio will take a few seconds to create the Angular application. Once the application is created, you can verify the angular version in the package.json file which is placed inside the ClientApp folder.

Now, just build the application and run it. You might get the following error (Such errors are expected as things are still in preview mode).

Visual Studio 2019 Angular App

To fix this issue, open command prompt and navigate to the ClientApp folder. Now, execute ng build command once to build the application. After it is built successfully, come back to Visual Studio and run the app once again. This time you should see Angular 8 app running successfully in the browser.

Ideally, in development mode, there’s no need to run ng serve. It runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file. The code is already in place in the Startup.cs file.

Since it’s still in preview, so this will be fixed when the final version comes out.

Visual Studio 2019 Angular 10

If you really want to master Angular 8, ng-book is the single-best resource out there. Get your copy here at 20% discount.

Visual Studio 2019 Angular Cli

Thank you for reading. Keep visiting this blog and share this in your network. Please put your thoughts and feedback in the comments section.

Visual Studio 2019 Angular 11

Visual studio 2019 angular 11

Visual Studio 2019 Angular

PS: If you found this content valuable and want to return the favour, then