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:
1 |
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0 |
Create a new app using dot net CLI
Create a new application using dot net CLI using angular template.
1 |
dotnet new angular -o ng-core-app |
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
4 comments on “Building a Web App using ASP.Net Core 2 and Angular5 Frameworks”: