Incorrect JS paths when ng build -prod is deployed in a subfolder

[jarben]

Please provide us with the following information:

1. OS?
   Windows 10

1. Versions:
   angular-cli: 1.0.0-beta.5
   node: 4.4.5
   os: win32 x64
2. Repro steps:

• Fresh app created by "ng new datamatic"
• Then build "ng build prod"
• /dist folder deployed to http://datamatic.co/angular2-test/

1. 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

[filipesilva]

When you're deploying to non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.

In this case, you will need to update to <base href="/angular2-test/"> I believe.

[jarben]

Thanks for your answer @filipesilva , that fixes the issue! Sorry I didn't notice the base tag.

[filipesilva]

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]

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]

@JavierFuentes it doesn't make sense to use --base-href on ng serve the test server will serve in a root path.

[JavierFuentes]

@filipesilva You give me a clue... ng build -prod --base-href \"/mysubfolder/\" works in my server without change original <base href="/"> in my index.html for continue developing.

You can view the result here: http://foobar.cf/calculator

Thanks a lot!

[manuelfink]

@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]

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]

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]

try ng build --prod --aot=false -bh /myfolder -d /myfolder

[JagFrank]

@@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]

are you setting welcome file list as index.html in web.xml ?

[JagFrank]

Thanks, that worked, but the Spring security is blocking it,
tried adding .antMatchers("/**").permitAll() still it doesnt allow angular to load the root page