Introducci贸n a Angular y Fundamentos

1

Creando tu primer proyecto en Angular

2

Implementando estilos

3

Mostrando elementos

4

Property Binding en Angular

5

Event Binding: click y doble click

6

Event binding: keydown

7

Modelo de reactividad con Signals

8

Creando un Signal en Angular

Estructuras de control en Angular

9

Directivas de control

10

Uso de ngFor

11

ngFor para objetos

12

Update Tasks

13

Uso de ngIf

14

Uso de ngSwitch y ngSwitchDefault

15

Controlando un input

16

Manejo de formularios en Angular

Alistando tu aplicaci贸n para producci贸n

17

Estilos al modo Angular

18

Clases en Angular

19

Editing mode

20

Estados compuestos con computed

21

Usando effect para localStorage

22

Uso de ngbuild

23

Despliegue con Firebase Hosting

24

Nueva sintaxis en Angular

25

Directivas @For, @switch

26

Migrando a la nueva sintaxis de Angular v17

Componentes Reutilizables y Comunicaci贸n

27

Construyendo un e-commerce en Angular

28

Componentes en Angular

29

Mostrando los componentes

30

Angular DevTools

31

Uso de Inputs en Angular

32

Uso de Outputs en Angular

33

Componentes para Producto

Ciclo de vida de los componentes

34

Ciclo de vida de componentes

35

Ciclo de vida de componentes: ngOnChanges

36

Ciclo de vida de componentes: ngOnInit

37

Detectando cambios en los inputs

38

Evitando memory leaks con ngDestroy

39

Audio player con ngAfterViewInit

40

Creando la p谩gina "about us" o "con贸cenos"

Mejorando la interfaz del producto

41

Creando componente de productos

42

Creando el Header

43

Creando el carrito de compras

44

Comunicaci贸n padre e hijo

45

Calculando el total con ngOnChanges

46

El problema del prop drilling

47

Reactividad con signals en servicios

48

Entendiendo la inyecci贸n de dependencias

Integraci贸n y Datos

49

Obteniendo datos una REST API

50

Importaciones cortas en Typescript

51

Pipes en Angular

52

Construyendo tu propio pipe

53

Utilizando librer铆as de JavaScript en Angular

54

Conociendo las directivas

55

Deployando un proyecto en Vercel

Enrutamiento y Navegaci贸n

56

Ruta 404

57

Uso del RouterLink

58

Vistas anidadas

59

Uso del RouterLinkActive

60

Detalle de cada producto

61

Obteniendo datos del producto

62

Galer铆a de imagenes

63

Detalle de la galer铆a

Perfeccionando tu e-commerce

64

Mostrando categorias desde la API

65

Url Params

66

LazyLoading y Code Splitting

67

Aplicando LazyLoading

68

Prefetching

69

Usando la nueva sintaxis de Angular 17

70

Lanzando tu aplicaci贸n a producci贸n

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Despliegue con Firebase Hosting

23/70
Recursos

Aportes 24

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Si a alguno le aparece un mensaje de Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary Primero verifiquen que su carpeta `dist/<name-project>` No exista una carpeta `browser` Si existe cuando ejecuten el `firebase init` y llegue el momento de escribir la informacion en public ponga el path tal cual `dist/<name-project>/browser` Y adicional antes de ejecutar `firebase deploy ` verifiquen que en el archvo `firebase.json` No este esta configuracion 聽 "rewrites": \[聽 聽 聽 {聽 聽 聽 聽 "source": "\*\*",聽 聽 聽 聽 "destination": "/index.html"聽 聽 聽 }聽 聽 ] ```js "rewrites": [ { "source": "**", "destination": "/index.html" } ] ```Si esta configuracion existe, borrarla y dejar unicamente la primera parte y luego si ejecutar el `firebase deploy` Ya con esto no deberian tener incovenientes. Si alguno de aqui sabe como hacer para que angular no genere la carpeta browser quedo atento a sus comentarios.
Con esta configuraci贸n me funcion贸. ![](https://static.platzi.com/media/user_upload/image-eaaaf7f5-d9bc-4172-a005-2f5d2dea2372.jpg)
Dos puntos a destacar es: 1\. La ruta puede estar mal 2\. se despliega bien, pero ocupan borrar cache para ver el cambio. Para que analicen puede ser ver el archivo "firebase.json" para que validen si est谩 bien la ruta o si la ocupan cambiar. Tambi茅n puede que les pase que por culpa del cach茅 no miren que hay cambios en el hosting, s铆 utilizan ``` firebase deploy --debug ``` cuando desplieguen ah铆 podr谩n ver si marca un error como este entre todo lo que imprime ``` Error: Directory 'dist/tiendaapp/browser' for Hosting does not exist... ``` es porque no encontr贸 el archivo y ocupan cambiar la ruta del firebase.json esta es la ruta como me funciono a mi en archivo firebase.json ``` { "hosting": { "public": "dist/tienda-app/browser", "ignore": \[ "firebase.json", "\*\*/.\*", "\*\*/node\_modules/\*\*" ], "rewrites": \[ { "source": "\*\*", "destination": "index.html" } ] } } ``` una vez guardado aplican ``` ng build firebase deploy --debug ``` y cuando entren a su link de hosting borren cache presionando teclas: `Ctrl + Shift + R` \*\*SI TE FUNCIONA DAME UN ME ENCORASONA PARA QUE M脕S PERSONAS VEAN Y DESTAJE ESTA SOLUCI脫N\*\*
Al hacer deploy y abrir el link de mi aplicaci贸n me aparece este prompt : Welcome # Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! [OPEN HOSTING DOCUMENTATION](https://firebase.google.com/docs/hosting/) No lo he podido solucionar, cualquier ayuda o sugerencia se agradece mucho.

.gitignore (Firebase)

# Created by https://www.toptal.com/developers/gitignore/api/firebase
# Edit at https://www.toptal.com/developers/gitignore?templates=firebase

### Firebase ###
.idea
**/node_modules/*
**/.firebaserc

### Firebase Patch ###
.runtimeconfig.json
.firebase/

# End of https://www.toptal.com/developers/gitignore/api/firebase

Si observan que el directorio dist genera un directorio browser, revisen las configuraciones de 鈥渁rchitect.build.builder鈥

Ac谩 les dejo un video para solucionaro Firebase Hosting Setup Complete <https://youtu.be/NkZp9V2fdNs>
<https://todoapp-angular-ashy.vercel.app/> lo realice con vercel, me parece mas comodo
Hola, lo que sucedio es que si solo le vuelven a dar firebase init el index.html que esta ya sobrescrito en dist/\<tu proyecto>/browser (si lo tienes ahi) es el que tienesobrescrito lo de hosting y lo redirige, lo ideal es dar primero ng build para reiniciar de 0 el build y luego el firebase init sin sobrescribir nada
Si te sale el error de Welcom Firebase, fijate que el index.html este en la carpeta dist/\<nombre-del-proyecto>/browser. Si es asi lo primero , como ya as hecho el deploy una vez tienes que borrar la cache y luego si volver a hacer el init con esta ruta. Lo intente mil veces y hasta que no borre la cache no me salia.
cordial saludo, Despu茅s de intentar solucionar y seguir las recomendaciones de algunos quienes daban alguna soluci贸n para ver la aplicaci贸n desplegada con firebase, la 煤nica forma en que puedo ver el despliegue es autocompletando la url que da al final de realizar el deploy: Hosting URL: <https://todoapp-2b566.web.app> para ver la aplicaci贸n desplegada tuve que adicionar la palabra home y/o labs, de la siguiente manera: <https://todoapp-2b566.web.app/home> Si solo empleo la url tal cual la da , solo me arroja la pagina en blanco.
*Hoola estoy en 03/2024* A mi me funciono primero hacer los cambios en el archivo angular.json que comentaban y luego usar el comando ***firebase init hosting*** con ese comando segui ya las instrucciones del video y logre hacer el deploy ![](https://static.platzi.com/media/user_upload/Screenshot%202024-03-18%20at%208.41.09%E2%80%AFp.m.-a219c036-7712-4a89-8edb-11a54cce7036.jpg)
A mi me funcion贸 con el path `dist/name-app/browser` Ejecute luego desde `firebase init` y los pasos siguientes
Que terminal usa el profesor? Trabaja en entorno windows y me parece que le es muy util

Comparto mi despliegue de Todoapp 馃槑馃憞

https://todoapp-rho-drab.vercel.app/
Estoy teniendo problemas con el login de Firebase. `Error: Cannot run login in non-interactive mode. See login:ci to generate a token for use in non-interactive environments.` Como la consola de Linux de WSL me estaba generando problemas, us茅 bash para todo el proyecto. Creo que es eso lo que me genera el error, pero no estoy encontrando la forma de iniciar sesi贸n para subir el proyecto
Comparto mi link :3 <https://mydayapptasks.web.app/>
No funciona, me aparece siempre esto: ## Welcome # Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary! [OPEN HOSTING DOCUMENTATION](https://firebase.google.com/docs/hosting/)
Recuerda que cada vez que cada vez que quieras hacer el deploy (Subir tus avances al hosting de Firebase), debes ejecutar el comando: ```js ng build ```Ya que con eso, actualizas la carpeta dist con tus nuevos cambios. Luego, darle a: ```js firebase deploy ```Y listo!
"Me funcion贸 usando `firebase init hosting` en vez de `firebase init` y `firebase deploy --only hosting` en vez de `firebase deploy`."
Hola, les comparto mi gestor de tareas: <https://todo-151da.web.app/> Cambie un poco los estilos y lo hice en formato tabla. Tarda un poco en cargar porque el hosting q use para cargar la persistencia es un poco lento. Simul茅 la parte backend con un JsonServer.
[Todoapp (marioluevano.online)](https://todoapp.marioluevano.online/)
Me funciono luego de hacer un refresh furioso (**ctrl+shift+r varias veces**) en *chrome* (en *firefox* anduvo porq nunca lo abro). Me tiraba **404 not found** de todos los *scripts* y *css minificados* que genera el **ng build**. Antes igual pase por varios errores desde la sobre-escritura del firebase init de mi index.html, a suprimir a mano la carpeta *browser* dentro de *dist/\<projectName>* etc