Creando vista de lista y detalle

Clase 19 de 31 • Curso de PWA con Angular 2018

Cristian Andrés Buitrago Suárez

student•

Todos los archivos están desactualizados. El curso está desactualizado.

No he podido importar el archivo de la carpeta service/ notes.service

ERROR in src/app/app.component.ts(13,36): error TS2304: Cannot find name ‘NotesService’.
src/app/app.module.ts(19,28): error TS2307: Cannot find module ‘./services/notes.service’.

Alguien que me ayude por favor!! =(

Santiago Yunda Rivera

student•

desde la versión 6 de angular no es necesario importar los servicios en el app.module.ts solo con tener el decorador @Injectable sobre tu servicio no hay necesidad:

todos tus imports aquí

@Injectable({
  providedIn: 'root'
})
export class NotesService {
	todo el contenido de tu servicio
}

con "
@Injectable({
providedIn: ‘root’
}) "

ya no hay necesidad de importar el servicio en el app.module.ts ya lo tienes listo para usar en cualquier componente donde lo inyectes

Alex Eugenio Gavidia Donayre

student•

Cierto

Ricardo Chavarria

student•

Buenas, tengo una duda, si tengo otro componente donde quier usar Angular Material siempre debo agregar los componentes de Angular Material en los imports de mi app.module.ts.

Saludos.

Roberto Bock

student•

Si, pero solo una vez, es decir si tu creaste un componente Componente1 y ahí requeriste importar el módulo “nombre_de_modulo_de_angular_material” luego si lo quieres usar en otro componente ya NO lo tienes que volver a importar en el campo imports del app.module, de hecho si lo intentas te va a dar un error

Emilio Quilodran

student•

Buenas ! cuando configuramos firebase la clase pasada, se me rompio la aplicacion, entiendo que es un problema de npm , previamente me asegure de tener el código correctamente

paso screen del error por consola

![](

alguna idea de que puede ser?

Julio J Yépez

student•

Intenta desinstalar y volver a instalar el módulo de Firebase, pareciera que se rompió en la descarga o en la instalación anterior … recuerda instalar ambos … firebase y angularfire2

Carlos Uriel de Jesus Sánchez González

student•

material esta espectacular

Ricardo Asin

student•

Me sale cannot find name ‘matButtonModule’

Jose Arias

student•

Para los que no les sirve el media query esta es una opción.

@media (max-width:768px){
    .mat-form-field{
        width: 100%;
    }

Santiago Yunda Rivera

student•

una recomendación para que su appmodule.ts quede limpio, creen un archivo aparte que contenga todos los elementos de material que desean usar.

tengo un archivo aparte llamado ‘app-material.ts’ que contiene:

import { NgModule } from '@angular/core';
import { MatToolbarModule,
         MatIconModule,
         MatExpansionModule,
         MatFormFieldModule,
         MatInputModule } from '@angular/material';

/**
 * NgModule that includes all Material modules.
*/
@NgModule({
  exports: [ MatToolbarModule,
             MatIconModule ,
             MatExpansionModule,
             MatFormFieldModule,
             MatInputModule ]
})
export class MaterialModule {}

este archivo lo importo en app.module.ts

/**                      Angular Material                  */
import { MaterialModule } from './app-material';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   ...
    MaterialModule,
   ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Alex Eugenio Gavidia Donayre

student•

Buen aporte

Jesús Leonardo Perea Alarcón

student•

Hola a todos, tengo un error con el Firebase y no he logrado resolverlo, agradezco la ayuda que me puedan dar. "29T03:47:10.863Z] @firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL. Be sure to include databaseURL option when calling firebase.initializeApp(). "

Jesús Leonardo Perea Alarcón

student•

Ya lo pude solucionar. Lo logre colocando los datos de acceso directamente en el import. y el nombre del archivo archivo ngsw-worker.json de manera correcta.

imports: [
    BrowserModule,
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.json', { enabled: environment.production }),
    BrowserAnimationsModule,
    MatToolbarModule,
    MatExpansionModule,
    MatFormFieldModule,
    MatInputModule,
    MatOptionModule,
    MatSelectModule,
    MatListModule,
    FormsModule,
    AngularFireModule.initializeApp({
      apiKey:"aqui va la apiKey",
      authDomain:"dominio.firebaseapp.com",
      databaseURL:"https://pwanotas-a2104.firebaseio.com",
      projectId:"projectId",
      storageBucngket:"projectId.appspot.com",
      storageBucket:"projectId.appspot.com",
      messagingSenderId:"xxxxxxxxx",
      appId:"1:xxxxxxxxx:web:xxxxxxxx"
    }),
    AngularFirestoreModule, // imports firebase/firestore, only needed for database features
    AngularFireAuthModule, // imports firebase/auth, only needed for auth features,
    AngularFireStorageModule, // imports firebase/storage only needed for storage features
    AngularFireDatabaseModule
  ]```

Juan Sebastian Figueroa Rodriguez

student•

así va el mío.

Edwin Alexis Hernandez Vazquez

student•

Vengo del 2021 y en cada vídeo me atoro por qué no funciona AngularMaterial :c

Joaquin Borra Trussi

student•

Buena comunidad de Platzi, estoy trabado con un problema que surge mientras configuro firebase…En la img dejo el error que me da.

saludos

Joaquin Borra Trussi

student•

C:\xampp18\htdocs\www\pwa (master -> origin)
λ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-05-04T17:52:21.567Z
Hash: 92a0884911f61a675a74
Time: 3038ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 166 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 852 kB [initial] [rendered]

ERROR in src/services/notes.services.ts(18,14): error TS1005: ‘=’ expected.
src/services/notes.services.ts(18,24): error TS1005: ‘;’ expected.
src/services/notes.services.ts(21,2): error TS1128: Declaration or statement expected.
src/services/notes.services.ts(21,25): error TS1005: ‘;’ expected.
src/services/notes.services.ts(24,1): error TS1128: Declaration or statement expected.

webpack: Failed to compile.
webpack: Compiling…
69% building modules 400/402 modules 2 active …@firebase\database\dist\index.cjs.jsERROR in node_modules/angularfire2/firebase.app.module.d.ts(10,22): error TS2420: Class ‘FirebaseApp’ incorrectly implements interface ‘FirebaseApp’.
Property ‘automaticDataCollectionEnabled’ is missing in type ‘FirebaseApp’.
Date: 2018-05-04T17:53:08.867Z - Hash: 529d86283569880ad953 - Time: 7799ms
2 unchanged chunks
chunk {main} main.bundle.js (main) 24.2 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 554 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 18.5 MB [initial] [rendered]

ERROR in ./node_modules/angularfire2/firestore/firestore.module.js
Module not found: Error: Can’t resolve ‘@firebase/firestore’ in ‘C:\xampp18\htdocs\www\pwa\node_modules\angularfire2\firestore’

webpack: Failed to compile.

David Toca

student•

Por lo que veo, tienes un error con la compilacion del archivo nodes.services.ts, al parecer te hace falta un punto y coma, revisa que este exactamente igual a como lo tiene el profesor:

import { Injectable } from '@angular/core';
import {AngularFireDatabase} from 'angularfire2/database/database';

@Injectable()
export class NotesService {
  constructor(public afDB: AngularFireDatabase){
  }
  note = [];
  public getNotes(){
    return this.afDB.list('/notes/');
  }
  public getNote(id){
    return this.afDB.object('/notes/' + id);
  }
  public createNote(note){
    return this.afDB.database.ref('/notes/' + note.id).set(note);
  }
  public editNote(note){
    return this.afDB.database.ref('/notes/' + note.id).set(note);
  }
  public deleteNote(note){
    return this.afDB.database.ref('/notes/' + note.id).remove();
  }
}

Wilson Fabian Pérez Sucuzhañay

student•

Pregunta busque en material angular no existe algo como en botstrap para decir con solo la clase que no se muestra asi en movil? sm-col-12 algo asi ?

Diego Forero

Team Platzi•

Puedes usar angular-material https://material.angular.io/

Carlos Uriel de Jesus Sánchez González

student•

puedes usar las clases de layout-grid de material, ya tiene para destop, tablet y movil, es muy parecido a lo de boostrap

Creando vista de lista y detalle

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?