Angular 4: Deploy to gh-pages (part 4)

Presuming: you have an Angular 2 or 4 project ready to deploy to gh-pages, and that you’ve created a github repo connected to your local directory and git inited it. Also you need to have installed and be using angular-cli. If not look at this post.

Angular 4 projects can be deployed on gh-pages by first installing the npm package angular-cli-ghpages,

$ sudo npm i -g angular-cli-ghpages

The previous command is run in your local master branch. There is no need to create a local gh-pages branch or in fact a remote one in your repository. First create your dist folder and set the base-href with,

$ ng build --prod --base-href https://<USERNAME>.github.io/<REPONAME>/

Do not forget the trailing forward slash at the end.

Then sent this to your remote gh-pages branch, which does not need to be previously created.

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

This is also run in your local master branch. Running this commands as deparately as above did not work for me, I had to create a script called ‘deploy’ which I placed at the end of the package.json “scripts” object, like this,

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"deploy": "ng build --prod --base-href https://shanegibney.github.io/basic-maths-app/ && angular-cli-ghpages --branch gh-pages"
},

Then run this script with,

$ sudo npm run deploy

Then navigate to,

https:/<USERNAME>/.github.io/<REPO-NAME>/

The following blog post from shermandigital.com may be useful.