9

I created an Angular CLI project with a proxy reference to my backend project that contains the web api services.

launchSettings.json (backend project):

...
  "iisSettings": {
    "windowsAuthentication": true,
    "anonymousAuthentication": false,
    "iisExpress": {
      "applicationUrl": "http://localhost:10863/",
      "sslPort": 0
    }
  },
...

proxy.conf.json (frontend project):

{
  "/api": {
    "target": "http://localhost:10863",
    "secure": false,
    "logLevel": "debug"
  }
}

package.json (frontend project):

...
"scripts": {
    "ng": "ng",
    "start": "start http://localhost:4200 && ng serve --proxy-config proxy.conf.json",
    "build": "ng build --prod --output-path=..\\CoreTest\\wwwroot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Then I fire up the back-end and launch the Kestrel webserver by running npm start. With an angular2 service I do a http-get to one of the back-end services. Since back-end services run in IISExpress with Windows Authentication (I want windows authentication), I get a 401 error.

I could do npm run build and browse to my IISExpress url and load the index.html as published by ng build but I would like to use the ng serve method since development is much smoother because ng serve works in-memory.

My question is: how can I use Angular CLI with Windows Authentication during development?

Mcanic
  • 1,304
  • 16
  • 22

3 Answers3

5

For what it's worth, a better solution is to use a proxy js file https://github.com/angular/angular-cli/issues/5627#issuecomment-289381319

Mcanic
  • 1,304
  • 16
  • 22
1

I found a hack here: http://www.meekdeveloper.com/angular-cli-asp-net-core-windows-authentication/ it works. My backend project can now correctly identify the calling user with User.Identity.Name. It really is a hack, it would be nice if Angular CLI could support this officially!

Mcanic
  • 1,304
  • 16
  • 22
1

Hope this helps.

Create a file proxy.conf.json with the following contents (replace target url with url of your backend):

{
    "/api": {
        "target": "http://localhost:20938",
        "secure": false
    }
}

Create a file proxy.conf.js with the following contents (replace target url with url of your backend):

const Agent = require("agentkeepalive");

module.exports = {
    '/api': {
        target: "http://localhost:20938",
        secure: false,
        agent: new Agent({
            maxSockets: 100,
            keepAlive: true,
            maxFreeSockets: 10,
            keepAliveMsecs: 100000,
            timeout: 6000000,
            keepAliveTimeout: 90000
        }),
        onProxyRes: proxyRes => {
            const key = "www-authenticate";
            proxyRes.headers[key] = proxyRes.headers[key] &&
                proxyRes.headers[key].split(",");
        }
    }
};

Put this line in your package.json file, in the "scripts" section:

"start": "ng serve --proxy-config proxy.conf.json --o --port 4200"

run npm start.

Mcanic
  • 1,304
  • 16
  • 22