Angular project fails to load when deployed to non-root path in IIS

Question

I've created a fresh Angular project, and I built it with ng build. Then I copied it to c:\inetpub\wwwroot\MyProject\. I've added it using "Convert to Application" in IIS Manager.

I then browse it, using http://localhost:81/MyProject/, but all subsequent requests made by Angular fail because they lack the /MyProject at the root. For example, from the tooltip, it tries to load inline.bundle.js from http://localhost:81/inline.bundle.js/ instead of http://localhost:81/MyProject/inline.bundle.js/

How can I make it take into account the root MyProject?

Try researching about the web.config file. If I'm not mistaking, you can use that to rewrite all requests to the path you wish. I had to do it to deploy to Azure — Cristian
– Cristian, Commented Mar 23, 2018 at 14:30

Steve G · Accepted Answer · 2018-03-23 15:29:44Z

2

Change the <base href> property to point to your sub directory ("MyProject") in the new app's index.html (or default page).

Example:

<base href="/MyProject/">

Or, for a more directory-agnostic, relative path approach (provided by the OP)

<base href="./">

edited Mar 23, 2018 at 15:29

answered Mar 23, 2018 at 15:14

Steve G

13.8k7 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sashoalm Over a year ago

Thanks! This led me to the right direction, but I used <base href="./"> instead, since that will work regardless of the name under which I deploy the site. There already was <base href="/">, I just needed to add a dot in front.

Collectives™ on Stack Overflow

Angular project fails to load when deployed to non-root path in IIS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related