Solvedangular Cannot run angular 2+ from file:/// - looks like 'base href="/"' is the issue

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Windows development PC
ng new test-local
cd test-local
ng serve
See content of index.html and no errors in the console in chrome on http://localhost:4200

ng build
Navigate to /dist and open index.html in Chrome
Do not see content of page and 404 errors in console in chrome on file:///fullpath/index.html

Expected behavior

Expected to see the same result on http:// and file:/// views. This is currently the case on angular 1.6.x

Minimal reproduction of the problem with instructions

see current behaviour to reproduce

What is the motivation / use case for changing the behavior?

We have many applications that serve up SPA websites from file. iOS and OSX do not allow the hosting of a web server in your application.

Please tell us about your environment:

Windows 10, Sublime 3

  • Angular version: 2.0.X

Latest as of today - 16 January 2017 - ^2.1.0

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

All

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    TypeScript ~2.0.3

  • Node (for AoT issues): node --version =
    node -v : 6.9.1
    npm -v: 3.10.9

52 Answers

✔️Accepted Answer

Thanks @Markovy @audrummer15

I got it working completely in a fairly complex angular 2 app with multiple nested routes.

All I needed was

  1. Router configuration with
    CommonModule,RouterModule.forRoot(routes,{useHash:true})

  2. and this in the index.html file
    Removed base Href="/" tag from html and added it like this.
    <script>document.write('<base href="' + document.location + '" />');</script>

Other Answers:

Plnkr examples have:

<script>document.write('<base href="' + document.location + '" />');</script>

it works for me (when serve from file:///)

With angular-cli, you can change base url with ng build --base-href ./

More Issues: