Search code examples
angulardeploymentangular-cligithub-pages

Error deploying Angular4 to ghpages using angular-cli-ghpages


I am trying to deploy a simple Angular 4 app to gh-pages. I have tried several methods and it seems that angular-cli-ghpages is the most up to date way to do it.

I've followed the instructions on the npm angular-cli-ghpages page.

First I installed successfully angular-cli-ghpages,

$ sudo npm i -g angular-cli-ghpages

This command wouldn't work without sudo.

Next I created the dist folder and set the base-href,

$ ng build --prod --base-href "https://shanegibney.github.io/mathapp/"

Then I deployed with,

$ ngh

but this gives errors,

The output can be seen in this image below,

enter image description here

Running angular-cli-ghpages instead of ngh produces the same error,

enter image description here

I am using the following versions,

npm 3.10.10

angular-cli-ghpages ^0.5.1

node 6.9.4 (not really an issue here)

Thanks


Solution

  • I solved this by added the following to the end of the scripts object in package.json,

    "scripts": {
    
       "deploy": "ng build --prod --base-href 
       https://shanegibney.github.io/mathapp/ && angular-cli-ghpages --branch 
       gh-pages"
    }
    

    and then ran,

    $sudo npm run deploy

    So it seems that what was needed was the '--branch gh-pages' as an option, but there is nothing to suggest this on the npm page for angular-cli-ghpages.

    Note if running these command separately without going through package.json I found it doesn't work,

    $ sudo ng build --prod --base-href https://shanegibney.github.io/mathapp/

    $ sudo angular-cli-ghpages --branch gh-pages

    Got help from a blog post on shermandigital.com