SPA Angular 11->12 updates

[HaoK]

Fixes #33076

Note: When individual auth is enabled, ng test run on the ClientApp will fail due to issues with webpack 5 removing polyfills for node.js core modules, specifically util, and then process due to bootstrap.

ng test output errors

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

But other wise, the angular template seems to runs fine with this PR

[javiercn]

It's fine if we do this, I remember we hit a similar thing when we upgraded to webpack 5 on SignalR and other places.

install 'util'
add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'

[HaoK]

It wasn't clear how best I could do this easily since angular doesn't expose webpack directly, have to do some kind of webpack custom builder?

[javiercn]

@HaoK ahh, that's true.

How does this work on a new template?

[HaoK]

I'm not sure what codepaths in the auth that actually rely on util or process, its the ng test command that runs into this. I was able to login normally just fine, so I'm not sure if there are actual functionality that stops working due to util/process/browser changes.

[javiercn]

@HaoK can you point out what files are causing grief to the tests?

[HaoK]

@javiercn the login/logout files:

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./src/api-authorization/logout/logout.component.spec.ts:6:0-27 - Error: Module not found: Error: Can't resolve 'util' in 'C:\angular12\ClientApp\src\api-authorization\logout'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }


√ Browser application bundle generation complete.

./src/api-authorization/login/login.component.spec.ts:7:0-27 - Error: Module not found: Error: Can't resolve 'util' in 'C:\angular12\ClientApp\src\api-authorization\login'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

./src/api-authorization/logout/logout.component.spec.ts:6:0-27 - Error: Module not found: Error: Can't resolve 'util' in 'C:\angular12\ClientApp\src\api-authorization\logout'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
        - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "util": false }

[HaoK]

So I can make the errors go away and the tests pass if I just delete the logging/util usage in both of the spec files, maybe that's the easiest fix

[javiercn]

So I can make the errors go away and the tests pass if I just delete the logging/util usage in both of the spec files, maybe that's the easiest fix

That sounds like an appropriate fix.

[HaoK]

Cool things look good now with ng test, I think this PR is ready to go