CODEWITHSUNDEEP
angulardeploymentgithub-pagesangular8ngx-translate
jesusWalks
jesusWalks

Reputation: 355

Angular 8 failed deploy to Github Pages -

Everything works fine on my localhost.

Then I used ng deploy --base-href=/dentist-angular/ to deploy my app to Github Pages.

There is an HTTP error response for each section where my text should be. You should know that all text is being pulled into the page using NGX translate - so I assume this is part of the issue.

I have deleted and redeployed but the problem persists.

Error message in the console...

Object { headers: {…}, status: 404, statusText: "Not Found", url: "https://jamesross06000.github.io/assets/i18n/fr.json", ok: false, name: "HttpErrorResponse", message: "Http failure response for https://jamesross06000.github.io/assets/i18n/fr.json:

This could well be a path issue, but as I followed the install and deploy instructions exactly, I'm not sure what to try from here.

HTML...

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dentist</title>
    <base href="https://jamesRoss06000.github.io/dentist-angular/">    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <script src="env.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.748d964c6c80975e08dc.css"></head>
  <body>
    <app-root></app-root>
  <script src="runtime-es2015.edb2fcf2778e7bf1d426.js" type="module"></script><script src="runtime-es5.edb2fcf2778e7bf1d426.js" nomodule defer></script><script src="polyfills-es5.6696c533341b95a3d617.js" nomodule defer></script><script src="polyfills-es2015.2987770fde9daa1d8a2e.js" type="module"></script><script src="main-es2015.c08ed25e5c5c9aef5a4b.js" type="module"></script><script src="main-es5.c08ed25e5c5c9aef5a4b.js" nomodule defer></script></body>
</html>

Is it just that using NGX translate with Github Pages is a big no-no?

Here is the Github Pages URL if you needed to see the errors logged in the console.

This is an error that is repeated several times in the console log...

ee  @   main-es2015.c08ed25….js:1

And this is the file structure within the created dist folder...

enter image description here

Thanks for any help.

Upvotes: 2

Views: 354

Answers (1)

jesusWalks
jesusWalks

Reputation: 355

I found a solution, although I don't have an explanation as to why it wasn't working before.

To build and deploy an Angular 8 project to Github pages use the following...

npm install -g angular-cli-ghpages

ng build --prod --base-href "<repo-name>"

ngh --dir dist/<project-name>

The above done the trick for me.

Upvotes: 3

Related Questions