Azure B2C Custom UI, Angular, CSS files not found

Question

I use Page UI customization for the Azure Active Directory B2C login/signup. I have a page in my Angular application that I link to in the settings for Custom page URI in the Azure portal. The link is on the format https://example.com/login-page. The custom page looks like this:

<html lang="en">
<head>
  <meta charset="utf-8">
  <base href="/">
  <link href="styles.bc5a6bca6bc.bundle.css" rel="stylesheet">
</head>
<body>
  ...
  <div id="api"></div>
  ...
  <script type="text/javascript" src="main.b4ca12a354c.bundle.js"></script>
</body>
</html>

When signing up the following URL is loaded in the browser:

https://login.microsoftonline.com/x.onmicrosoft.com/B2C_1_Sign_Up_or_In/api/CombinedSigninAndSignup/unified?local=signup&csrf_token=x&tx=StateProperties=x&p=B2C_1_Sign_Up_or_In

In the browser console I get the following error:

GET https://login.microsoftonline.com/x.onmicrosoft.com/B2C_1_Sign_Up_or_In/api/CombinedSigninAndSignup/styles.b3c5ab3ca35abc3a5.bundle.css 404 (Not Found)

I guess that the problem is that since the browser goes to the external microsoftonline page, the css file with the relative url cannot be found.

How can I solve this? I do not want to include the css code directly in the document since it is lots of code that I do not want to mantain in multiple places. The css link tags are automatically inserted by Angular so I do not know if I can just change to absolute url's in some way, but that may not be good because I just want absolute url's on this login page and not on other pages.

Chris Padgett Chris Padgett · Accepted Answer · 2018-06-10T09:30:40

You must use an absolute URL for the style files (such as stylesheets, images, and fonts).

You can use ng build --prod --deploy-url=https://example.com/ to specify the base URL for where the style files are deployed.

Note, currently, you can't use any script files.

Azure B2C Custom UI, Angular, CSS files not found

1 Answers