Integrate an Angular Application in Your ASP.NET Core Web Application
When you develop an Angular application that connects to a backend, there are cases in which you may want to serve the frontend files directly as part of the backend application, instead of serving them as an independent application.
An example? To simplify the authentication and authorization process.
In this scenario, you could delegate to the ASP.NET code the management of the authentication session (cookies, etc.) avoiding the need to manage auth tokens — with the consequent expiration/renewal problems.
In this article, I’ll guide you through the simple process of creating an Angular application and serve it directly as part of your ASP.NET Core web application.
Angular App Creation
The way we create the Angular application doesn’t change, we use the Angular CLI as usual:
ng new demo-appLaunching the application now with ng serve we’ll see the classic output of the starter template:
Not so interesting, but it’s fine for demonstration purposes.
At this point, we’ll build the application, in order to have the dist output.
ng build --prodOk, for now, it’s enough on the Angular side. Let’s switch to Visual Studio.
ASP.NET Core Application Creation
Open Visual Studio and create a new Web Application going into File > New Project > ASP.NET Core Web Application, give it a name and choose the Web Application template:
If we launch the application with F5 (or CTRL + F5) we’ll see that Visual Studio has created the starting page for us, as usual:
We want to replace this content with our actual Angular application, so let’s start by importing the Angular project into our ASP.NET Core project directory.
Move the Angular Project Under the ASP.NET Core Project Directory
As the title says, we have to take the folder containing the Angular project and move that inside the folder created for the Visual Studio project.
I named my Angular project demo-app and my ASP.NET Core project DemoAngularIntegration, so the resulting file system hierarchy will be the following:
Now that we have the Angular files in place we need to tweak a couple of things in our ASP.NET application.
Change the _Layout.cshtml markup
If we want to have our ASP.NET Core application loading the Angular code, we actually need to reference those files and bring the Angular code into our application.
The first step is to change the main _Layout.cshtml markup in order to be the same as the index.html file of our Angular application inside the dist output folder.
Open the ~/Pages/Shared/_Layout.cshtml file, delete its content and copy/paste the markup from ~/[your_ng_app_name]/dist/[your_ng_app_name]/index.html.
The result should resemble something like this:
<!-- _Layout.cshtml -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DemoApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles......css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime......js"></script>
<script type="text/javascript" src="es2015-polyfills......js"></script>
<script type="text/javascript" src="polyfills......js"></script>
<script type="text/javascript" src="main......js"></script>
</body>
</html>Install the BuildBundlerMinifier NuGet Package
Open the Package Manager Console and execute the following command, to install the required package:
Install-Package BuildBundlerMinifierWe’ll use this package to be sure that the bundles are updated every time we compile the project.
Create the Angular JS and CSS bundles
Let’s take advantage of the new bundleconfig mechanism of ASP.NET Core and configure the bundles that we’ll load in our _Layout page.
Create a file called bundleconfig.json at the root level of your application and insert the following json code:
// bundleconfig.json
[
{
"outputFileName": "wwwroot/js/app.js",
"inputFiles": [
"demo-app/dist/demo-app/runtime......js",
"demo-app/dist/demo-app/es2015-polyfills......js",
"demo-app/dist/demo-app/polyfills......js",
"demo-app/dist/demo-app/main......js"
],
"minify": {
"enabled": false,
"renameLocals": false
},
"sourceMap": false
},
{
"outputFileName": "wwwroot/js/app.css",
"inputFiles": [
"demo-app/dist/demo-app/*.css"
],
"minify": {
"enabled": false,
"renameLocals": false
}
}
]Note that in place of demo-app you should write your actual Angular app name.
Reference the Bundles from _Layout.cshtml
Now we need to insert the bundle references inside the _Layout.cshtml page.
The final code should be as follows:
<!-- _Layout.cshtml -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DemoApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="~/css/app.css">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="~/js/app.js"></script>
</body>
</html>If you launch the application now it won’t work, and that’s because we still miss the @RenderBody() method call in the _Layout markup.
Restore the RenderBody() Method Call
Just place the RenderBody() statement in place of the <app-root> component, moving it to the ~/Pages/Index.cshtml page.
At the end of this operation you should have this result:
<!-- Index.cshtml -->
@page
@model IndexModel
@{
ViewData["Title"] = "Home Page";
}
<app-root></app-root><!-- _Layout.cshtml -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DemoApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="~/css/app.css">
</head>
<body>
@RenderBody()
<script type="text/javascript" src="~/js/app.js"></script>
</body>
</html>Launch the Application — Check
We’re ready to launch the application and if we did everything correctly we should see the Angular app served from the ASP.NET Core application:
