Integrate ASP.NET Owin and Angular CLI project

In this post I will show you how to integrate an OWIN project with Angular CLI project.
Below are the pre-requisites:

• Node.js
• Angular CLI
• Visual Studio 2017

First lets create an empty ASP.NET WebAPI project

After the project is successfully created, add new "cs" file and name it as Startup.cs and delete "Global.asax" file.
Add the below NuGet packages and it's dependencies into your project:

• Microsoft.AspNet.WebApi.Owin
• Microsoft.Owin.StaticFiles
• Microsoft.Owin.Host.SystemWeb

Now in the project add new "App" folder and let it be empty, it will be the output folder of the Angular CLI project
Now in the Startup.cs file, please add the below code.

Now modify the web.config  as shown below

We are done with the Owin project, so now let's create the Angular CLI project.
I am creating the Angular project inside directory "AngularProject" and overall structure of Owin and Angular is as shown below

Now open powershell and browse to parent directory of AngularProject i.e. in my case its "c:\git". Now execute the below command

Once the Angular CLI project is created successfully, open ".angular-cli.json" and modify the outdir file location to the App folder which we created in the owin project.

Now build the angular project using "ng build -ec" and you will notice that all the build files are copied into App folder.
Now run the Owin project which we created and you will see the index.html of Angular project got rendered using owin.

​Hope you enjoyed reading!!!!