At implementere Angular-applikationer til GitHub-sider er en fantastisk måde at hoste dem gratis på. Angular er en populær JavaScript-ramme til opbygning af enkeltsidede applikationer.

Angular har en omfattende kommandolinjegrænseflade, der understøtter hurtig opbygning og opsætning af JavaScript-applikationer. Angular CLI har flere kommandoer til at oprette, bygge, betjene og generere applikationskomponenter.

Du kan også bruge CLI til at implementere Angular-applikationer til forskellige mål, herunder GitHub-sider.

Hvad du har brug for

For at få mest muligt ud af denne guide skal du have følgende færdigheder og værktøjer:

  • Du bør være bekendt med det grundlæggende i Angular, såsom konceptet med apps, indstillinger, URL'er osv.
  • du er bekendt med det grundlæggende i GitHub og Git, ligesom at oprette en GitHub-konto, oprette et git-lager (repo) og GitHub-sider (GH-sider).
  • Du har en Angular-applikation klar til at blive implementeret.
  • Din basis-URL er på den rigtige sti. Implementeringer til GH-sider mislykkes på grund af indstilling af den forkerte base-href (base-url).
    • instagram viewer
  • En GitHub-konto.
  • Et GitHub-lager (repo) med applikationskode.

Nu hvor du har alle disse på plads, lad os starte implementeringsprocessen.

Implementeringsproces

Til at begynde med skulle du have oprettet et GitHub-lager til dit projekt og skubbet koden til hoved/mester afdeling.

Opret derefter en GH-pages-gren.

1. Opret en GH-pages filial

Dette er et hack, der vil hjælpe dig med at få GH-sider-linket til at hjælpe med at indstille base-href.

Først skal du oprette GH-sider i dit lokale depot med følgende kommando:

git branch gh-sider

Tjek derefter ud fra hovedgrenen til GH-sider for at overføre al kode.

git checkout gh-sider

Skub derefter GH-pages til GitHub for at oprette en ekstern GH-pages-gren.

git push oprindelse gh-sider

Klik på værktøjslinjen under reponavnet Indstillinger > Sider.

Under Byg og implementering, Vælg Implementer fra en filial. Vælg derefter gh-sider som navnet på grenen, og klik derefter Gemme. Dette vil oprette et GH-pages-link øverst til højre under GH-pages-etiketten.

Kopier derefter dette link til det offentliggjorte websted som illustreret nedenfor. Du vil bruge linket til at konfigurere base-ref under implementeringen.

3. Installer Angular-CLI-GHpages

Angular-cli-ghpages-pakken er et værktøj, som Angular CLI bruger til implementeringsformål.

Naviger tilbage til dit lokale projektlager. Installer og kør derefter angular-cli-ghpages med denne kommando:

ng tilføje angular-cli-ghpages

4. Implementer appen

For at bygge appen i produktion, skal du forbinde den til en ekstern server på GitHub.

Konfigurer din app til en fjernserver ved at køre følgende kommando:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Husk at erstatte ovenstående link med live linket fra GH sider

Et vellykket byggeri vil se ud som illustrationen nedenfor:

Derefter skal du navigere til GitHub og klikke på GH-pages-linket for at se dit implementerede projekt.

Tillykke, du har implementeret din Angular App!

Hvis linket kun viser README-filen, skal du gå tilbage til indstillingerne for GitHub GH-sider. Sørg for, at den valgte gren er gh-pages og ikke hoved- eller mastergrenen. Giv det derefter fem minutter og genindlæs. Nogle gange tager GitHub tid til at afspejle ændringer.

For at lære mere om, hvordan du kan bruge Angular CLI i implementeringen, kan du besøge Vinkeldokumentation.

Sådan implementeres en Angular-app til GitHub-sider

Der er flere måder at implementere Angular-apps på GH-sider, men denne metode er den nemmeste. Du konfigurerer dit GH-pages repo-link og bruger det med Angular-CLI til at implementere din app til GitHub-sider.

Der er meget mere, du kan gøre med Angular og Angular CLI. Udforsk gerne. Brug CLI til at implementere apps til GH-sider for gratis synlighed og hosting for dine applikationer.