Repository navigation
Incorrect JS paths when ng build -prod is deployed in a subfolder #1080
Description
Please provide us with the following information:
- OS?
Windows 10
- Versions:
angular-cli: 1.0.0-beta.5
node: 4.4.5
os: win32 x64 - Repro steps:
- Fresh app created by "ng new datamatic"
- Then build "ng build prod"
- /dist folder deployed to http://datamatic.co/angular2-test/
- The log given by the failure:
Browser log when accessing http://datamatic.co/angular2-test/:
Files are loaded relative to the domain, not the folder
Activity
filipesilva commentedon Jun 17, 2016
When you're deploying to non-root path within a domain, you'll need to manually update the
<base href="/">tag in yourdist/index.html.In this case, you will need to update to
<base href="/angular2-test/">I believe.jarben commentedon Jun 17, 2016
Thanks for your answer @filipesilva , that fixes the issue! Sorry I didn't notice the base tag.
filipesilva commentedon Jun 17, 2016
Don't be sorry, this is a common scenario and not so easy to identify. Next time someone has the same problem they will find your issue :)
JavierFuentes commentedon Oct 22, 2016
It worked for me to deploy in my production server, but after change, 'ng serve' doesn't load application anymore either in http://localhost:4200/myfolder or in http://localhost:4200 paths.
Is there any way of making this change automatically depending on prod/dev execution mode?
Thanks in advance!
filipesilva commentedon Oct 27, 2016
@JavierFuentes it doesn't make sense to use
--base-hrefonng servethe test server will serve in a root path.JavierFuentes commentedon Oct 27, 2016
@filipesilva You give me a clue...
ng build -prod --base-href \"/mysubfolder/\"works in my server without change original<base href="/">in myindex.htmlfor continue developing.You can view the result here: http://foobar.cf/calculator
Thanks a lot!
manuelfink commentedon Nov 3, 2016
@filipesilva I think @JavierFuentes idea of hosting the app while development within another subdirectory makes sense in a specific context. See my new issue #3010 therefore. I'd appreciate your opinion on it.
chandresh87 commentedon Mar 23, 2017
Hi ,
I have a similar issue. I have deployed Angular 2 inside War file in tomcat. I have changed base href to "/AngularSpring" in index.html.
http://localhost:8080/AngularSpring/---- . Application URL.
The application is loading fine but resources which are inside asset folder gives 404.
http://localhost:8080/assets/env.json 404.
Following line is giving issue at runtime
this.getConfigFile('./assets/env.json');
Is there any way which automatically appends ./AngularSpring before the './assets/env.json as inside war file asset folder in inside /AngularSpring.
please help I have N number of the solution but none of them worked. I don't want to change the path in the file manually.
JagFrank commentedon Mar 24, 2017
I am having same issue,
localhost:8080/ --works
but
localhost/myfolder -- doesnt work
tried ng build -prod --base-href /myfolder /\ but doesnt help,
Any light please?
Appreciate your response in advance.
Frank
chandresh87 commentedon Mar 24, 2017
try ng build --prod --aot=false -bh /myfolder -d /myfolder
JagFrank commentedon Mar 24, 2017
@@thanks Chandresh!
Above command suggested by Chandresh87 , changes the base ref in index.html
to base href="/myfolder"
also tried ng build -prod --base-href /myfolder does the same,
but no joy
Any reason why I am unable to access from contecxt path
localhost:8090/myfolder -- doesnt work
Where as localhost:8090 does work, PS: I am using tomcat8 ~(apache-tomcat-8.0.27) incase it helps or makes difference
Thanks
chandresh87 commentedon Mar 24, 2017
are you setting welcome file list as index.html in web.xml ?
JagFrank commentedon Mar 28, 2017
Thanks, that worked, but the Spring security is blocking it,
tried adding .antMatchers("/**").permitAll() still it doesnt allow angular to load the root page
16 remaining items
nikuelias commentedon May 2, 2018
Is there a way to avoid setting the base-href in the ng build?
I'm working with a project and the war file can be renamed to whatever. So I don't know what is the real base href.
It will be so helpful to avoid it and still load the fonts, because there is no way to know the project name.
Thanks
erikyuzwa commentedon May 10, 2018
@filipesilva you're brighter then a brain pie! Thank you so much - Was troubleshooting my Node Express + Angular6 app and for the life of me couldn't figure out why
/appreferences were all routing to my 404 handler.base-hrefwas it! 💯courageDeveloper commentedon Jul 2, 2018
Github!! Code Savers thanks @filipesilva
Ishapanda25 commentedon Jul 17, 2018
@filipesilva your solution saved me. Thanks a lot!!
html5ravi commentedon Aug 20, 2018
Am getting the same issue of following
assets/img/brands/max.png 502 (Bad Gateway)all the assets folder taking
rootpath. Other files are working as expected. Please help me out.Versions are:
Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Package Version
@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/.DS_Store
@angular/cdk 6.4.2
@angular/cli 6.0.8
@angular/material 6.4.2
@angular/pwa 0.6.8
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 6.2.2
typescript 2.7.2
webpack 4.8.3
sureshkumarcse commentedon Jan 31, 2019
yeah its working but when i refresh a page then through page not found error
tyronboyd commentedon Feb 6, 2019
For anyone still having issues with assets, you should reference your images etc using a relative path e.g "./assets/image-1.png". This resolved my issue.
MarcoHeumann commentedon Mar 11, 2019
I can confirm what @tyronboyd said.
There are three ways to get this done with both assets and all other files i tried.
Nr 1: Change index.html default
<base href="/">to
<base href="./">Nr 2: You can run:
ng build --prod --base-href ./Nr 3: You can change your build process, found in angular.json, to automate this by adding:
"baseHref": "./"To your production configuration.
Obviously you can use fixed paths as well with either of these, but adding this single dot to the default uses relative paths, which I would guess is the default behavior one would expect.
No idea why absolute paths are still a thing in something as advanced as Angular, but oh well. :-)
nikithaperuka89 commentedon Mar 20, 2019
@MarcoHeumann had a similar issue fixed it by changing the index.html default to
was wondering how does the absolute and relative path referencing make the difference. Can you help understand ? Appreciate your help in advance !MarcoHeumann commentedon Mar 20, 2019
To understand this, I urge you to just look at the error when you don't do the change.
It will show whatever file you tried to access in a wrong folder. The base Path seems to be defined "somewhere else" as well and unless you overwrite it, it seems to make zero sense (at least to me).
Basically the absolute path is wrong, like all the time, while making it relative gives you full control over your structure, while also working as expected. We have come to expect relative paths everywhere and that is for a reason, but a reason Angular does not seem to follow.
amitvchaudhary commentedon Apr 11, 2019
Hello, I tried all the solutions but to no avail. My Angular and Backend application both are packaged in one jar. So, is that the reason it is not working or something else.?
amittal1 commentedon Apr 26, 2019
@MarcoHeumann but that would introduce the problem in reloading the page. Because when reloading it uses the current path as the base path.
I am having the same issue. I still haven't figured out the clean and permanent solution.
Though if you don't care about deploying to different paths or folders, there are two ways with absolute path: update base-href in index.html after war file is built or use it in ng build -base-href command.
aj-amelio311 commentedon Jun 9, 2019
This will work
<script>document.write('');</script>angular-automatic-lock-bot commentedon Sep 9, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.