/ Angular

Angular CLI Asp.net Core Windows Authentication

For me one the biggest struggle with Angular 2+ has been integrating Asp.net Core API's. There are some very useful templates out there like Steve Sanderson's SPA Services, and others, but I was really looking for a simple integration using the Angular CLI. All of my applications with my present employer are behind a cooperate firewall and they leverage Windows Authentication to authorize our users. The CLI allows you to establish a proxy, but it does not work with Windows Authentication. Instead you must flag your Asp.net Core project to anonymous. So after a ton a research a co-worker Greg Hedin and I discovered a Github issue. The issue was on the http-proxy-middleware that the WebPack-Dev-Server uses. So we hijacked the CLI's webpack dev server configuration file or serve.js file and implemented the solution we found here. This was not the cleanest approach. Thankfully @mcanic was kind enough to open an issue in the CLI Git Repo, and Filipe Silva was able to put us in the right direction.

NG New App

Add a new Angular 2+ project into your existing Asp.net Core Solution

  • In the command line type ng new myapp --skip-git , and wait for application to scaffold downloading NPM dependencies. Please note that there are other configuration commands and I strongly recommend the Ultimate Angular CLI Reference.

  • While CLI is scaffolding new project for you, edit the csproj file so that you can tell Visual Studio exclude this folder that houses your Angular code, this will prevent any issues that come up when you are debugging your API's.


  • After all dependencies are downloaded, find the application folder and open the file path in console and then open with Visual Studio Code.



Add a Proxy

  • In the root of your new Angular 2+ project add a JSON file and call it proxy.config.js, but you can call it whatever you want. Make sure you change the port accordingly, and you download agentkeepalive.
npm install agentkeepalive --save
Proxy.config.js
const Agent = require('agentkeepalive');

module.exports = {
        '/api': {
            target: 'http://localhost:59465',
            secure: false,
            agent: new Agent({
                maxSockets: 100,
                keepAlive: true,
                maxFreeSockets: 10,
                keepAliveMsecs: 100000,
                timeout: 6000000,
                keepAliveTimeout: 90000
            }),
            onProxyRes: proxyRes => {
                let key = 'www-authenticate';
                proxyRes.headers[key] = proxyRes.headers[key] &&
                    proxyRes.headers[key].split(',');
            }
        }
};
  • Modify your npm script in the Angular 2+ project's package.json file
 "start": "start http://localhost:4200 && ng serve --proxy-config proxy.config.js",

Create Angular service

Now we are going to create an angular service that will call our backend Asp.net Core API

  • Using CLI enter ng generate service myStuff --spec false
ng generate service myStuff --spec false
  • Add Service into module provider

*Configure Service call

  • Call Service from Component and display it using JSON Pipe

  • Run Visual Studio Fat or 2015/2017 and have the API's listening.

  • Then in Visual Studio Skinny or Code, run NPM Start to launch application.