Angular 4 application on Github Pages

Question

I have a simple Angular (4) application which I want to host on Github Pages, the option to do this from Angular CLI seems removed. Is there a way to do this, if so how?

this is my package.json

{
  "name": "e-portfolio",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/cli": "^1.0.6",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "@ngx-translate/core": "^6.0.1",
    "bootstrap": "^4.0.0-alpha.6",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.6",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

When trying to use ng build I get this message

As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after.

To disable this warning use "ng set --global warnings.packageDeprecation=false".

You have to be inside an angular-cli project in order to use the build command.

my debuglog

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@3.10.10
3 info using node@v6.9.5
4 verbose stack Error: ENOENT: no such file or directory, open 'C:\Users\User\Documents\School\Portfolio\ePortfolio\package.json'
4 verbose stack     at Error (native)
5 verbose cwd C:\Users\User\Documents\School\Portfolio\ePortfolio
6 error Windows_NT 10.0.15063
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
8 error node v6.9.5
9 error npm  v3.10.10
10 error path C:\Users\User\Documents\School\Portfolio\ePortfolio\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'C:\Users\User\Documents\School\Portfolio\ePortfolio\package.json'
15 error enoent ENOENT: no such file or directory, open 'C:\Users\User\Documents\School\Portfolio\ePortfolio\package.json'
15 error enoent This is most likely not a problem with npm itself
15 error enoent and is related to npm not being able to find a file.
16 verbose exit [ -4058, true ]

Answer 1

The easiest way that I found is a 2 steps process. First of, you need to know that Github Pages doesn't handle well base href and so disabling the pushState and removing the base href was enough on my side to get going.

Here's the steps:

1- remove the backslash "/" from the base href in your index.html

<base href="">

2- Disable the pushState by adding the argument {useHash: true}. In my case, I have an app-routing.module.ts which I updated with following code:

@NgModule({
   imports: [RouterModule.forRoot(routes, {useHash: true})], // <-- HERE
   exports: [RouterModule],
})

Then publish to a Github Page and we're in business

EDIT

Just doing step 2 is enough for it to work {useHash: true}

Answer 2

When using this commad ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"

I switched out to my repository which is called ePortfolio, I typed it in as eportfolio, It seems that the letter P had to be capital for it to work.

Answer 3

You can use the following package https://www.npmjs.com/package/angular-cli-ghpages