Learn how to deploy Angular application using Github Pages.
This blog was originally posted on FOSSASIA Blog.
I’m assuming your Angular v2 application must be using webpack services and the latest version of Angular has been installed. Firstly, be sure Angular CLI must be updated. If not, then update the Angular CLI to a new version.
You must update both the global package and local package of your project.
npm uninstall –g @angular/cli
npm cache clean
npm install –g @angular/cli@latest
Make sure to install local packages, you must be inside the project folder.
To make deployments easier, follow these steps after updating global and local packages:
npm i –g angular–cli–ghpages
This command is similar to the old github
pages:deploy command of
@angular/cli and this script works great with Travis CI.
After installing you should see the changes in the
package.json as well:
After updating the global and local package, you will notice a new folder named ‘node_modules’ has been created. Now the magic part comes to play here!
Add deploy script
package.json file add the following deploy script:
"deploy": "ng build –prod –aot –base-href=/project_repo_name/ && cp ./dist/index.html ./dist/404.html && ./node_modules/.bin/angular-cli-ghpages –no-silent"
Our setup has been done and we’re ready to deploy test page.
Now, here it comes to generate a live preview.
git checkout working_branch
npm run deploy
We have successfully deployed the repository to GitHub pages.
To refer live preview go here:
How did it work out?
Well, this is the easiest way to deploy any Angular v2 app on GitHub pages. The only disadvantage of deploying to GitHub pages is that we have to always perform a manual build before providing a live preview whenever some changes have been done in that particular branch.