Website deployed on IIS Server displays a blank page

Question

The main problem is specified in the title; however, it is a little more nuanced than that. I cannot give away the exact address, but the URL has the syntax: https://name.mywebsite.com.

If I go to that exact address, the page will load as intended. If I try to be more specific about where exactly I want to go on the page - let's say to: https://name.mywebsite.com/home - I get a blank page.

Curiously enough, after I go to https://name.mywebsite.com, all the other addresses work as well and either redirect me to that address or display the site that they are supposed to show. I figured out that some necessary Cache-Data and data for the local storage are not set if I don't call the site over the mentioned address.

All of that wouldn't be much of a problem, since only the first call of the website is affected. However, most users of the site will first call it with a QR-Code (which leads to a specific sub-page of the site), and it wouldn't be very nice if they are greeted with a blank page.

Also, it is a .NET Core App with Angular Frontend.

I can reproduce the error by clearing my cache and cookies. The necessary data is no longer set and all domains will display a white page - except https://name.mywebsite.com - again.

I think I understood the problem, but I cannot seem to come up with a solution. I tried some changes in the IIS Manager on the server, but to no avail. My main bet was to apply an inbound rule with the URL Rewrite function, but that did not work.

<system.webServer>
    <rewrite>
        <rules>
            <rule name="Redirect from first shop open" enabled="false" stopProcessing="true">
                <match url=".*" />
                <action type="Redirect" url="https://name.mywebsite.com/" appendQueryString="true" logRewrittenUrl="true" redirectType="Found" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>

I also tried that rule with all possible Redirect types. Those rules do alter the page, but not in the way I want it. Instead of the blank white page I get an error that the redirect failed (with the hint that it is probably due to a lack of cookies). That error applies to all pages, even https://name.mywebsite.com. So I have no way of accessing the website now.

I also tried to find any other configuration that might prevent other URLs from loading the data, but I did not find anything like that either (or I simply looked at the wrong places).

Edit: /home would be a route in Angular. Also, the only rewrite rule that exists and that I tried is the one shown in the picture (which I updated so that it fits better with the question). I made some changes to the question in general.

Answer 1

As it turns out, I simply had to make some changes to the rule I posted in the question. Changing the Redirect to a Rewrite that targets /index.html and adding some conditions (which should be adapted to your personal needs) did the trick and the website no longer shows a blank page.

The link from Lex Li in the comments from the questions angular.io/guide/deployment#fallback-configuration-examples and the link https://learn.microsoft.com/en-us/iis/extensions/url-rewrite-module/url-rewrite-module-configuration-reference#accessing-url-parts-from-a-rewrite-rule helped me building the correct rule.

<rewrite>
    <rules>
        <rule name="Angular Routes" enabled="true" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                <add input="{REQUEST_URI}" pattern=".*/(home|item.*)" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            </conditions>
            <action type="Rewrite" url="/index.html" logRewrittenUrl="false" />
        </rule>
    </rules>
    <rewriteMaps>
        <rewriteMap name=".*" />
    </rewriteMaps>
</rewrite>