Angular2 Routing not working in IIS

Question

I hosted my Angular2 application in IIS, I have three components in my application. The first component is loading perfect, but remaining components are not loading properly. My Application launching URL is

http://localhost/UI/login/

(loading assets properly). When I am routing to another component on a button click I am referring the same Image which is located in assets folder, which is not loading properly. I found the root cause for it, but I don't know how to solve it. The reason is on button click it will redirect to

localhost/UI/log/Project02 (I could not add https:// as it is not allowing more than 2 links)

and localhost(in server) is looking the assets folder like this localhost/UI/log/assets/logo.png instead of localhost/UI/assets/logo.png. The same image is loaded in first component but not in second component why? I tried by changing base href="/" in index.html also.

My second problem is, On a button click I am routing to 3rd component it is taking as localhost/UI/log/logdetails/2 instead of localhost/UI/logdetails/2

Can anyone help me on this?

This is Html code for referring the logo

 <a href="#"><img src="assets/logo.png" alt=""></a> <span class="header-txt">Log</span>

and this is my folder structure

• FAISAL: please provide your code where you have added the image
• thamatam kiran: @Faisal: I updated my question, please check it
• FAISAL: change your img to this: <img src="/UI/assets/logo.png" alt="">
• thamatam kiran: @Faisal: I am getting errors in imports also for example I referred my service as import { LogSearchService } from '../shared/log-search.service'; which is not working.
• FAISAL: Change it to './../shared/log-search.service'

Answer 1

I modified my code to:

img src="../assets/logo.png" alt="" 

Which loaded my image properly.

By default base URL is set as (/) or root.

This means that your app would start from root folder i.e. locally it would consider localhost:1234/ and on server it would consider root folder.

When you run your app, it may confuse your browser as your files are not at root path and could through 404.

So best way is to add relative path in base href like:

<base href="/Project_Name/">