Hi @ismcagdas
I finally found a solution to this that others might be interested in, maybe not the most elegant one, since there are some limitations in Azure AD B2C.
First of all I had to remove <base href="/"> from index.html when using hash location strategy otherwise I always got redirected to / initially. I'm not an Angular expert so maybe this is obvious or even incorrect. But if this makes any sense it could also be added to the documentation for #1.
The next thing is more related to Azure AD B2C since it seems to be a limitation in there. For local development I want to set the redirect url to http://localhost:4200/#/acount/login but the # is not allowed by AD B2C. The workaround is to set it to a redirect page, for example http://localhost:4200/assets/loginredirect.html which contain something like this
<html>
<head></head>
<body>
<script type="text/javascript">
if (location.hash.includes("id_token")) {
location.href = location.origin + '#/account/login/' + location.hash;
}
</script>
</body>
</html>
In login.service.ts I had to change the redirectUri of authConfig to window.location.origin + '/assets/loginredirect.html';
Now the redirected url will contain two # so I had to change the implementation in UrlHelper.getQueryParametersUsingHash to
return document.location.hash.substr(document.location.hash.lastIndexOf('#') + 1, document.location.hash.length - 1).replace(/(^\?)/, '').split('&').map(function(n) { return n = n.split('='), this[n[0]] = n[1], this; }.bind({}))[0];
So I never used the authConfig.customQueryParams = { "response_mode": "query"} approach.
Hopefully this can help others since I have struggled a lot with this.
Thank you