'Can a configuration with Angular and a .net CMS (for cookie based authentication) and debugging in Visual Studio Code works

I have a CMS (Dnn) based on .net framework which provides cookie based authentication, a Web API and an Angular UI.

For a user to access the Angular app they must have authenticated in the CMS first, be redirected to the Angular app which will then call the Web API hosted along with the .net CMS.

I always develop locally with fictitious domains which I manage in the Windows hosts file:

127.0.0.1   dev.companyName.com

The angular app during normal development and production deployment is hosted at:

dev.companyName.com/apps/client

This works perfectly because the domain is the same for both the CMS and Angular app ensuring that cookie based authentication works.
What it does work for though is debugging Angular in Visual Studio Code. I always end up with unbound breakpoints.

After some research I realized that I had to use:

ng serve

Instead of

ng build --watch

to get debugging to work.

However this doesn't work because if the Angular app detects that the user is not logged in, it redirects the use back to the CMS for authentication.

launch.json example:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "My Angular Admin app in Edge",
            "url": "http://dev.companyName.com/apps/admin",
            // "url": "http://localhost:4200/apps/admin",
            "webRoot": "${workspaceFolder}\\apps\\angularApp-admin",
            "trace": true
        },
        {
            "type": "pwa-msedge",
            "request": "launch",
            "name": "My Angular Client app in Edge",
            "url": "http://dev.companyName.com/apps/client",
            // "url": "http://localhost:4200/apps/client",
            "webRoot": "${workspaceFolder}\\apps\\angularApp-client",
            "trace": true
        }
    ]
}

With this in place I first execute the command:

ng serve 
// or 
ng serve --host=dev.companyName.com --port=80

Both cases don't work. ng serve starts on port 4200 which, when it redirects to authenticate in the CMS running on port 80 then redirects back to the angular app, the cookie doesn't exist or I get CORS issues, and the second option won't work because the CMS is working on that host:port so I get access/permission denied.

A big win for me would be to be able to launch the angular app with debugging in VS code working, have the app redirect to the CMS for authentication, then browse back to the app and have debugging still work.

I would seriously love to get debugging to work because console.log is getting really old. Is it possible and can anyone give any hints about the configuration for it?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source