CODEWITHSUNDEEP
javascriptangularjsnode.jsgithub
I Like
I Like

Reputation: 1847

how to deploy Angular 2 App to Github Pages?

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"
  }
}

Upvotes: 4

Views: 2644

Answers (4)

innovThemes
innovThemes

Reputation: 171

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.

Upvotes: 0

Abhijeet Khangarot
Abhijeet Khangarot

Reputation: 1569

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

  1. $ npm install -g angular-cli-ghpages

  2. 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.

  3. If everything works fine, then run : sudo angular-cli-ghpages and enter password.

Upvotes: 1

I Like
I Like

Reputation: 1847

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.

Upvotes: 1

Wes Doyle
Wes Doyle

Reputation: 2287

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

Upvotes: 0

Related Questions