"index.html could not be copied to 404.html. Continuing without an error." for Angular 6

[DavidHulsman]

Created an empty Angular 6 application. Installed ngh globally and then ran the next two commands:

ng build --prod --base-href https://dutchmandavid.github.io/angular-io-code
ngh

then got this as output:

(node:1756) ExperimentalWarning: The fs.promises API is experimental
index.html could not be copied to 404.html. Continuing without an error.
Successfully published!

The url itself (https://dutchmandavid.github.io/angular-io-code) now gives the next error:

File not found

The site configured at this address does not contain the requested file.

Copying index.html and renaming it to 404.html does nothing - even after rebuilding and ngh-ing it again.

---

Archive for if the page ever changes: http://archive.is/uQxVg (web.archive.org didn't want to cooperate)

[DavidHulsman]

Turns out Angular 6 changed angular.json's "outputPath": "dist/" into "outputPath": "dist/[PROJECTNAME]", which placed everything in the dist folder in a subfolder, which breaks ngh's functionality.

After turning the option from the latter into the former everything works again.

[JohannesHoppe]

thanks for reporting! i will think about a solution...

[fmalcher]

For now, until we provided a solution for this, you can solve this by doing:

ngh --dir dist/[PROJECTNAME]

[imancini]

@fmalcher Could you please explain what ngh --dir dist/[PROJECTNAME] does? I tried using it, and it made my error go away, but when I visit 'https://[username].github.io/[projectname]', I am still just seeing the basic Angular CLI readme page and not my actual angular project running correctly.

[fmalcher]

ngh --dir dist/[PROJECTNAME] takes the specified build directory dist/[PROJECTNAME] and publishes it to the gh-pages branch (if not specified differently).
However, when publishing to GH Pages under a subfolder you also need to set the base href accordingly at build time:

ng build --prod --base-href=/[projectname]/

Otherwise your browser will try to find the application bundles in the domain root and not in the subfolder. Note the leading and trailing slash, they are important.
There is no need to set the base href when you deploy to a domain root without sub folder.

I just tried both ways and they worked fine. Please let us know if there are issues!
@imancini

[JohannesHoppe]

Please also take a look at angular.json, scroll down to "defaultProject":.
Thats the name of you project and also the name of its folder in /dist.
Most probably that the value you have to enter for [PROJECTNAME] as described by @fmalcher .

[imancini]

@fmalcher @JohannesHoppe Thank you for the clear description. This makes a lot more sense now. I ended up getting it to work last night by changing my github pages deploy branch to the gh-pages one that was created by the ngh --dir dist/[PROJECTNAME] command.

When I built, I still ran ng build --prod --base-href "http://[username].github.io/[projectname]" which I'm not sure is ideal because the base href was set to that URL which broke all of my image paths. To fix this though, I set a custom base href in my development index.html to fix them and just used a relative path to assets/image.jpg for my images and that works for both production and development.

Thank you!!

[Abelhawk]

"Failed to load resource: the server responded with a status of 404 ()"

[JohannesHoppe]

There could be multiple reasons for that. Usually it's a configuration error. You could debug this now, or you need to wait some time until I add some upfront validations to the code. I'm sorry. Busy time for us here.

[romanshutsman]

solution for me:

ng build --prod --output-path project --base-href "https://romanshutsman.github.io/project/"
ngh --dir=dist/project

but you should change path to photos

[Pandeyjidev]

I'm still getting an error .. This comes up as soon as I do

ngh --dir dist/

My project folder is in the following sequence portfolio -> dist -> portfolio -> index.html

@fmalcher any other way I can work this out?

An error occurred!
Error: Unspecified error (run without silent option for detail)
at /usr/local/lib/node_modules/angular-cli-ghpages/node_modules/gh-pages/lib/index.js:232:19
at _rejected (/usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:844:24)
at /usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:870:30
at Promise.when (/usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:1122:31)
at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:788:41)
at /usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:604:44
at runSingle (/usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:137:13)
at flush (/usr/local/lib/node_modules/angular-cli-ghpages/node_modules/q/q.js:125:13)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)

[JitendraGurjar]

I'm getting following error
"index.html could not be copied to 404.html. Continuing without an error.
Successfully published!"
also adding screenshot.

Inside angular.json

And "defaultProject": "ngProj"

But when I am trying to hit the URL it gives me an following error.

Please help me to resolve this issue. Thank you

[JohannesHoppe]

@JitendraGurjar This is an Angular 6 project. Path has changed from 5 to 6. For now, add the option --dir=dist/ngProj. In future I will add an automatic detection

[JitendraGurjar]

Thank you for your quick response.
I have changed to
"defaultProject": "dist/ngProj" in angular.json

But still getting the same error.

[JohannesHoppe]

You are not supposed to change the anguar.json file!!
Just execute ngh --dir=dist/ngProj. Chances are high, that you have to adjust more command line arguments. Please read the README carefully and please take special care about credentials (GH_TOKEN ).

[romanshutsman]

you dont follow my link you should enter: ng build --prod --output-path PROJECT --base-href " https://romanshutsman.github.io/PROJECT /" ngh --dir=dist/ PROJECT пт, 20 лип. 2018 о 06:47 JitendraGurjar <notifications@github.com> пише:

…

I'm getting following error "index.html could not be copied to 404.html. Continuing without an error. Successfully published!" also adding screenshot. [image: image] <https://user-images.githubusercontent.com/41449599/42982152-98fbf2be-8bfd-11e8-8249-b5af5e95278d.png> Inside angular.json [image: image] <https://user-images.githubusercontent.com/41449599/42981986-c66ad72a-8bfc-11e8-8f90-2917ebab3ef0.png> And "defaultProject": "ngProj" But when I am trying to hit the URL it gives me an following error. [image: image] <https://user-images.githubusercontent.com/41449599/42982059-23b2638a-8bfd-11e8-81e0-7b587d0f4bb4.png> Please help me to resolve this issue. Thank you — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#37 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AbwAvuXA4RX_M_YAMpxwPFdCxQSCcsdxks5uIVLNgaJpZM4T8kaC> .

[listgaus]

is there any solution by now? im experiencing issues deploying my project
after typing ng build --prod --output-path PROJECT --base-href "

ng --dir=dis/project
raises an error evey time

[JohannesHoppe]

The command of this project is called ngh. NOT ng.

[listgaus]

yes small error in my comment here, used ngh
but im afraid i still got the same errors as @JitendraGurjar mentioned.

[JitendraGurjar]

@JohannesHoppe thank you for your support.

I tried that command but still not working, earlier it was showing 404 but now it is showing a blank page.

[fmalcher]

@JitendraGurjar You should see the error in the browser console.
Most probably the base-href option is missing, as explained here: #37 (comment)

[Serhansolo]

Guys, I was just trying to get things working and I noticed that setting a --base-path of ./ also works when deploying to ghpages.

the exact commands I used were:
ng build --prod --base-href="./"

and after that I did:
ngh --branch="production" --dir="dist/[name-of-your-app]"

---

Note by Johannes:
Don't use this advice. Code will break on hard reloads.

[romanshutsman]

@JitendraGurjar try write in index.html <base href="">

---

Note by Johannes:
Don't use this advice. Code will break on hard reloads.

[Serhansolo]

@romanshutsman I am not sure how correct it is to change the contents of your built files...

[JohannesHoppe]

Have you tried:
ngh --no-silent --dir=dist/myapp1 (two dashes)

[boristep1]

It works

[djblanc360]

@JohannesHoppe when I use ngh --no-silent --dir=dist/myapp1

my error is
ProcessError: fatal: AggregateException encountered.
One or more errors occurred.
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': Invalid argument

Also tried npx ngh --repo=https://GH_TOKEN@github.com/organisation/your-repo.git --name="Displayed Username" --email=mail@example.org
from #36

[Cygra]

My error msg is also index.html could not be copied to 404.html. Continuing without an error.

I solved this problem magically by adding /index.html on the end of the URL after struggling for more than ten minutes.

[manimayan]

Execute one by one in GIT BASH. I got rid of 404.html problem

npm i angular-cli-ghpages --save-dev
ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"
npx ngh --no-silent

[gaizik]

I came across this issue myself the way I was able to solve it was to first change the "outputPath" in angular.json from "dist/[PROJECT NAME]" to "dist/"

then run
ng build --pord --base-href https://[USERNAME].github.io/[REPONAME]/index.html

Why/How does this work idk, all ik is it worked and you can check here: https://antpowell.github.io/DisclAImer

[gaizik]

OMFG Thank you !!!!!

[Sathishchary]

@gaizik I have followed the all the steps, But I could not deploy my project in github,its showing error when pushing ..

Followed this steps:
Changed the "outputPath": "dist/", in angular.json file.
ng build --prod --base-href "https://[userName].github.io/[ProjectName]"
npx ngh --no-silent
--->
Committing
Pushing
*** An error occurred!

{ ProcessError: bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error

any changes i need to do ?

[JohannesHoppe]

You have to authenticate. Read that part about GH_TOKEN

[KothaSathish]

Thanks for reply @JohannesHoppe , Can you please elaborate GH_TOKEN, and Any suggestion links.

[JohannesHoppe]

You are welcome:

https://github.com/angular-schule/angular-cli-ghpages/blob/master/README.md#extra
https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line

[nyembotech]

hi guys I just want to deploy my app to firebase and I have this problem

"This file does not exist and there was no index.html found in the current directory or 404.html in the root directory.

Why am I seeing this?
You may have deployed the wrong directory for your application. Check your firebase.json and make sure the public directory is pointing to a directory that contains an index.html file.

You can also add a 404.html in the root of your site to replace this page with a custom error page."

[nyembotech]

Any help

[loaizamateo]

Error in angular 8

[niraliG]

For now, until we provided a solution for this, you can solve this by doing:

ngh --dir dist/[PROJECTNAME]

this worked reallly great
thanks for posting

[erniephillips]

FOUND THE WORKING FIX!!!
The explanation is here: https://angular.io/guide/deployment#deploy-to-github-pages

1. Run: ng build --prod --output-path docs --base-href /your-project/
2. make a copy of docs/index.html and name it docs/404.html
3. ngh --dir dist/docs
4. open in browser, see my working example: https://erniephillips.github.io/phillips-computer-repair-shop/

Happy coding.

[JohannesHoppe]

To all of you. Please read the following article first, many questions should be answered there:

https://angular.schule/blog/2020-01-everything-github

Among other things the new API (ng deploy) is shown here.

[erniephillips]

To all of you. Please read the following article first, many questions should be answered there:

https://angular.schule/blog/2020-01-everything-github

Among other things the new API (ng deploy) is shown here.

That seems much more straight forward. It's just the one command:
ng deploy --base-href=/your-project/

Thank you!

[Atekawere]

npx angular-cli-ghpages --dir=dist/git
index.html could not be copied to 404.html. This does not look like an angular-cli project?!
(Hint: are you sure that you have setup the directory correctly?)
Diagnostic info: ENOENT: no such file or directory, stat '/home/victor/Desktop/Git-Search/Git/dist/git/index.html'
👨🚀 Uploading via git, please wait...
❌ An error occurred when trying to deploy:
ENOENT: no such file or directory, stat '/home/victor/Desktop/Git-Search/Git/dist/git'

getting this error that i dont understand

[tibari1980]

Solution for me : worked successfully!!!!!!

ng build --prod --output-path project --base-href="https://tibari1980.github.io/SiteAngular7/"
ngh --dir=dist/FontEndPiXABAY

[tibari1980]

Second screen :

[deepakcs7050]

index.html could not be copied to 404.html. This does not look like an angular-cli project?!
(Hint: are you sure that you have setup the directory correctly?)
Diagnostic info: ENOENT: no such file or directory, stat '/home/deepak/deepaktest/Vishal/imortant folder/Angular_deploy_demo/dist/dist/index.html'
🚀 Uploading via git, please wait...
❌ An error occurred when trying to deploy:
ENOENT: no such file or directory, stat '/home/deepak/deepaktest/Vishal/imortant folder/Angular_deploy_demo/dist/dist'

[fmalcher]

@deepakcs7050 It looks like youre trying to run the command from the dist folder. Please run it from the project root. 🙂
If this doesn't help, please post the exact command you entered.