Gestión de versiones del Service Worker

Clase 9 de 31 • Curso de PWA con Angular 2018

Cristian Martinez

student•

para hacer mas facil es paso de aliases yo les recomiendo que usen los scripts de npm para automatizar el build de angular y el servidor local http. Dentro del proyecto buscan el archivo package.json luego dentro del key scripts veran una serie de comandos que angular agrega por defecto con el CLI, ahi ustedes pueden ejecutar si propios comandos.

Este es el ejemplo:

{
  "name": "myproject",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    .....
    "build:server": "ng build --prod; http-server ./dist"
    .....
  }
}

Ya por ultimo solo necesitan correr dentro del directorio del proyecto la tarea
npm run build:server

Espero sea de ayuda.

Roger Davila

student•

Así es!, En Windows el script sería:

"build:server": "ng build --prod & http-server dist"

Mon Avellaneda

student•

Muchas gracias! Funciona perfectamente.

Julio César Domínguez Giraldo

student•

Sufrí por errores varios y resulta que en la versión actual de angular para crear el proyecto con soporte para service workers se debe hacer:

ng new <nombre-proyecto>

Luego, ingresar a la carpeta del proyecto y ejecutar

ng add @angular/pwa --project <nombre-proyecto>

Fuente: https://angular.io/guide/service-worker-getting-started

Gabriel Solorzano

student•

Importante aclarar que el comando debe ejecutarse en la carpeta RAÍZ (o root). Gracias!

Santiago Donato

student•

Muchas gracias perdí 1 hora buscado info y me puse a leer comentarios y encontré tu solución. Muchas gracias!.

Alan Nava Torres

student•

Hola, alguien sabe como se hace el Alias en Windows? Creo que al profe le valiò un poco los que tenemos Windows.

Francisco Martin

student•

En mi época se llamaban baterias, y es muy sencillo, los comandos que necesitas, los escribes en un fichero.bat.... tambien lo puede crear del tiron en la linea de comando asi... c:/>copy con misecuencia.bat cd.. ng build --prod cd dist CONTROL+Z ' esta ultima instruccion hace que salga grabando este .bat ...

Lo que me pasa a mí es que la segunda vez que ejecuto esta compilación me dá errores el comando ng y no crea de nuevo la carpeta dist .... ¿ a alguien mas le pasa, en windows ????

gracias.

Jose Invernon

student•

Hola! puedes crear un script dentro del archivo del package.json algo como:

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "deploy": "ng build --prod && cd dist && cd app-name && http-server"
  },

luego puedes hacer "npm run deploy". Asi correrias todo. Deberia de funcionarte bien.

Carlos Uriel de Jesus Sánchez González

student•

app.component.ts

import {Component, OnInit} from '@angular/core';
import {SwUpdate} from '@angular/service-worker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pwa';

  constructor(private swUpdate: SwUpdate) {

  }

  ngOnInit(): void {
    if (this.swUpdate.isEnabled) {
      this.swUpdate.available.subscribe(() => {
        window.location.reload();
      });
    }
  }

}

Ramón Fajardo Fernández

student•

para poder importar el SwUpdate:

import {SwUpdate} from '@angular/service-worker';

necesité ejecutar por consola:
ng add @angular/pwa --(Nombre del proyecto)

Fabiola Dayana Acarapi Alvarez

student•

gran_ayuda_

Daniel Angles

student•

me aparece este error

ERROR in : Can't resolve all parameters for AppComponent in C:/Users/Daniel/pwa/src/app/app.component.ts: (?).
../src/app/app.component.ts(2,24): error TS2307: Cannot find module '@angular/service-worker'.

dejo mi código para localizar el error

import {Component, OnInit} from '@angular/core';
import {SwUpdate} from "@angular/service-worker";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'pwa';
  constructor(private swUpdate:SwUpdate){

  }
  ngOnInit(): void{
    if(this.swUpdate.isEnable){
      this.swUpdate.available.subscribe( next()=>{
        window.location.reload();
      })
    }
  }
}

Ricardo Asin

student•

Tengo el mismo error!!

Daniel Angles

student•

trata colocando en la terminal

ng add @angular/pwa

Alex Eugenio Gavidia Donayre

student•

Me perdí un poco, la página debe recargar automáticamente?

Alex Eugenio Gavidia Donayre

student•

Ya comprobé que la página carga automáticamente al detectar un cambio. !!! INTERESANTE!

Cristian Andrés Buitrago Suárez

student•

No he podido solucionar este error al volve a ejecutar el comando ng buid --prod me aparece

EPERM: operation not permitted, mkdir 'C:\Users\USUARIO\pwa\dist\pwa’
Error: EPERM: operation not permitted, mkdir ‘C:\Users\USUARIO\pwa\dist\pwa’

Juan Camilo Angel Fandiño

student•

Debes usar la consola con permisos administrativos, es mejor para esto usar cmd que git bash

Walter Lensinas

student•

Me ha pasado algo parecido, intente borrar la carpeta y me decía lo mismo. Lo mas raro es que soy administrador.. Reinicie el SO y todo volvió a la normalidad.

Guillermo Espinoza

student•

A alguien le sale esto?

main.1d40e14d1d3f940223c4.js:1 ERROR Error: StaticInjectorError(Ha)[e -> e]: 
  StaticInjectorError(Platform: core)[e -> e]: 
    NullInjectorError: No provider for e!
    at e.get (main.1d40e14d1d3f940223c4.js:1)
    at main.1d40e14d1d3f940223c4.js:1
    at e (main.1d40e14d1d3f940223c4.js:1)
    at e.get (main.1d40e14d1d3f940223c4.js:1)
    at main.1d40e14d1d3f940223c4.js:1
    at e (main.1d40e14d1d3f940223c4.js:1)
    at e.get (main.1d40e14d1d3f940223c4.js:1)
    at eo (main.1d40e14d1d3f940223c4.js:1)
    at e.get (main.1d40e14d1d3f940223c4.js:1)
    at Ho (main.1d40e14d1d3f940223c4.js:1)

me aparece este error después de haber importado SwUpdate de @angular/service-worker.

Irving Sarmiento

student•

Importaste SwUpdate de @angular/service-worker:

import { Component, OnInit } from '@angular/core'; import { SwUpdate } from '@angular/service-worker';

Jonnathan Ramiro Juma Jara

student•

ng add @angular/pwa

Jorge Luis Paiva Huamán

student•

Bash en windows. Hice un .bat pero despues de ejecutar el "ng build --prod" ahí termina toda la ejecucion del bachero :-(

Jonnathan Ramiro Juma Jara

student•

si les da un error con next prueben asi

  ngOnInit():void{
    if(this.swUpdate.isEnabled){
      this.swUpdate.available.subscribe( () =>{
        window.location.reload();
      })
    }

  }

Ánderson Márquez Rios

student•

Hola @jotajuma. Gracias. Y por qué no funciona con el next?

Carlos Enrique Ramírez Flores

student•

Como hicieron para que leyera la pwa dentro del dist/pwa? en windows

Jorge de Jesús Espino

student•

Solo pones dist/nombre-del-proyecto

Matias Campagna

student•

Hola Tengo el siguiente error y no se como solucionarlo: http://prntscr.com/k9khe0

Ayuda!

Diego Forero

Team Platzi•

puedes compartir el código de tu archivo app.component.ts

Roberto Rico Vicente

student•

Alguien sabra como se saca el next dentro de visual code dentro del subscribe(

Carlos Federico Rubio Prias

student•

Crear un Alias

Guillermo Espinoza

student•

Por si a alguien le sale un error con mensaje parecido a

ng add @angular/pwa fails with 'Invalid rule result: Function()

Se debe correr el comando

ng add @angular/pwa0.6.8

Parece que la versión mas reciente tiene algunas incompatiblidades con lo que se muestra en el curso.

Mas info aqui.

Jhon Harvy Acosta

student•

Tengo un problema con mi aplicacion no me aparese el archivo ngsw-config.json que pudo quedar mal.

Carlos Mario Mora Restrepo

student•

Este error fue la pista principal de mi sueño.

<code>ERROR in src/app/app.component.ts(16,48): error TS1005: ',' expected.

Me fui a dormir sin entenderlo, y ahora que me levante y comence a revisar los comentarios, pude encontrar que en la linea en la que se verifican los eventos que emite la subscripcion, sobraba el next. Pero segun , el next es requerido. El que sea requerido implica que sea declarado? o angular asume que si no declaro ninguna notificacion, debe tomarla como next.

Jhon Harvy Acosta

student•

gracias tengo un error cuando doy el comando del automático no se cual sera el error. si es de windows 10 o sera el comando

t\my-first-project>  my-first-project run build:server
my-first-project : El término 'my-first-project' no se reconoce como nombre de un cmdlet, función, archivo de
script o programa ejecutable. Compruebe si escribió correctamente el nombre o, si incluyó una ruta de acceso,
compruebe que dicha ruta es correcta e inténtelo de nuevo.
En línea: 1 Carácter: 2
+  my-first-project run build:server
+  ~~~~~~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (my-first-project:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException```

Erik Carl Candela Rojas

student•

sale error en la parte del next:

Oscar Barajas Tavares

Team Platzi•

Podrías compartirnos tu código o más de información

Erik Carl Candela Rojas

student•

  ngOnInit(): void{
    if(this.swUpdate.isEnabled){
      this.swUpdate.available.subscribe(
        next()=>{
          window.location.reload();
        }
      )
    }
  }

funciona si le quitas el “next”

  ngOnInit(): void{
    if(this.swUpdate.isEnabled){
      this.swUpdate.available.subscribe(
        ()=>{
          window.location.reload();
        }
      )
    }
  }

Alejandro Vélez

student•

Me está saliendo este error cuando recopilo para hacer la V2!

Y no sé si tengo un error en el código pero llevo rato intentándolo y no he podido saber que es.
acá pongo el código por si alguien me puede ayudar.

Alejandro Vélez

student•

luego de leer muchos comentarios pude resolver el problema.

Víctor Rueda

student•

Hola, y cómo fue que lo resolviste, ya he leído los comentarios pero no tengo idea de cómo hacerle

Gestión de versiones del Service Worker

Introducción

¡Vamos a renovar este curso!

Qué son las PWAs?

PWA vs SPA

Setup del Proyecto en Mac, Windows y Linux

Presentando el Editor de Código

Generando nuestro primer PWA

Service Worker

Correr nuestro app en modo de producción

Qué es el service worker de Angular?

Gestión de versiones del Service Worker

Configuración del Service Worker y Caching Policy

Propiciando el Click to Install banner

Estilo

Comprendiendo el concepto de responsividad

Introducción a Angular Material

Instalación de Angular Material

Configuración de Angular Material en el proyecto

Datos Dinámicos

Introducción a Acceso a Datos

Implementando Firebase

Creando un servicio de conexión a Firebase

Creando vista de lista y detalle

Guardando notas en Firebase

Obteniendo notas de Firebase

Editando notas

Implementando Caching

Push Notifications

Implementando Login

Configurando Push Notifications

Cómo instalar curl en Mac, Windows y/o Linux

Configurando Firebase Hosting y subiendo nuestro proyecto a producción

Implementando Push Notifications

Cloud Functions

NativeScript: Características Nativas en un Web App con Angular

¿Dónde Aprender Más?