Angular app deployment to IIS - Images not displaying (Static URLs)

Question

I am deploying an angular 6 app to IIS. I installed IIS Rewrite module and also updated the web.config file and index.html file with Base URLs and rewrite rules.

Issue is Login page shows up without the logo/images. I tried to see what is wrong. http://localhost/ATSTV2/#/login (This shows up the login page with controls and without images)

I looked at the image urls referred and it shows up an the source as http://localhost/assets/Logo_White.png which is incorrect. The correct image link is http://localhost/ATSTV2/assets/Logo_White.png

Apart from changing my web.config and index.html for base URL, should I make some global changes and ensure the static urls are referred correctly?

This whole application works locally just fine with angular CLI ng serve. But when deploying to server I am deploying it to IIS and hence following some suggested approaches in the internet.

Yes. I am able to navigate using my menu options and other controls display and work fine — SARAVAN, Jun 01 '20 at 08:56
Feel free to post your solution and mark it as an answer so as to help whoever also ran into this issue. https://stackoverflow.com/questions/51182322/whats-the-difference-between-base-href-and-deploy-url-parameters-of-angular — Abraham Qian, Jun 02 '20 at 07:38

score 1 · Answer 1 · answered Jun 01 '20 at 08:38

1

make build with command

ng build --base-href="/ATSTV2/"

answered Jun 01 '20 at 08:38

Aakash Garg

10,649
2
7
25

Hello Aakashgarg - Did as you said. But still the same problem – SARAVAN Jun 01 '20 at 08:55
what is now assets path becoming on iis? – Aakash Garg Jun 01 '20 at 08:59
IIS Uses http://localhost/assets/Logo_White.png which is incorrect. The correct image link is http://localhost/ATSTV2/assets/Logo_White.png – SARAVAN Jun 01 '20 at 09:06
try ng build --base-href /ATSTV2/ – Aakash Garg Jun 01 '20 at 09:08
Hello Akash. Is this similar to your earlier command in the answer? – SARAVAN Jun 01 '20 at 09:26
different syntax, picked it up from official doc. it should set correct path. – Aakash Garg Jun 01 '20 at 09:28
if the above doesn't work also try ng build --base-href="./" – Aakash Garg Jun 01 '20 at 09:29
@SARAVAN, did it help? – Aakash Garg Jun 01 '20 at 09:37
That did not help. Still the same behaviour – SARAVAN Jun 01 '20 at 10:02

David · Accepted Answer · 2020-06-01T10:24:00.123

1

You an use the deploy-url option to specify the url from which to load js/css files.

ng build ... --deploy-url /ATSTV2/

Edit

Try modifying angular.json file and set deployUrl : "/ATSTV2/ to projects->YourProjectName->architect->build->options

 "projects": {
    "YourProjectName": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...
            "deployUrl" : "/ATSTV2/",

edited Jun 01 '20 at 10:24

answered Jun 01 '20 at 09:01

David

33,444
11
80
118

Hi David. Deploy url option does not fix the issue – SARAVAN Jun 01 '20 at 09:26
What's the logo url after that? – David Jun 01 '20 at 09:29
In my page IIS Uses localhost/assets/Logo_White.png as the URL which is incorrect. The correct image link is localhost/ATSTV2/assets/Logo_White.png. I am not sure why IIS uses the url localhost/assets/Logo_White.png instead of localhost/ATSTV2/assets/Logo_White.png – SARAVAN Jun 01 '20 at 09:54
@SARAVAN Weird, somewhat the option is ignored. I edited my post, can ou try this? – David Jun 01 '20 at 10:24
Made the change as you requested. But still the same problem. I am editing my questions with a screenshot of how the architect build section looks like in angular.json. Let me know if you catch something. – SARAVAN Jun 01 '20 at 10:39
Hi David. I will tell you how my dist/main.js changes. In one of the source files, login.component.css, I have mentioned background-image: url("/assets/BG.png"); and during the build it got converted to background-image: url(\"/ATSTV2/assets/BG.png\"); in the dist/main.js. But in one source file, login.component.html I had, . This is the one that still remained the same without prefixing the ATSTV2. I think this is a code issue. Better ways to use img src??? – SARAVAN Jun 01 '20 at 10:46
Oh you are using angular universal, and your images are set in css directly? – David Jun 01 '20 at 10:48
ADREV2 is a typho. I meant to use ATSTV2 – SARAVAN Jun 01 '20 at 10:51
Have a look here: https://github.com/angular/angular-cli/issues/12093 – David Jun 01 '20 at 10:55
What did you change in the end? – David Jun 02 '20 at 06:07

Angular app deployment to IIS - Images not displaying (Static URLs)

2 Answers2