Implementarea aplicațiilor Angular în paginile GitHub este o modalitate excelentă de a le găzdui gratuit. Angular este un cadru JavaScript popular pentru construirea de aplicații cu o singură pagină.

Angular are o interfață cuprinzătoare de linie de comandă care acceptă construirea și configurarea rapidă a aplicațiilor JavaScript. Angular CLI are mai multe comenzi pentru a crea, construi, servi și genera componente ale aplicației.

De asemenea, puteți utiliza CLI pentru a implementa aplicații Angular către diverse ținte, inclusiv pagini GitHub.

De ce ai nevoie

Pentru a profita la maximum de acest ghid, trebuie să aveți următoarele abilități și instrumente:

  • Ar trebui să fii familiarizat cu elementele de bază ale Angular, cum ar fi conceptul de aplicații, setări, adrese URL etc.
  • Ești familiarizat cu elementele de bază ale GitHub și Git, cum ar fi crearea unui cont GitHub, crearea unui depozit git (repo) și a paginilor GitHub (pagini GH).
  • Aveți o aplicație Angular gata de implementare.
  • Adresa URL de bază se află pe calea corectă. Implementările în paginile GH eșuează din cauza setării unui cod de bază greșit (url-ul de bază).
    instagram viewer
  • Un cont GitHub.
  • Un depozit GitHub (repo) cu codul aplicației.

Acum că aveți toate acestea la loc, să începem procesul de implementare.

Procesul de implementare

Pentru a începe, ar fi trebuit să creați un depozit GitHub pentru proiectul dvs. și să fi împins codul în principal/master ramură.

Apoi, creați o ramură de pagini GH.

1. Creați o sucursală GH-pages

Acesta este un hack care vă va ajuta să obțineți linkul GH-pages pentru a vă ajuta să setați baza-href.

Mai întâi, creați pagini GH în depozitul dvs. local cu următoarea comandă:

git branch gh-pages

Apoi, verificați din filiala principală la paginile GH pentru a transfera tot codul.

git checkout gh-pages

Apoi, împingeți paginile GH în GitHub pentru a crea o ramură a paginilor GH la distanță.

git push origin gh-pages

În bara de instrumente de sub numele depozitului, faceți clic Setări > Pagini.

Sub Construire și implementare, Selectați Implementați dintr-o sucursală. Apoi, selectați gh-pagini ca numele ramurii, apoi faceți clic Salvați. Aceasta va crea un link către paginile GH în dreapta sus, sub eticheta paginilor GH.

Apoi, copiați acest link către site-ul publicat, așa cum este ilustrat mai jos. Veți folosi linkul pentru a configura baza-ref în timpul implementării.

3. Instalați paginile Angular-CLI-GH

Pachetul angular-cli-ghpages este un instrument pe care Angular CLI îl folosește în scopuri de implementare.

Navigați înapoi la depozitul local de proiect. Apoi instalați și rulați angular-cli-ghpages cu această comandă:

Adăugați pagini angulare-cli-gh

4. Implementați aplicația

Pentru a construi aplicația în producție, trebuie să o conectați la un server de la distanță pe GitHub.

Configurați aplicația la un server la distanță rulând următoarea comandă:

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

Nu uitați să înlocuiți linkul de mai sus cu linkul live din paginile GH

O construcție reușită va arăta ca ilustrația de mai jos:

Apoi, navigați la GitHub și faceți clic pe linkul GH-pages pentru a vedea proiectul dvs. implementat.

Felicitări, ați implementat aplicația Angular!

Dacă linkul afișează doar fișierul README, vă rugăm să reveniți la setările paginilor GitHub GH. Asigurați-vă că ramura selectată este gh-pages și nu ramura principală sau principală. Apoi acordați-i cinci minute și reîncărcați. Uneori, GitHub necesită timp pentru a reflecta schimbările.

Pentru a afla mai multe despre cum puteți utiliza Angular CLI în implementare, vizitați Documentație unghiulară.

Cum să implementați o aplicație Angular în paginile GitHub

Există mai multe moduri de a implementa aplicații Angular în paginile GH, dar această metodă este cea mai ușoară. Configurați linkul de depozit al paginilor GH și îl utilizați cu Angular-CLI pentru a vă implementa aplicația în paginile GitHub.

Puteți face mult mai multe cu Angular și Angular CLI. Simțiți-vă liber să explorați. Utilizați CLI pentru a implementa aplicații în paginile GH pentru vizibilitate și găzduire gratuite pentru aplicațiile dvs.