Att distribuera Angular-applikationer till GitHub-sidor är ett utmärkt sätt att vara värd för dem gratis. Angular är ett populärt JavaScript-ramverk för att bygga ensidiga applikationer.

Angular har ett omfattande kommandoradsgränssnitt som stöder snabb uppbyggnad och installation av JavaScript-applikationer. Angular CLI har flera kommandon för att skapa, bygga, betjäna och generera applikationskomponenter.

Du kan också använda CLI för att distribuera Angular-applikationer till olika mål, inklusive GitHub-sidor.

Vad du behöver

För att få ut det mesta av den här guiden behöver du ha följande färdigheter och verktyg:

  • Du borde vara bekant med grunderna i Angular, såsom konceptet med appar, inställningar, webbadresser osv.
  • Du är bekant med grunderna i GitHub och Git, som att skapa ett GitHub-konto, skapa ett git-förråd (repo) och GitHub-sidor (GH-sidor).
  • Du har en Angular-applikation redo att distribueras.
  • Din bas-URL är på rätt sökväg. Distributioner till GH-sidor misslyckas på grund av att fel bas-href (bas-url) ställts in.
    • instagram viewer
  • Ett GitHub-konto.
  • Ett GitHub-förråd (repo) med applikationskod.

Nu när du har alla dessa på plats, låt oss börja implementeringsprocessen.

Implementeringsprocess

Till att börja med borde du ha skapat ett GitHub-förråd för ditt projekt och skickat koden till huvud/mästare gren.

Skapa sedan en GH-pages-gren.

1. Skapa en GH-pages-gren

Detta är ett hack som hjälper dig att få GH-sidors länken för att hjälpa dig att ställa in bashref.

Skapa först GH-sidor i ditt lokala arkiv med följande kommando:

git branch gh-sidor

Kolla sedan ut från huvudgrenen till GH-sidorna för att överföra all kod.

git checkout gh-sidor

Tryck sedan GH-pages till GitHub för att skapa en fjärransluten GH-pages-gren.

git push ursprung gh-sidor

Klicka på i verktygsfältet under reponamnet Inställningar > Sidor.

Under Bygg och driftsättning, Välj Distribuera från en gren. Välj sedan gh-sidor som namnet på grenen och klicka sedan Spara. Detta kommer att skapa en GH-pages-länk längst upp till höger under GH-pages-etiketten.

Kopiera sedan denna länk till den publicerade webbplatsen som illustreras nedan. Du kommer att använda länken för att ställa in basreferens under driftsättning.

3. Installera Angular-CLI-GHpages

Paketet angular-cli-ghpages är ett verktyg som Angular CLI använder för distributionsändamål.

Navigera tillbaka till ditt lokala projektförråd. Installera och kör sedan angular-cli-ghpages med det här kommandot:

ng lägga till angular-cli-ghpages

4. Distribuera appen

För att bygga appen i produktion måste du ansluta den till en fjärrserver på GitHub.

Konfigurera din app till en fjärrserver genom att köra följande kommando:

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

Kom ihåg att ersätta länken ovan med livelänken från GH-sidorna

En framgångsrik konstruktion kommer att se ut som illustrationen nedan:

Navigera sedan till GitHub och klicka på länken GH-sidor för att se ditt distribuerade projekt.

Grattis, du har distribuerat din Angular-app!

Om länken endast visar README-filen, gå tillbaka till GitHub GH-sidors inställningar. Se till att den valda grenen är gh-pages och inte huvud- eller huvudgrenen. Ge det sedan fem minuter och ladda om. Ibland tar GitHub tid att återspegla förändringar.

För att lära dig mer om hur du kan använda Angular CLI i driftsättning, besök Vinkeldokumentation.

Hur man distribuerar en Angular-app till GitHub-sidor

Det finns flera sätt att distribuera Angular-appar till GH-sidor, men den här metoden är den enklaste. Du ställer in din GH-pages repo-länk och använder den med Angular-CLI för att distribuera din app till GitHub-sidor.

Det finns mycket mer du kan göra med Angular och Angular CLI. Utforska gärna. Använd CLI för att distribuera appar till GH-sidor för fri synlighet och värd för dina applikationer.