how to deploy Angular 2 App to Github Pages?

Question

I was able to publish an app made with Angular Cli tool to Github Pages a few weeks ago, but now when I try to use the command ng github-pages: deploy I get the error: The specified command github-pages:deploy is invalid.. This github thread suggests that the command has been removed recently, and petersgiles recommended following these guidelines instead to publish pages:

1. npm install -g angular-cli-ghpages (doesn't work if its not global)
2.Then in your package.json
"scripts": { "deploy": "ng build -sm -ec -bh /repo name/ & ngh --silent=false",...
3.when you want to deploy npm run deploy

I followed these instructions, but got the error: Failed at the [email protected] deploy script 'ng build -sm -ec -bh /aboutme/ & ngh --silent=false'. My npm and node js are up-to-date, and the error suggests that the problem is inside my package.json file.

My terminal proceeds to render all five chunks of my program, but there's no link to follow to the website. Is there anything i can do to fix this? I completed my website, and just need somewhere to host it. I'm very lost as a beginner, so please point out any obvious mistakes or missing info.

package.json

{
  "name": "aboutme",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "deploy": "ng build -sm -ec -bh /aboutme/ & ngh --silent=false",
    "ng": "ng",
    "start": "ng serve",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor"  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0-rc.1",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  }
}

I Like · Accepted Answer · 2017-05-04 06:26:53Z

1

just wanted to update this old post with an answer that worked for me on this SO post: how to publish to github pages?

There is a new angular cli command to push to gh-pages, the old one no longer works. So you have to install the new command, build the project, then execute the push command.

answered May 4, 2017 at 6:26

I Like

1,8672 gold badges31 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhijeet Khangarot · Accepted Answer · 2018-06-13 05:56:40Z

1

Try this: (for mac) (does not require any changes to package.json) :

$ npm install -g angular-cli-ghpages
Push your code to a github repo and then run this in terminal: ng build --env=prod --base-href "https://yourgithubusername.github.io/yourprojectname/" here 'yourprojectname' is the name of your github repo, not your local repo.
If everything works fine, then run : sudo angular-cli-ghpages and enter password.

edited Jun 13, 2018 at 5:56

answered Apr 28, 2018 at 22:36

Abhijeet Khangarot

1,5971 gold badge17 silver badges30 bronze badges

Comments

Wes Doyle · Accepted Answer · 2017-05-04 02:21:13Z

0

I suspect ngh --silent=false throws an error. The command for running angular-cli-pages with verbose output at the time of this answer is ngh --no-silent

If you want to update your deploy script, take a look at the angular-cli-pages doc for commands to build and deploy:

> ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY/"
> ngh --no-silent

edited May 4, 2017 at 2:21

answered May 4, 2017 at 2:15

Wes Doyle

2,2973 gold badges19 silver badges37 bronze badges

Comments

innovThemes · Accepted Answer · 2020-05-16 21:35:28Z

Here is the simple way without any third party plugin you can deploy angular project to GitHub pages.

STEP 1: Open angular.json of your angular repo.

STEP 2: change dist/your-project-name to docs/

STEP 3: ng build --prod --base-href=https://username.github.io/respository-name/

change username to your GitHub username & respositoryName to repository name of your project.

STEP 4: Commit docs folder to local repo and push to github. git add . git commit -m "generated deployables" git push -u origin master

STEP 5: Open Github repo and open settings

STEP 6: Select master branch /docs folder in github pages.

Congrats !!

Here is VERIFIED step by step detailed guide Article on how to deploy angular project to github pages, if you want more detailed article.

Collectives™ on Stack Overflow

how to deploy Angular 2 App to Github Pages?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related