Building Your First Web App In Angular 10 Core 3.1

Introduction

 

This article explains how to set up your Angular 10 websites with the core 3.1 projects. Few developers create their websites in .NET Core's latest version, and few developers create them in pure Angular 10 with VS Code or maybe in Visual Studio. Furthermore, few want to make their website with Core+Angular 10 so that they can create their APIs and Admin Pages in .NET MVC Core. The front view in Angular 10 gives a better look and feel, according to the client's requirements.

 

Okay, let's see how we can work with an Angular 10 Core MVC Web application in Visual Studio 2019.

 

Step 1

 

Before starting, make sure node js has been installed on your machine. If not, then go to the website here and install the latest version of node js according to your window.

 

Step 2

 

After installing node js, go to the command prompt of your window and check the version of node js in your system with the following command.

C:\Users>ng --version

 

On my machine, Angular CLI version 10.1.6 and the Node Js version 12:18:1 has been installed.

 

Step 3

 

Now let's create a web project in Visual Studio 2019 with Angular 10 in .NET Core 3.1. Create an ASP.NET Core Web Application > Next  

 

 

Step 4

 

Now Select Angular from technology templates > change authentication type No Auth to Individuals, so that we can work with Migration for the database connection.

 

 

Step 5

 

Now, the core angular doesn't have its own Angular CLI, so for working with an Angular 10 Core project, we have installed Angular CLI in Core Project via command. 

 

Run this command on the command prompt.  

F:\PROJECTS\BlogsExamples\webappspa>npm install -g @angular/cli

 

Step 6

 

Now, the node-modules folder is automatically created in the ClientApp folder by running the following command, so we can install the project dependencies. After building the project, you see the node-modules folder have been created in the ClientAppp folder. If it does not display, don't worry about it. Click on show all files from the solution explorer.

F:\PROJECTS\BlogsExamples\webappspa\ClientApp>ng-build

 

Output

 

Summary

 

In the above article, we will learn how to create our first Angular web application in the core project. We learned how to set up Node Js on our machine and also saw how to make the node-modules folder regarding Angular-10. At last, we learned how to install Angular CLI in our project.