Setting up Angular deep linking on IIS

Question

I'm trying to configure an Angular/ASP.NET 5 application on IIS to support deep linking, so that a URL such as domain.com/article/title-slug works

I've added the following code to my web.config using the IIS rewrite module:

<rewrite>
    <rules>
        <rule name="redirect all" stopProcessing="true">
            <match url="^(.*)$" ignoreCase="false" />
            <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
            </conditions>
            <action type="Rewrite" url="wwwroot/index.html" appendQueryString="true" />
        </rule>
    </rules>
</rewrite>

My problem is that my site no longer loads, I have a blank screen with nothing in the network tab and no source.

My inetpub\site\ folder is the root of the dotnet core publish folder, and I have the angular build assets within inetput\site\wwwroot

My base href is = "/" and everything works fine without the rewrite code.

Finally, I tried changing my rewrite URL to

<action type="Rewrite" url="/index.html" appendQueryString="true" />

But then I start getting the error:

inline.f137c7f1f4e2a52a2fb9.bundle.js:1 Uncaught SyntaxError: Unexpected token <
polyfills.25e42e2a7a0746e9ff75.bundle.js:1 Uncaught SyntaxError: Unexpected token <
main.0d9f8e7be2ccd1472551.bundle.js:1 Uncaught SyntaxError: Unexpected token <

According to the `SyntaxError: Unexpected token <` I'd say you are receiving content of an error page instead of expected JS bundles - not knowing anything about your setup I'd just ask if you can check on the `*bundle.js` content somehow..? BTW in my setup it's enough to have just `` (the url param having just `"/"`), it's OWIN based full ASP.NET though, not Core. — Tomas Varga, Jan 19 '18 at 06:08
@Brad my startup.cs is huge - which particular parts would help? — Evonet, Jan 19 '18 at 06:24

score 2 · Accepted Answer · answered Jan 19 '18 at 06:36

2

I ended up fixing this by scrapping the URL rewrite module and handling this in code:

        app.Run(async (context) =>
       {
           context.Response.ContentType = "text/html";
           await context.Response.SendFileAsync(Path.Combine(env.WebRootPath, "index.html"));
       });

answered Jan 19 '18 at 06:36

Evonet

3,600
4
37
83

2

That's why i was asking about your `Startup.cs` file. I use the `app.UseDefaultFiles(); app.UseStaticFiles()` and then a similar method to yours to serve the index.html file. I can post an answer if you like. – Brad Jan 20 '18 at 01:39
Note that for Core 2.1 the first line becomes `app.Use(async (context, next) =>`. Also I placed this code last in `Startup.cs` – jaycer Nov 21 '18 at 19:16

score 2 · Answer 2 · answered Feb 27 '18 at 02:10

Was running into the same issue. After tinkering with a number of things, changing the base href tag in the index.html file to the fully qualified Url is what finally fixed it for me.

Before:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

After:

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>MySubApp</title>
    <base href="http://MyUrl.com/MySubApp/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">


  </head>

  <body>
    <mu-root></mu-root>

  <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>

</html>

My Rewrite rule:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="test" enabled="true" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />   
                      </conditions>
                    <action type="Rewrite" url="/MySubApp/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

My use case was setting up an application under the default website, so your setup might be different.

Setting up Angular deep linking on IIS

2 Answers2

Linked