Building a Web App using ASP.Net Core 2 and Angular5 Frameworks

This post explains how to create a web application using ASP.Net Core, Angular and  Entity Framework Core 2.0. The source code of this application is available in GitHub and you can download from here.

There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG components to the application etc. You can find more details in below links.

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application

Prerequisites

  • Install Visual Studio 2017. You can download Visual Studio 2017 Community Edition from https://www.visualstudio.com/downloads/.
  • Download and Install latest .Net Core SDK from https://www.microsoft.com/net/download/windows.
  • Install NodeJS and NPM
    Install NodeJS from https://nodejs.org/en/.  Node and NPM are required for angular development.
  • Install TypeScript.
    Latest version of TypeScript is available from https://www.typescriptlang.org/index.html#download-links. You can also install choosing options available in this page.
  • The latest and updated SPA templates are included by default with ASP.NET Core 2.1. This includes Angular, React, and React with Redux templates. If you have ASP.NET Core 2.0, run the following command to install the updated ASP.NET Core templates for Angular, React, and React with Redux:

Create a new app using dot net CLI

Create a new application using dot net CLI using angular template.

This will create a new folder in the directory from which this command is executed. Below are the contents of the folder.

Open ng-core-app.csproj using VS 2017

  • Click on Run. This may take more time as the project downloads node packages and nuget packages required to build and run the application.
  • If you are getting time out error the change the run configuration from IISExpress to ‘ng-core-app’ and the run again.

 

  • Now a command will open and you can see all back ground processes.

  • Here you can see in the url, in which application is available . Once build is completed, open a browser and browse the url.

 

Next I am going to add EF Core 2.0 project to the application . You can read below post to understand more about creating an EFCore 2.0 project.

Entity Framework Core 2.0 Repository Pattern

The source code of this application is available in GitHub and you can download from here. There are other posts which explains more about Routing, Reactive Forms, Adding Material and PrimeNG componets to the application etc. You can find more details in below links.

How to add Material UI components in ASP.Net Core 2 and Angular Web Application

How to add PrimeNG UI components in ASP.Net Core 2 and Angular Web Application

Reactive Forms in ASP.Net Core 2 and Angular Application

4 comments on “Building a Web App using ASP.Net Core 2 and Angular5 Frameworks”:

Leave a Reply

Your email address will not be published. Required fields are marked *