CODEWITHSUNDEEP
angulardeploymentangular-cligithub-pages
ofey
ofey

Reputation: 3347

Error deploying Angular4 to ghpages using angular-cli-ghpages

I am trying to deploy a simple Angular 4 app to gh-pages. I have tried several methods and it seems that angular-cli-ghpages is the most up to date way to do it.

I've followed the instructions on the npm angular-cli-ghpages page.

First I installed successfully angular-cli-ghpages,

$ sudo npm i -g angular-cli-ghpages

This command wouldn't work without sudo.

Next I created the dist folder and set the base-href,

$ ng build --prod --base-href "https://shanegibney.github.io/mathapp/"

Then I deployed with,

$ ngh

but this gives errors,

The output can be seen in this image below,

enter image description here

Running angular-cli-ghpages instead of ngh produces the same error,

enter image description here

I am using the following versions,

npm 3.10.10

angular-cli-ghpages ^0.5.1

node 6.9.4 (not really an issue here)

Thanks

Upvotes: 12

Views: 10651

Answers (4)

ofey
ofey

Reputation: 3347

I solved this by added the following to the end of the scripts object in package.json,

"scripts": {

   "deploy": "ng build --prod --base-href 
   https://shanegibney.github.io/mathapp/ && angular-cli-ghpages --branch 
   gh-pages"
}

and then ran,

$sudo npm run deploy

So it seems that what was needed was the '--branch gh-pages' as an option, but there is nothing to suggest this on the npm page for angular-cli-ghpages.

Note if running these command separately without going through package.json I found it doesn't work,

$ sudo ng build --prod --base-href https://shanegibney.github.io/mathapp/

$ sudo angular-cli-ghpages --branch gh-pages

Got help from a blog post on shermandigital.com

Upvotes: 10

vbrgr
vbrgr

Reputation: 839

After git push origin master gh - page deploy step 1:"ng build --prod --base-href https://username.github.io/project-name/"

step 2: "ngh --dir dist/project-name"

replace project-name and username of with github username, project-name

Upvotes: 7

Leonardo Soares e Silva
Leonardo Soares e Silva

Reputation: 199

I ran the command as a superuser and it worked. Try it. If not, run the command with --no-silent to get more details. Example:

sudo angular-cli-ghpages --no-silent

Upvotes: 4

Aruna Sanjeewa
Aruna Sanjeewa

Reputation: 134

I deployed Angular2 app to gh-pages at last week(Live).But I didn't use

angular-cli-ghpages page.

Used these dependencies -

  • @angular/cli": "^1.2.0
  • @angular/compiler-cli": "^2.3.1

Now need to build our project as minifiles css and js. to do it just run this code in your angular project

ng build --prod--aot --base-href "https://username.github.io/repo-name/"

If you have problem when compiling replace this code in angular-cli.json file

"environments": {
  "source": "environments/environment.ts",
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

to 

"environmentSource": "environments/environment.ts",
"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts"
}

After successful compiled(100%) just run this command to deploy to gh-pahes

ngh --message "Deploy gh pages"

Upvotes: 5

Related Questions