0

I have inherited an Angular project that I am trying to spin up in IIS and am getting some strange behavior. I am still new to Angular so please bear with me as I try to work through the problem.

When loading the website I notice that the index.html is successfully returned, but all the referenced files within that file (.css, .js, .ico) are all returning 503 errors. The reason for this is that the following references are being considered absolute instead of relative:

<body>
  <app-root></app-root>
  <noscript>Please enable JavaScript to continue using this application.</noscript>
  <script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="scripts.js" defer></script><script src="main.js" type="module"></script>
</body>

Examining the header of the GET requests reveals that the scripts are being requested from http://localhost/scriptname.js. The index.html file is nested several directories down alongside the referenced script files. The website itself is Actually http://localhost/MRP, so these references are somehow jumping ship entirely.

What makes this interesting is that when I try to fix these references and hard-code them to the proper locations the 503 error goes away, but every retrieval is a copy of index.html. Indeed, any request within the Angular directory structure ("ClientApp" in this case) will retrieve index.html no matter request. The root "MRP" folder files are served normally (verified by having an image copied to the "MRP" folder and the "MRP/ClientApp" folder. The image can bee seen normally for localhost/MRP but returns the contents of index.html for localhost/MRP/ClientApp)

I have investigated many avenues including IIS redirects (unlikely since the IIS application was created brand new), routings in C# and app.module.ts. Nothing I've seen online or tried has seemed to have any impact on the behavior.

It's to the point that I'm not even sure what code to present to help someone diagnose the problem, so please let me know what to present and I will modify the post accordingly.

Alan Atkins
  • 31
  • 6

1 Answers1

1

As you have deployed your application to IIS using using an application path of MRP, i.e. http://localhost/MRP you will need to specify the deployment path/folder/application.

The exact solution has changed in various Angular versions over time.

From Angular 14 onwards, I believe you will find the answer is to use baseHref at the link What's the difference between --base-href and --deploy-url parameters of angular-cli tool

Specifically for your problem (Angular 14 and onwards):

If you edit angular.json and specify "baseHref": "/MRP/" in the relevant section, e.g. development, production, etc. This will depend on how you are building your app.

"configurations": {
            "production": {
              "baseHref": "/MRP/",
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            },

Also this link https://bartwullems.blogspot.com/2021/04/angular-deploy-url-and-base-href.html will explain

Robin Webb
  • 1,355
  • 1
  • 8
  • 15
  • That was one giant leap forward! Indeed this started as an Angular 9 app and I upgraded to 16 as best I could. The links on the index.html are still wrong, but when I updated to " – Alan Atkins Jun 28 '23 at 14:24
  • And to answer my own question, your link about the deploy-URL fixed the UI issue (although not the index.html issue, I still had to manually edit it to make it work), so thank you again! – Alan Atkins Jun 28 '23 at 14:39