"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 https://github.com/angular-schule/angular-cli-ghpages/issues/37#issuecomment-406481013, 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: https://github.com/angular-schule/angular-cli-ghpages/issues/37#issuecomment-391644410

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

[ChloeCacola]

For anyone still getting an unknown error, try updating git to the latest version. try first git update-git-for-windows (if you use windows) if that doesn't work, you have an older version than 2.14, so try git update If none of these are a recognized command, download the latest version of git then run git update-git-for-windows

[antpowell]

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

[scabezas632]

This works for me: In the 'index.html' file: <base href="/"> and in the 'angular.json' file: "outputPath": "dist/[PROJECT]"

then run: ng build --prod --output-path [PROJECT] --base-href "https://[USERNAME].github.io/[PROJECT]/" ngh --dir=[PROJECT]

for any reason, when i runned the build command it dont created the folder 'dist' and it created directly the folder [PROJECT]

[JohannesHoppe]

Gentlemen, this seems to be a recurring problem. On the one hand I'm happy that so many people are using angular-cli-ghpages. But on the other hand required support takes more time than expected. Please be patient until I come up with a better solution. I think we need some command (e.g. ngh setup) that helps newcommers to figure out the right settings.

Meanwhile: @Serhansolo A relative base-href will break you project as soon as you are using routes with pathes. Just do a hard reload (F5 without cache) and images and other assets will fail with a 404! I updated your comment.

@romanshutsman Same here don't try to work around base-href. Touching the index.html is not a real solution. I updated your comment.

[JohannesHoppe]

fixed for now via documentation https://github.com/angular-schule/angular-cli-ghpages/commit/98ce574306157723d219cf90dde7b90e991f1b3c

[bamoha]

Hello

I have tried everything mentioned here but i still get this

[bamoha]

so.. the solution above now works, I use an ubuntu machine, so i just added sudo to the begining

[JohannesHoppe]

A local installation and npx ngh does not require sudo, too. latest README does not encourages a global installation any longer.

[boristep1]

$ ngh -no-silent --dir=dist/myapp1 index.html could not be copied to 404.html. Continuing without an error. (Hint: are you sure that you have setup the --dir parameter correctly?) { Error: ENOENT: no such file or directory, lstat 'C:\myapp\test1\myapp1\dist\index.html' errno: -4058, code: 'ENOENT', syscall: 'lstat',

path: 'C:\myapp\test1\myapp1\dist\index.html' }

*** An error occurred!

It looks like parameter --dir is ignored

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