angular2 confusing browser

Question

if I build an angular2 app, I can easily go into my dev folder, double-click on my index.html and the browser will open the page and get all resources displaying the app right - without any local dev-server.

But when I add the <base href="/"> tag in index.html that I NEED for angular's router to work, the browser can't load the page anymore.

Using a dev-server this works fine.

Can someone explain me what's the reason for that ??

See also http://stackoverflow.com/questions/34535163/angular-2-router-no-base-href-set/34535256#34535256 — Günter Zöchbauer, Jun 10 '16 at 10:21
Why does angular need that tag to be present for router to work ? — M.N. Bug, Jun 10 '16 at 10:43
To know what is the static part of the URL and what part it has to change on route changes (dynamic part). This is relevant when the root directory is not `/` like `/somefolder/myapp/index.html` — Günter Zöchbauer, Jun 10 '16 at 10:43

score 17 · Answer 1 · answered Jun 10 '16 at 10:25

17

When you use <base href="/"> and open the index.html directly base is considered to be a file file:///C:/, or similar, depending on where your file is.

One solution is to use relative path: with <base href="./"> base will be current folder where your file is. You can use this if you have to run app from USB stick, for example

answered Jun 10 '16 at 10:25

Sasxa

40,334
16
88
102

When I had `` my angular 2 solution was working locally with nodejs but when I copied the files over the IIS on our server I got 404's for all the scripts and css files in index. Adding the `.` before the `/` make it work. Thank you. – Kevin Quiring Jul 26 '16 at 21:41

score 0 · Answer 2 · answered Sep 24 '16 at 13:41

I have a virtual directory in IIS 7.5 named /ang2 that points to C:\Apps\hello-world\dist. I am building the project with angular-cli (ie: "ng build --target=production" or "ng build target=development"). If I change base href to ./ it works. I also got it working with ./ang2. I have not tested any routing yet as this is a just a project created with the command "ng new hello-world".

angular2 confusing browser

2 Answers2