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

change your img to this: <img src="/UI/assets/logo.png" alt=""> — FAISAL
– FAISAL, Commented Aug 4, 2017 at 7:50
@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. — thamatam kiran
– thamatam kiran, Commented Aug 4, 2017 at 7:53

Bugs · Accepted Answer · 2017-08-08 09:46:44Z

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/”>

edited Aug 8, 2017 at 9:46

Bugs

4,4799 gold badges34 silver badges41 bronze badges

answered Aug 8, 2017 at 8:21

thamatam kiran

8911 bronze badges

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

Collectives™ on Stack Overflow

Angular2 Routing not working in IIS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related