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

[jarben]

Please provide us with the following information:

1. OS?
   Windows 10
2. Versions:
   angular-cli: 1.0.0-beta.5
   node: 4.4.5
   os: win32 x64
3. Repro steps:
4. Fresh app created by "ng new datamatic"
5. Then build "ng build prod"
6. /dist folder deployed to http://datamatic.co/angular2-test/
7. 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

[chandresh87]

don't give the root to pass through the spring controller.
map your java controller to somethings else like

rest-dispatcher
/JagFrank/

So the url for java controller will be localhost:8080/context/JagFrank/

[devsubhajit]

@filipesilva ,
Hi, I also had the same issue and I fixed it by manually changing the base root for my server. It works fine unless or until I refresh or reload the page..

Its showing me the 404 error.
How to solve this issue?

Any other way for solution? Please share.

Thanks

[filipesilva]

@shaadh you need to configure your server to fallback to index.html, see https://angular.io/docs/ts/latest/guide/deployment.html#!#fallback for details.

[itaysk]

Having the same issue as @chandresh87 - ng build --prod --base-href "/mypath/" allows the app to load, but still 'assets' are unable to load because they are looked for in root.
But --aot=false and -d didn't help me.
What's the best practice here? surely I'm not expected to rewrite all urls to match the production setup.

[filipesilva]

@itaysk you'll have to set --public-url "/mypath/" as well for that case AFAIK.

[itaysk]

@filipesilva there's no --public-url flag in ng build.. what did you mean?

[filipesilva]

@itaysk apologies, it's --deploy-url.

[pyaf]

@filipesilva adding --deploy-url /static/ does add /static/ before all *.budled.js files but it doesn't do so with assets. How to solve this problem?

[filipesilva]

@rishabhiitbhu it will add it for assets referenced in css, but not for images referenced in html. The tracking issue for that is https://github.com/angular/angular-cli/issues/6666, but discussion on it can be found in https://github.com/angular/angular-cli/issues/4517.

[Kartik1607]

Hey, I am trying to host a static page on github pages. using
ng build --prod --base-href "https://kartik1607.github.io/angularHeader/" ngh

All the js and css load up fine but assets give 404.

Angular tried to find assets at https://kartik1607.github.io/assets/wallpaper.jpg instead of https://kartik1607.github.io/angularHeader/assets/wallpaper.jpg

[Kartik1607]

Solved the issue using ng build --prod --base-href "https://kartik1607.github.io/angularHeader/" -d "/angularHeader" command.

[simonatorw]

Updating the base href works but when I refresh the page, I get 404

[Kartik1607]

@simonatorw
Are you getting 404 on bundles generated or on assets?
Are you hosting your application inside some sub directory? eg: In my case subdirectory was "/angularHeader"

[animeshsingh04]

@filipesilva I am facing similar issue, while running ng build command it is deleting dist folder.

Angular CLI: 1.6.6
Node: 6.11.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

the error is...

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 303 bytes [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 323 bytes [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]

ERROR in TypeError: Cannot read property 'loadChildren' of undefined
at _collectLoadChildren (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler\bundles\compiler.umd.js:29034:20)
at listLazyRoutes (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler\bundles\compiler.umd.js:29009:49)
at visitLazyRoute (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler\bundles\compiler.umd.js:31176:47)
at AotCompiler.listLazyRoutes (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler\bundles\compiler.umd.js:31144:20)
at AngularCompilerProgram.listLazyRoutes (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler-cli\src\transformers\program.js:156:30)
at Function.NgTools_InternalApi_NG_2.listLazyRoutes (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@angular\compiler-cli\src\ngtools_api.js:44:36)
at AngularCompilerPlugin._getLazyRoutesFromNgtools (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:248:66)
at Promise.resolve.then.then (C:\Users\ANIMESH\Desktop\notes\ngApp\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:565:50)
PS C:\Users\ANIMESH\Desktop\notes\ngApp>

[nhhockeyplayer]

developers typically (at least I do for convenience and just to have a tomcat server running with ability to go there and launch any project of convenience from anywhere from home office or mobile phone) develop a project off of tomcat root here is the path
C:\TOMCAT\WEBAPPS\ROOT\ngapp

angular-cli bundles and builds out to
C:\TOMCAT\WEBAPPS\ROOT\ngapp\dist
thats where index.html and all the bundles are located

furthermore an assets dir lives under there too
C:\TOMCAT\WEBAPPS\ROOT\ngappt\dist\assets

I run my tomcat on 8080
http://localhost:8080/ngapp

app runs but paths to assets and bundles are frigged
setting
<base href="">
results in weird paths to bundles and assets

I am seeing (depending on what we set href to) paths ahead or after resulting in inaccessible paths to bundles and assets.

currently my app runs but cannot retrieve assets no matter what I try

currently

if I set
<base href="/ngapp/dist">
my bundles are not found 404

if I set
<base href="/ngapp/dist/">
my bundkles are found and app runs but cannot find assets with 404 on all assets

???

[wangki]

Saved my day.

[nikuelias]

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]

@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 /app references were all routing to my 404 handler. base-href was it! 💯

[Un1xMida]

you can run the build production mode with specific base href with this command

ng build --prod --aot --output-path dist/ar --base-href /translate/ar

[courageDeveloper]

Github!! Code Savers thanks @filipesilva

[Ishapanda25]

@filipesilva your solution saved me. Thanks a lot!!

[html5ravi]

Am getting the same issue of following
assets/img/brands/max.png 502 (Bad Gateway)

all the assets folder taking root path. 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]

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.

yeah its working but when i refresh a page then through page not found error

[tyronboyd]

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]

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]

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

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]

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]

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

This will work

[angular-automatic-lock-bot[bot]]

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._}