I’m assuming your Angular 2 app 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 cache clean
npm install –g @angular/cli@latest
NOTE – 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 –
Install 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:
In 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”
We have setup the required dependencies to deploy test page. Now, here it comes to generate a live preview:
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 2 apps 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.
You must log in to post a comment.