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

DavidHulsman · 2018-05-12T21:27:38Z

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)

The text was updated successfully, but these errors were encountered:

DavidHulsman · 2018-05-12T22:35:48Z

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 · 2018-05-12T23:17:19Z

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

fmalcher · 2018-05-12T23:18:22Z

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

ngh --dir dist/[PROJECTNAME]

imancini · 2018-05-23T22:29:40Z

@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 · 2018-05-24T09:08:37Z

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 · 2018-05-24T09:19:09Z

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 · 2018-05-24T15:28:54Z

@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 · 2018-07-01T04:47:42Z

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

JohannesHoppe · 2018-07-01T13:00:41Z

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.

…of dist/. Need to explicitly pass the output dir to nah command. angular-schule/angular-cli-ghpages#37

angular-schule/angular-cli-ghpages#37

romanshutsman · 2018-07-10T14:20:29Z

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 · 2018-07-18T06:45:52Z

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 · 2018-07-20T03:47:24Z

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 · 2018-07-20T03:56:52Z

@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 · 2018-07-20T06:02:38Z

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

But still getting the same error.

JohannesHoppe · 2018-07-20T07:14:42Z

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 · 2018-07-20T08:04:02Z

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 <[email protected]> пише:

…

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 · 2018-07-22T09:15:33Z

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 · 2018-07-22T11:48:01Z

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

listgaus · 2018-07-22T11:50:06Z

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

JitendraGurjar · 2018-07-22T17:13:34Z

@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 · 2018-07-22T19:22:57Z

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

Serhansolo · 2018-07-26T20:02:49Z

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 · 2018-07-26T20:11:00Z

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

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

Serhansolo · 2018-07-26T20:11:57Z

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

JohannesHoppe · 2018-08-10T05:13:15Z

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

boristep1 · 2018-08-29T11:12:24Z

$ 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 · 2018-08-29T12:02:43Z

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

boristep1 · 2018-08-29T12:34:00Z

It works

djblanc360 · 2018-08-30T00:17:09Z

@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://[email protected]/organisation/your-repo.git --name="Displayed Username" [email protected]
from #36

Cygra · 2018-09-20T13:17:45Z

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 · 2018-09-20T23:39:06Z

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 · 2019-03-23T19:39:27Z

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 · 2019-03-23T19:40:01Z

OMFG Thank you !!!!!

Sathishchary · 2019-03-30T07:44:30Z

@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 · 2019-03-30T10:08:45Z

You have to authenticate. Read that part about GH_TOKEN

KothaSathish · 2019-03-30T10:17:52Z

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

JohannesHoppe · 2019-03-30T12:35:19Z

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 · 2019-06-21T09:58:54Z

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 · 2019-06-21T09:59:04Z

Any help

loaizamateo · 2019-09-06T19:38:35Z

Error in angular 8

niraliG · 2020-02-02T16:12:17Z

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 · 2020-02-16T16:27:37Z

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

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

Happy coding.

JohannesHoppe · 2020-02-16T16:30:57Z

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 · 2020-02-16T17:02:01Z

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 · 2020-04-14T06:12:56Z

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

…S ***!! - REF: https://alligator.io/angular/deploying-angular-app-github-pages/ - trying angular-cli-ghpages again - ng build --prod --base-href "cbakerphoto" - ng --dry-run - ngh --message="Another deploy attempt via angular-cli-ghpages" NO! DO-OVER! - REF: https://medium.com/tech-insights/how-to-deploy-angular-apps-to-github-pages-gh-pages-896c4e10f9b4 - ng build --prod --base-href "https://shigimcp.github.io/cbakerphoto/" - npx angular-cli-ghpages — dir=dist/cbakerphoto - OOPS! npx angular-cli-ghpages — dir=dist/cbakerphoto-app/ - RESULT: 404 error at https://shigimcp.github.io/cbakerphoto/ DO OVER! AGAIN! - REF: angular-schule/angular-cli-ghpages#37 - REF: https://angular.io/guide/deployment#deploy-to-github-pages - ng build --prod --output-path ../docs --base-href /cbakerphoto-app/ - npx angular-cli-ghpages — dir=dist/cbakerphoto-app/ - REF: https://medium.com/tech-insights/how-to-deploy-angular-apps-to-github-pages-gh-pages-896c4e10f9b4 - ng build —base-href="https://shigimcp.github.io/cbakerphoto/" - OH, FUGGIT! I'm just scrambling now...

tibari1980 · 2020-10-28T23:29:15Z

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

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

tibari1980 · 2020-10-28T23:29:59Z

Second screen :

deepakcs7050 · 2021-03-27T04:18:40Z

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 · 2021-03-27T08:52:06Z

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

JohannesHoppe added enhancement high-prio labels May 12, 2018

dyh333 mentioned this issue Jun 26, 2018

index.html could not be copied to 404.html. Continuing without an error. #41

Closed

railsstudent added a commit to railsstudent/ng-fun-prog that referenced this issue Jul 2, 2018

Due to changes in angular.json, the project is created as sub-folder …

81b8a30

…of dist/. Need to explicitly pass the output dir to nah command. angular-schule/angular-cli-ghpages#37

railsstudent added a commit to railsstudent/ng-fun-prog that referenced this issue Jul 2, 2018

Add script to deploy the app to github.io

7e958b8

angular-schule/angular-cli-ghpages#37

railsstudent added a commit to railsstudent/ng-fun-prog that referenced this issue Jul 2, 2018

Add script to deploy the app to github.io

f3464a9

angular-schule/angular-cli-ghpages#37

fmalcher mentioned this issue Sep 23, 2018

Facing issue for deployment with Angular6 #45

Closed

JohnGuidry mentioned this issue May 11, 2019

github pages deployment is not properly being set in dist JohnGuidry/ng5#1

Closed

yodigi7 mentioned this issue Dec 20, 2019

"index.html could not be copied to 404.html." on ng deploy #86

Closed

danielschmitz mentioned this issue Apr 22, 2024

5.4 Its Time to Deploy! -> Error on my end. danielschmitz/my-sales-app-angular#14

Open

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

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

Comments

DavidHulsman commented May 12, 2018

DavidHulsman commented May 12, 2018

Uh oh!

JohannesHoppe commented May 12, 2018

Uh oh!

fmalcher commented May 12, 2018

Uh oh!

imancini commented May 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fmalcher commented May 24, 2018

Uh oh!

JohannesHoppe commented May 24, 2018

Uh oh!

imancini commented May 24, 2018

Uh oh!

Abelhawk commented Jul 1, 2018

Uh oh!

JohannesHoppe commented Jul 1, 2018

Uh oh!

romanshutsman commented Jul 10, 2018

Uh oh!

Pandeyjidev commented Jul 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JitendraGurjar commented Jul 20, 2018

Uh oh!

JohannesHoppe commented Jul 20, 2018

Uh oh!

JitendraGurjar commented Jul 20, 2018

Uh oh!

JohannesHoppe commented Jul 20, 2018

Uh oh!

romanshutsman commented Jul 20, 2018 via email

Uh oh!

listgaus commented Jul 22, 2018

Uh oh!

JohannesHoppe commented Jul 22, 2018

Uh oh!

listgaus commented Jul 22, 2018

Uh oh!

JitendraGurjar commented Jul 22, 2018

Uh oh!

fmalcher commented Jul 22, 2018

Uh oh!

Serhansolo commented Jul 26, 2018 • edited by JohannesHoppe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

romanshutsman commented Jul 26, 2018 • edited by JohannesHoppe Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Serhansolo commented Jul 26, 2018

Uh oh!

JohannesHoppe commented Aug 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

boristep1 commented Aug 29, 2018

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

It looks like parameter --dir is ignored

Uh oh!

JohannesHoppe commented Aug 29, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

boristep1 commented Aug 29, 2018

Uh oh!

djblanc360 commented Aug 30, 2018

Uh oh!

Cygra commented Sep 20, 2018

Uh oh!

manimayan commented Sep 20, 2018

Uh oh!

gaizik commented Mar 23, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gaizik commented Mar 23, 2019

Uh oh!

Sathishchary commented Mar 30, 2019

imancini commented May 23, 2018 •

edited

Loading

Pandeyjidev commented Jul 18, 2018 •

edited

Loading

Serhansolo commented Jul 26, 2018 •

edited by JohannesHoppe

Loading

romanshutsman commented Jul 26, 2018 •

edited by JohannesHoppe

Loading

JohannesHoppe commented Aug 10, 2018 •

edited

Loading

JohannesHoppe commented Aug 29, 2018 •

edited

Loading

gaizik commented Mar 23, 2019 •

edited

Loading

erniephillips commented Feb 16, 2020 •

edited

Loading