Code Mahek
  • Blog
  • About
  • Contact
  • Random Clicks
  • Resume
  • Ava Chat Bot

Fragrance
​of Programming

Integrate ASP.NET Owin and Angular CLI project

5/13/2018

Comments

 
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
Picture
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
Picture
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
Picture
Now open powershell and browse to parent directory of AngularProject i.e. in my case its "c:\git". Now execute the below command
Picture
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.
Picture
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!!!!
Comments
comments powered by Disqus

    RSS Feed

    Categories

    All
    Azure
    C#
    Cloud
    CodeProject
    CSharp
    DotNet Core
    Jetbrains
    .NET
    Rider
    Source Generators
    SQL
    Tech News
    Ubuntu
    Visual Studio 2015
    Visual Studio 2019
    Windows
    Windows 10

    Archives

    May 2020
    February 2019
    January 2019
    December 2018
    May 2018
    December 2017
    November 2017
    October 2017
    September 2017
    July 2017
    May 2017
    April 2017
    May 2015
    April 2015
    March 2015

    View my profile on LinkedIn

Location

Contact Us

    Subscribe Today!

Submit
  • Blog
  • About
  • Contact
  • Random Clicks
  • Resume
  • Ava Chat Bot