How to build and deploy Angular app on GitHub ?

Steps to deploy Angular app on GitHub :

Step 1:

To deploy Angular application first create a repository on GitHub. To do that navigate to https://github.com/  and click on New Repository.  

 After the repository is created, use git command to add this repository as remote to the local project. For that run command as below :

git remote add origin https://github.com/USERNAME/PROJECT_NAME.git

Do not forget to change username and project name. Once the remote repository is added, you can verify that using the command

git remote -v

As output, you should get repository listed as below:




Step 2:

To deploy the Angular application to GitHub, you need to first install the angular-cli-ghpages globally:

 npm install -g angular-cli-ghpages

 After installing that ghpages, use Angular CLI to build the project. For that run command as shown below:

ng build --prod --base-href  <project-name>

Below is the example

ng build --prod --base-href https://github.com/ramnaik-g/AmbienceElegancer


Make sure that you are using your GitHub username and repository name.  After successful execution of the command, you should get bundle.js created as shown in the image below: 

Steps 3:

 Run the command below command to publish the application as shown in the image below:

ngh -no-silent 

Step 4: Verification

After successful publish navigate to  https://<username>.github.io/<reponame>/ to navigate to the application.  This is all you need to do to deploy the Angular application to GitHub.

Note:

 I have faced below error while building :
Could not find plugin "proposal-numeric-separator". Ensure there is an entry
Solution:
Try to install "@babel/compat-data": "~7.8.0" to devDependencies by adding them to package.json and rum npm update. 
If that does not work then delete node-modules folder and try installing it after adding the above 2 dependencies in package.json





Post a Comment

0 Comments