Existen varios métodos para implementar aplicaciones angulares, como páginas de Github, Heroku, Firebase, etc. Github proporciona la forma más sencilla de usar las páginas de Github.
Pasos para crear e implementar una aplicación angular de muestra en las páginas de Github:
- Instale Node.js:
a. ventanas
b. linux - Instalar Angular – CLI
- Cree un nuevo proyecto usando Angular CLI:
ng new gfg-example
- El comando anterior hará varias preguntas para el enrutamiento y el estilo, presione Entrar para ir con los valores predeterminados:
- Después de la creación del proyecto, vaya al directorio del proyecto usando:
cd gfg-example
- La estructura del Código se verá así:
- Vaya a src/app/app.component.html y elimine todo el código y agregue el siguiente código:
<h2 [ngStyle]="{'color':'#00FF00'}">
Geeks For Geeks Example
</h2>
<h3>
Simple App Deployment using Github Pages
</h3>
- Ahora ejecute la aplicación Angular localmente usando:
npm start
- Después de que la aplicación se compile correctamente, vaya al navegador y abra http://localhost:4200/
- A continuación, detenga la aplicación Angular
- Ve a Github y crea un nuevo Repositorio con el nombre de tu preferencia
- Después de la creación de Github Repo, vaya al directorio del proyecto y abra la línea de comandos
- Empuje el código a Git usando los siguientes comandos:
git init git add . git commit -m "Initial Commit" git remote add origin https://github.com/<username>/<reponame>.git git push -u origin master
- Ahora, vaya al repositorio de github y su código debe cargarse en la rama maestra en github
- A continuación, instale angular-gh-pages usando npm:
npm install -g angular-cli-ghpages
- Ahora, producción construye la aplicación usando:
ng build --prod --base-href "https://<username>.github.io/<reponame>/"
- Atlast, cree la rama gh-pages, también cargue la compilación y el código incluido en esta rama usando:
ngh --dir dist/gfg-example
- Recuerde que el nombre del proyecto que estamos usando desde el principio es gfg-example, si tiene un nombre de proyecto diferente, en lugar del último comando use:
ngh --dir dist/<project-name>
- Ahora vaya a la pestaña Configuración paralela a Código en Github Repo y en Github Pages encontrará el enlace para su aplicación implementada:
- Abra la URL y obtendrá nuestra aplicación angular implementada:
