Full-stack application development with AngularJS 11 and Asp.Net MVC Core 5.0 — Creating Combined Project [part1/4]
This is the first article of the series I am going to write for a complete full-stack application using AngularJS as front-end and Asp.Net MVC Core as back-end. This series will be a comprehensive tour of features of both technologies and we will end up with a complete full-stack project. Below are links to Each Part:
- Creating and connecting Angular and Asp.Net MVC Core Projects
- Creating data models to ClientApp and ServerApp
- Creating and consuming Web Services
- Generic Repositories and Controllers
This article is about using Angular and ASP.NET Core MVC together to create rich applications. Individually, each of these frameworks is powerful and feature-rich, but using them together combines the dynamic flexibility of Angular with the solid infrastructure of ASP.NET Core MVC.
Before you start
1) Install .NET Core 5.0
https://dotnet.microsoft.com/download
2) Install Node.js
3) Install Visual Studio 2019
https://visualstudio.microsoft.com/vs/
4) Install Visual Studio Code [optional]
https://code.visualstudio.com/
5) Install SQL Server Express edition
https://www.microsoft.com/en-in/sql-server/sql-server-downloads
Creating the Project
There are several different ways to create a project that combines Angular and ASP.NET Core MVC. The approach that I use in this article relies on the @angular/cli package, used in conjunction with the .NET tools for creating a new MVC project.
Installing the @angular/cli Package
Go to Windows PowerShell and execute the following command:
npm install --global @angular/cli
angular/cli@11.0.3 has been successfully installed.
Creating the Angular Part of the Project
Open the new PowerShell prompt and locate the convenient location and run the following command to create an angular app:
ng new FullStackApp --directory FullStackApp/ClientApp --routing true --style css --skip-tests true --skip-git true
When the setup is complete, the result is a folder called FullStackApp/ClientApp that contains the tools and configuration files for an Angular project, along with some placeholder code to help jump-start development and check that the development tools are working.
Starting the Angular Development Tools
cd d:
cd FullStackApp/ClientApp
npm start
It can take a moment for the development tools to start and compile the project for its first use. Once the “Compiled successfully” message is shown, open a new browser window and navigate to http:// localhost:4200 to see the placeholder content that is added to new Angular projects
Creating the ASP.NET Core MVC Part of the Project
Once the Angular project has been set up, the next step is to create an ASP.NET Core project. Use a PowerShell command prompt to run the commands shown below in the FullStackApp folder.
cd d:
cd FullStackApp
mkdir ServerApp
cd ServerApp
dotnet new mvc --language C# --auth None
The dotnet new command adds all the files required for a basic ASP.NET Core MVC project to the FullStackApp/ServerApp folder, alongside the Angular project:
Preparing the Project for Visual Studio
1) Goto > Open a project or solution
2) Navigate to the FullStackApp/ServerApp folder, and select the ServerApp.csproj file
3) Visual Studio will open the project in .NET mode as shown below:
4) Right-click the Solution item at the top of the Solution Explorer window and select Add > Existing Web Site from the popup menu.
5) Navigate to the FullStackApp folder, select the ClientApp folder, and click the Open button.
Visual Studio will add the ClientApp folder to the Solution Explorer so that you can see the contents of the Angular project, as shown below:
Solution explorer after opening both projects will look like as shown below:
Right-click the ClientApp item, select Property Pages from the popup menu, and navigate to the Build section. Make sure that the “Build Web site as part of the solution” option is unchecked, as shown in Figure below:
Select File > Save All; Visual Studio will prompt you to save the solution file, which can be used to open the Angular and ASP.NET Core MVC projects when you want to pick up a development session. Save the file in the FullStackApp folder using the name FullStackApp.sln.
When you need to open the project again, open the FullStackApp.sln file; both parts of the project will be opened and displayed in the Solution Explorer window.
The final look of the FullStackApp folder will be as follows:
Preparing to Build the ASP.NET Core MVC Application
To configure the ports used when the application is started using Visual Studio, make the changes shown in the figure below to the launchSettings.json file in the ServerApp/Properties folder.
Regenerating the Development HTTPS Certificates
The final preparatory step is to regenerate the development HTTPS certificates by running the commands shown below:
dotnet dev-certs https --clean
dotnet dev-certs https --trustSelect the YES option for each prompt that Windows presents.
Building and Running the ASP.NET Core MVC Application
The ASP.NET Core MVC part of the project can be compiled and executed from the command line or using the code editor.
To build and run the project from the command line, run the command shown in the figure below in the ServerApp folder:
dotnet watch run
Open a browser window and navigate to https://localhost:5001; you will see the placeholder content shown in Figure below.
Connecting the Angular and ASP.NET Core Applications
The Angular and ASP.NET Core MVC applications share the same parent folder but are not connected in any way. It is possible to develop applications this way, but it is awkward. A more useful approach is to connect the two toolchains so that HTTP requests are received by ASP.NET Core and passed on to either the MVC framework or the Angular development tools based on the request URL.
There are two ways to connect the toolchains, and each is useful during a different phase of the project lifecycle:
- Managing the Angular Server Through ASP.NET Core
- Using the ASP.NET Core MVC Proxy Feature
Both approaches rely on an additional .NET package. Open a new PowerShell command prompt, navigate to the FullStackApp/ServerApp folder, and execute the following command:
dotnet add package Microsoft.AspNetCore.SpaServices.Extensions
You will find the highlighted package added Packages of ServerApp
Connecting both Apps Using the ASP.NET Core MVC ProxyFeature
This technique is to start the Angular development tools separately from the ASP.NET Core runtime. In this approach, restarts are faster and each part of the project responds independently so that a change to a C# class, for example, doesn’t affect the Angular development server. The drawback of this approach is that you need to run two commands and monitor two streams of output to see messages and errors.
Add the statements shown below to the Startup class to configure ASP.NET Core MVC to forward requests to the Angular development server, along with statements that select the connection technique based on configuration settings.
app.UseSpa(spa => { string strategy = Configuration
.GetValue<string>("DevTools:ConnectionStrategy"); if (strategy == "proxy") {
spa.UseProxyToSpaDevelopmentServer("http://127.0.0.1:4200");
}
else if (strategy == "managed") {
spa.Options.SourcePath = "../ClientApp";
spa.UseAngularCliServer("start");
}});
Notes: Do not forget to use the following directive:
using Microsoft.AspNetCore.SpaServices.AngularCli;Adding Configuration Settings in the appsettings.Development.json File in the ServerApp Folder
"DevTools":{
"ConnectionStrategy":"proxy"
}
Starting the Angular Development Server
To start the Angular development server, open a new PowerShell command prompt, navigate to the FullStackApp/ClientApp folder:
npm start
Starting the ASP.NET Core Server
To start the ASP.NET Core server, open a second PowerShell prompt, navigate to the FullStackApp/ServerApp folder, and run the following command :
dotnet watch run
Open both applications on browsers
Open a new browser and navigate to https://localhost:5001 for ServerApp.
and then https://localhost:5001/app for ClientApp
Summary
We saw how to create a project that combines Angular and ASP.NET Core MVC. The process is a little complicated, but the result is a solid foundation that allows the Angular and MVC parts of an application to work together while preserving the toolchain used by each of them.
The full code of this article can be downloaded from the Github repository.