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

0
votes

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.

Angular.json snippet

2
angularimageurliisdeployment
Does your routing work otherwise? – David
Yes. I am able to navigate using my menu options and other controls display and work fine – SARAVAN
Feel free to post your solution and mark it as an answer so as to help whoever also ran into this issue. stackoverflow.com/questions/51182322/… – Abraham Qian

2 Answers

1
votes

make build with command

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

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/",