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

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>

Plnkr examples have:

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

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

This is a Working Sample

My guess is that this is because we have the new <base href="/"> attribute in the html

you are right. Works fine without it. You can remove it and and provide base href programatically

import {APP_BASE_HREF} from '@angular/common';
{provide: APP_BASE_HREF, useValue : '/' }

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

I had to make it work - IT DOES! - @Markovy you have made my day!!!

Thanks to this comment https://github.com/angular/angular/issues/13948#issuecomment-302727428 👍

Thanks @Justsahid save the day

In response to my above comment, this was failing due to the fact that we were using PushState routing. Changing over to the HashLocationStrategy made everything work! Still can’t read the json files from disk though…

This is awesome! I’m close with my build, but still getting the following error:

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///home/user/dev/dist/' cannot be created in a document with origin 'null' and URL 'file:///home/user/dev/dist/index.html'

Has anyone ran into this, and overcome it? I’m at a loss. Thanks for the help so far!

Thank you mate appreciate it 😃 @jacodv

I don’t remember if I got this working, and after all didn’t need to - I’m running app on localhost instead from file.

Nope that was all. Let me see if I can get my test source and upload it for you to see

@Koshmaar, I have reverted to all in a single folder. Thus all scripts and other resources linked via href / src attributes are in the same folder as index.html. Then all you need todo is omit any paths to the scripts / resources and only reference the name.

@jacodv Hey what did you exactly do to make this work? I’m having similar issue with very simple app that doesn’t want to run from local filesystem.

By default it has <base href="/"> and links to scripts like <script src="/js/shims.js?1485861650332"></script> Obviously the scripts are not found and nothing loads.

I can make the files be found simply by prefixing with dot so that paths are relative to curr dir <base href="./"> and <script src="./js/shims.js?1485861650332"></script> - I see some code being run (navigation structure of site is created), but not “business” logic .

In dev tools I see

EXCEPTION: Uncaught (in promise): SecurityError: Failed to execute ‘replaceState’ on ‘History’: A history state object with URL ‘file:///E:/’ cannot be created in a document with origin ‘null’ and URL ‘file:///E:/WWW/WebdevHomepage/admin2/dist/prod/index.html’.

I tried with <script>document.write('<base href="' + document.location + '" />');</script> magic but the same thing happens.

@jacodv If you have everything bundled into a single file (angular + application code) with no external templates, or other dependencies, I suspect it’s no longer an ajax request issue. Especially if you don’t see any ajax requests being made in the network tab.

@wKoza, I am sure that will; because the API is hosted. I need a solution for the fact that angular 2 is not working when all the content is offline on the file system, let say 3 files [index.html, bundle.js, bundle.css]. the index page has a script reference to both the js and cs file. All are extracted to c:\temp\test. And you open the index file in Chrome via file:///c:/temp/test/index.html.

This does not work on angular 2 but does on angular 1. And as per @thelgevold explanation, we believe that angular 2 load some resources via ajax / xhr request and angular 1 didn’t.