Angular 4-Anwendung auf Github Pages

Question

Ich habe eine einfache Angular (4) Anwendung, die ich auf Github Pages hosten möchte, die Option, dies von Angular CLI zu tun scheint entfernt. Gibt es einen Weg dies zu tun, wenn ja wie?

das ist mein 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" 
    } 
} 

Beim Versuch ng build Ich erhalte diese Meldung

Als forewarning verwenden wir die CLI npm Paket "@ Winkel/cli" bewegen sich mit Die nächste Version, , die nur Knoten 6.9 und höher unterstützt. Dieses Paket wird kurz danach offiziell veraltet.

Um diese Warnung zu deaktivieren, verwenden Sie "ng set --global warnings.packageDeprecation = false".

Sie müssen innerhalb eines angular-cli-Projekts sein, um den Build-Befehl zu verwenden.

mein 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

Bei der Verwendung dieses commad ng build --prod --base-href "https://USERNAME.github.io/REPOSITORY_NAME/"

wechselte ich zu meinem Repository, das ePortfolio genannt wird, tippte ich es in als eportfolio , Es scheint, dass der Buchstabe P Kapital sein musste, damit es funktioniert.

Answer 2

Sie das folgende Paket verwenden können https://www.npmjs.com/package/angular-cli-ghpages

Answer 3

Der einfachste Weg, den ich gefunden habe, ist ein 2 Schritte Prozess. Zunächst einmal müssen Sie wissen, dass Github Pages nicht gut behandelt base href und so das Deaktivieren der pushState und Entfernen der base href war genug auf meiner Seite, um loszulegen.

Hier die Schritte:

1- entfernen Sie den umgekehrten Schrägstrich "/" aus dem base href in Ihrem index.html

<base href=""> 

2- Deaktivieren Sie die pushState durch das Argument, das Hinzufügen {useHash: true}. In meinem Fall habe ich ein app-routing.module.ts, die ich mit folgendem Code aktualisiert:

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

zu einer Github Seite veröffentlicht Dann, und wir sind im Geschäft