angular: 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
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 58 (11 by maintainers)
Commits related to this issue
- Add configuration for running using file:/// https://github.com/angular/angular/issues/13948 - Router configuration CommonModule,RouterModule.forRoot(routes,{useHash:true}) - index.html file Remo... — committed to yfyyfy/angular-db-front-end by yfyyfy 7 years ago
- Add configuration for running using file:/// https://github.com/angular/angular/issues/13948 - Router configuration CommonModule,RouterModule.forRoot(routes,{useHash:true}) - index.html file Remo... — committed to yfyyfy/angular-db-front-end by yfyyfy 7 years ago
- Local and packages base href issue fixed, see https://github.com/angular/angular/issues/13948#issuecomment-302727428 — committed to JointEffort/moneymatch by mlindhout 6 years ago
Thanks @Markovy @audrummer15
I got it working completely in a fairly complex angular 2 app with multiple nested routes.
All I needed was
Router configuration with
CommonModule,RouterModule.forRoot(routes,{useHash:true})
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:
it works for me (when serve from file:///)
This is a Working Sample
you are right. Works fine without it. You can remove it and and provide base href programatically
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:
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
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.