Deploy angular 2 applications to github pages - failed

Question

I am trying to deploy my angular 2 application on github pages so that I can view the application on a github hosted link, but so far no luck.

As soon as I finished my application, I ran the following commands:

ng build --prod git remote add origin "My REPO" git commit -a git push -u origin master 

Then I tried to run on the terminal

 ng github-pages:deploy 

and got this error:

 The specified command github-pages:deploy is invalid. For available options, see `ng help`. 

After researching, I looked at this page and followed the following instructions: https://www.npmjs.com/package/angular-cli-github-pages

I installed angular-cli-github pages via npm in the project directory:

 npm install --save-dev angular-cli-github-pages 

he says that I need to create gh pages, so I ran the following command:

 git checkout --orphan gh-pages 

and then committed the files and pushed the changes and returned to the original host and ran the deploy command and it gave me the same error:

  The specified command github-pages:deploy is invalid. For available options, see `ng help`. 

I go back and forth in many ways, and it doesn't work. Can someone please indicate what I have to do to correctly place this on github pages?

Answer 1

I recently ran into the same problem. After cleaning up the angular2 community for several hours, I was able to find that the angular-cli-github-pages module was removed in the latest version of angular-cli. To deploy your Angular 2 applications to gh pages, now you need to install the new npm module, which is very similar to the older angular-cli-github-pages module but makes you do a little more work than the previous module.

Npm angular-cli-ghpages module . You can find the documentation and steps on the npmjs page for the module.

Hope this helps you.

Answer 2

When you first install angular-cli ghpages

 npm install -g angular-cli-ghpages 

After installing the next step, your repository is associated. Run this command

 ng build --prod --base-href "https://<user-name>.imtqy.com/<repo>/" 

If you see an error then ommit --prod and run this command

 ng build --base-href "https://<user-name>.imtqy.com/<repo>/" 

Now you can see the dist folder in the angular 2 directory.

Upload all the dist folder files to the github repository.

Then from the settings Enable Github pages. You will be given a link.

What is it.

Demo: https://shawon100.imtqy.com/angularmaterial/

Answer 3

I believe that the easiest way to deploy to Github Pages is to either use the main branch or documents in the main branch as the original option in the settings. I go to the documents in the master branch option and treat the docs folder as an assembly directory. He worked very well. I'm just trying to master, Github discovers the docs folder and then creates an application / page with its contents.

Answer 4

To deploy your Angular app on Github, follow these steps:

• Install Angular-cli-ghpages npm package:

  npm install -g angular-cli-ghpages

• Run "ng build" to create the dist folder:

  ng build --base-href "https: //.imtqy.com//"

• Run "ngh" (Angular-cli-ghpages) to publish the site to your Github repository.

  sudo ngh --repo https://github.com/ / - no-silent

The console will show something like this:

 Cloning https://github.com/<username>/repo into ../../../../../../usr/local/lib/node_modules/angular-cli-ghpages/node_modules/gh-pages/.cache Cleaning Fetching origin Checking out origin/gh-pages Removing files Copying files Adding all Committing Pushing Successfully published! 

This will bring your local dist folder to a branch called "gh-pages" in your Github repository. Then in your Github repository, click on "Settings", go to the "GitHub Pages" section and select the "gh-pages branch" from the drop-down list.

Note. The next time you make changes and want to deploy your application, follow steps 2 and 3. Make sure that it takes some time (minutes) to update the changes to Github.