Het implementeren van Angular-applicaties op GitHub-pagina's is een geweldige manier om ze gratis te hosten. Angular is een populair JavaScript-framework voor het bouwen van single-page applicaties.

Angular heeft een uitgebreide opdrachtregelinterface die het snel bouwen en instellen van JavaScript-applicaties ondersteunt. De Angular CLI heeft verschillende opdrachten om applicatiecomponenten te maken, bouwen, bedienen en genereren.

U kunt de CLI ook gebruiken om Angular-applicaties op verschillende doelen te implementeren, waaronder GitHub-pagina's.

Wat je nodig hebt

Om het meeste uit deze gids te halen, moet u over de volgende vaardigheden en hulpmiddelen beschikken:

  • Je zou bekend moeten zijn met de basis van Angular, zoals het concept van apps, instellingen, URL's, enz.
  • Je bent bekend met de basis van GitHub en Git, zoals het maken van een GitHub-account, het maken van een git-repository (repo) en GitHub-pagina's (GH-pagina's).
  • U heeft een Angular-applicatie klaar om te implementeren.
    • instagram viewer
  • Uw basis-URL bevindt zich op het juiste pad. Implementaties naar GH-pagina's mislukken vanwege het instellen van de verkeerde base-href (base-url).
  • Een GitHub-account.
  • Een GitHub-repository (repo) met applicatiecode.

Nu u dit allemaal op zijn plaats heeft, laten we het implementatieproces starten.

Implementatieproces

Om te beginnen had u een GitHub-repository voor uw project moeten maken en de code naar de hoofd/meester tak.

Maak vervolgens een GH-pages-tak.

1. Maak een GH-pages-tak

Dit is een hack die je zal helpen de GH-pagina's-link te krijgen om de basis-href in te stellen.

Maak eerst GH-pagina's aan in uw lokale repository met de volgende opdracht:

git branch gh-pagina's

Check vervolgens uit van de hoofdtak naar GH-pagina's om alle code over te zetten.

git checkout gh-pagina's

Duw vervolgens GH-pages naar GitHub om een ​​remote GH-pages branch te maken.

git push oorsprong gh-pagina's

Klik op de werkbalk onder de naam van de opslagplaats Instellingen > Pagina's.

Onder Bouwen en implementeren, selecteer Implementeren vanuit een filiaal. Selecteer vervolgens gh-pagina's als de naam van het filiaal en klik vervolgens op Redden. Hierdoor wordt rechtsboven onder het label GH-pages een link naar GH-pages gemaakt.

Kopieer vervolgens deze link naar de gepubliceerde site zoals hieronder afgebeeld. U gebruikt de link om de basisreferentie in te stellen tijdens de implementatie.

3. Installeer Angular-CLI-GHpages

Het pakket angular-cli-ghpages is een tool die de Angular CLI gebruikt voor implementatiedoeleinden.

Navigeer terug naar uw lokale projectrepository. Installeer en voer vervolgens angular-cli-ghpages uit met deze opdracht:

ng angular-cli-ghpages toevoegen

4. Implementeer de app

Om de app in productie te bouwen, moet u deze verbinden met een externe server op GitHub.

Configureer uw app naar een externe server door de volgende opdracht uit te voeren:

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

Vergeet niet om de bovenstaande link te vervangen door de live link van GH-pagina's

Een succesvolle build ziet er uit als in de onderstaande illustratie:

Navigeer vervolgens naar GitHub en klik op de GH-pages-link om uw geïmplementeerde project te bekijken.

Gefeliciteerd, u heeft uw Angular-app geïmplementeerd!

Als de link alleen het README-bestand weergeeft, ga dan terug naar GitHub GH-pages-instellingen. Zorg ervoor dat de geselecteerde branch gh-pages is en niet de hoofd- of master-branch. Geef het dan vijf minuten en herlaad. Soms heeft GitHub tijd nodig om wijzigingen weer te geven.

Voor meer informatie over hoe u Angular CLI kunt gebruiken bij de implementatie, gaat u naar de Hoekige documentatie.

Een Angular-app implementeren op GitHub-pagina's

Er zijn verschillende manieren om Angular-apps op GH-pagina's te implementeren, maar deze methode is de gemakkelijkste. U stelt uw GH-pages repo-link in en gebruikt deze met de Angular-CLI om uw app op GitHub-pagina's te implementeren.

U kunt nog veel meer doen met Angular en Angular CLI. Voel je vrij om te verkennen. Gebruik de CLI om apps op GH-pagina's te implementeren voor gratis zichtbaarheid en hosting voor uw applicaties.