Cursos Empresas Blog Live Conf Precios

Construcción del header de la aplicación

Clase 6 de 75 • Curso de MEAN 2017

Contenido del curso

Introducción al Curso de MEAN

El Frontend de PlatziOverflow

El Backend de PlatziOverflow

La Base de Datos de PlatziOverflow

Despliegue a producción

Contenido Bonus

Construcción del header de la aplicación

Obtén respuestas inmediatasProfundiza lo que acabas de ver

Comentarios

Edgar Muñoz

student•

El módulo MdIconModule no me lo reconoce el angular material, pero buscando encontré que debo importar el módulo MatIconModule, como se indica en la página de angular material

Alvaro Gonzalez

student•

Gracias por tu comentario, no me estaba funcionando, seria bueno que estas correcciones al curso se comentaran por el profesor.

wesly hernandez

student•

a mi me salio el miso error. pero con los dos. MatToolbarModul y MdIdconModule

Mike Nieva

teacher•

Como comentan, dependiendo de las versiones que utilicen, es el resultado, pero eventualmente, funciona.

Así terminé el ejercicio funcional, haciendo las modificaciones correspondientes hacia la última actualización de Angular:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Material Angular

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';
import 'hammerjs';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
`

material.module.ts

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

const modules = [
  MatToolbarModule,
  MatIconModule
];

@NgModule({
  imports: modules,
  exports: modules
 })

 export class MaterialModule {}

app.component.html

<mat-toolbar color="primary">
    <span>PlatziOverflow</span>
    <span class="space"></span>
    <mat-icon>account_circle</mat-icon>
</mat-toolbar>

Y mi archivo de package.json:

{
  "name": "platzi-overflow",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.3",
    "@angular/cdk": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.4",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

Mike Nieva

teacher•

Lo ideal es que sigan el consejo de @josevsp para igualar las versiones de Sacha.

De lo contrario, vayan haciendo los ajustes correspondientes de acuerdo a las suyas.

Luis Abdel Rangel Castro

student•

If you’re using Angular CLI, this is as simple as including one line in your styles.css file:
@import ‘~@angular/material/prebuilt-themes/deeppurple-amber.css’;

José Valentin Salina Peña

student•

Mi codigo tampoco funcionaba, pero al parecer sean las versiones de angular, al menos el core yo lo tenia en 5.0.0, o angular material. Les recomiendo descargarse el archivo package.json que utiliza sacha e incluirlo en su proyecto, luego ejecutar npm install.
Aqui les adjunto el archivo de sacha:

{
  "name": "platzi-overflow",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Javier Andres Navia Cartagena

student•

Muchas gracias =D

Ernesto Ledesma

student•

perfecto anduvo!

fabian Flechas

student•

el prefijo “md-*****” del selector de los componentes no funciona para la version 5.0.4 de material, se debe utilizar el "mat- " (material).
Esto mismo se aplica a los módulos.

javier alejandro segovia

student•

Descubri el error de toolbar <mat-icon>account_circle</mat-icon>
hay que reemplazarlo por esto:
<i class=“material-icons”>account_circle</i>

Jose Eduardo Nanni

student•

Genial! Ahora me funciona. Gracias

RAUL HENDE

student•

Excelente Aporte.... Gracias.-

Alejo Gonzalez

student•

para error mat-icon is not an angular module, incluir en material.module.ts lo siguiente
import {MatToolbarModule,MatIconModule } from ‘@angular/material’;
const modules = [MatToolbarModule,MatIconModule ];
hay que agregar el modulo de los iconos el cual se llaama, MatIconModule

javier alejandro segovia

student•

Aca lo dejo preparado la solucion:
<//app.component.html>

<mat-toolbar color=“primary”> <mat-toolbar-row> <span>Second Line</span> <span class=“space”></span> <i class=“material-icons”>account\_circle</i> </mat-toolbar-row> </mat-toolbar>

<//app.component.css>
.space {
flex: 1 1 auto;
}

Enzo Aliatis

student•

ERROR in Error: Metadata version mismatch for module /Users/enzoaliatis/Documents/Enzo2018/Platzi/MEAN/platzi-overflow/node_modules/@angular/material/core/typings/index.d.ts, found version 4, expected 3, resolving symbol MaterialModule in …

Para este Error tuve que actualizar todas mis dependencias entonces quedo asi:
“dependencies”: {
"@angular/animations": “^5.0.0”,
"@angular/cdk": “^5.0.0-rc0”,
"@angular/common": “^5.0.0”,
"@angular/compiler": “^5.0.0”,
"@angular/core": “^5.0.0”,
"@angular/forms": “^5.0.0”,
"@angular/http": “^5.0.0”,
"@angular/material": “^5.0.0-rc0”,
"@angular/platform-browser": “^5.0.0”,
"@angular/platform-browser-dynamic": “^5.0.0”,
"@angular/router": “^5.0.0”,
“core-js”: “^2.4.1”,
“hammerjs”: “^2.0.8”,
“rxjs”: “^5.4.2”,
“zone.js”: “^0.8.14”
},
“devDependencies”: {
"@angular/cli": “^1.5.0”,
"@angular/compiler-cli": “^5.0.0”,
"@angular/language-service": “^5.0.0”,
"@types/jasmine": “~2.5.53”,
"@types/jasminewd2": “~2.0.2”,
"@types/node": “~6.0.60”,
“codelyzer”: “~3.2.0”,
“jasmine-core”: “~2.6.2”,
“jasmine-spec-reporter”: “~4.1.0”,
“karma”: “~1.7.0”,
“karma-chrome-launcher”: “~2.1.1”,
“karma-cli”: “~1.0.1”,
“karma-coverage-istanbul-reporter”: “^1.2.1”,
“karma-jasmine”: “~1.1.0”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.1.2”,
“ts-node”: “~3.2.0”,
“tslint”: “~5.7.0”,
“typescript”: “~2.4.2”
}

Fuente : Fuente

Elvis W. Vásquez

student•

En esta página encontré la solución para lo de los iconos:

Emilio Jose Ugeda Sanoja

student•

Excelente clase Sacha 😃

Carlos Enrique Ramírez Flores

student•

vamos muy bien desde lo basico!!!

Walter Lensinas

student•

Trataré de ir subiendo el código de las clases a este repo:

RAUL HENDE

student•

Buenas, les realizo una consulta, estoy haciendo este fantástico curso, y de repente cuando modifico el código no veo los cambios reflejados en el navegador. ¿ A que se debe? Gracias.-

Diego Forero

Team Platzi•

Asegúrate que se compile todo el código cuando haces un cambio, otra opción que tienes es reiniciar el servidor de express y verificar que todo este funcionando bien, es importante que revises el log de la consola, puede ser que exista un error y no este transpilando el código y por eso no ves cambios en el navegador.

SocialLink Organizaciones Visibles

student•

Igual tenía este problema. Soy de los que no apagan la PC y se me ocurrió reiniciar mi IDE (Webstorm) y reiniciar Chrome. Ahora me está funcionando. Espero te sirva.

Herdic Asmeth Diaz Munevar

student•

De esta manera es como logro solucionar el problema de MdIconModule

Agustin David Luzenti

student•

Disculpen. Sigo sin poder visualizar el header después de haber seguido todos los pasos descriptos por las diferentes personas que han comentado.

Dejo mis clases aquí, quizás alguno pueda ayudarme para seguir avanzando.

package.json

{ "name": "platzi-overflow", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.1", "@angular/cdk": "^7.2.1", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/material": "^7.2.1", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "core-js": "^2.5.4", "hammerjs": "^2.0.8", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.12.0", "@angular/cli": "~7.2.2", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/node": "~8.9.4", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "~4.5.0", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~3.1.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }

app.modules.ts

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';

//material angular import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MaterialModule } from './material.module'; import 'hammerjs';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

material.modules.ts

import { NgModule } from '@angular/core';

import { MatToolbarModule, MatIconModule } from '@angular/material';

const modules = [ MatToolbarModule, MatIconModule ];

@NgModule({ //declarations: [], imports: modules, exports: modules //providers: [], }) export class MaterialModule {}

app.component.html

<mat-toolbar color="primary"> <span>Second Line</span> <span class="space"></span> <mat-icon>account_circle</mat-icon> </mat-toolbar>

index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>PlatziOverflow</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <body> <app-root></app-root> </body> </html>

Espero me puedan ayudar.

Muchas gracias y saludos.

Agustin David Luzenti

student•

.Aquí dejo el error

Agustin David Luzenti

student•

Aquí dejo el error

node-sass@4.11.0 install C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-72_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location try setting a proxy via HTTP_PROXY, e.g.

  export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

  npm config set proxy http://example.com:8080

node-sass@4.11.0 postinstall C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass node scripts/build.js

Building: C:\Program Files\nodejs\node.exe C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ gyp verb cli 'C:\Program Files\nodejs\node.exe', gyp verb cli 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' gyp verb cli ] gyp info using node-gyp@3.8.0 gyp info using node@12.0.0 | win32 | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing "build" directory gyp verb command configure [] gyp verb check python checking for Python executable "python2" in the PATH gyp verb which failed Error: not found: python2 gyp verb which failed at getNotFoundError (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12) gyp verb which failed at F (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19) gyp verb which failed at E (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29) gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqCallback.oncomplete (fs.js:166:21) gyp verb which failed python2 Error: not found: python2 gyp verb which failed at getNotFoundError (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12) gyp verb which failed at F (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19) gyp verb which failed at E (C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29) gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5 gyp verb which failed at C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5 gyp verb which failed at FSReqCallback.oncomplete (fs.js:166:21) { gyp verb which failed stack: 'Error: not found: python2\n at getNotFoundError ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:13:12)\n' + gyp verb which failed ' at F ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:68:19)\n' + gyp verb which failed ' at E ' + gyp verb which failed '(C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:80:29)\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\which\which.js:89:16\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\index.js:42:5\n' + gyp verb which failed ' at ' + gyp verb which failed 'C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\isexe\windows.js:36:5\n' + gyp verb which failed ' at FSReqCallback.oncomplete (fs.js:166:21)', gyp verb which failed code: 'ENOENT' gyp verb which failed } gyp verb check python checking for Python executable "python" in the PATH gyp verb which succeeded python C:\Program Files\Python37\python.EXE gyp ERR! configure error gyp ERR! stack Error: Command failed: C:\Program Files\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack File "<string>", line 1 gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3]; gyp ERR! stack ^ gyp ERR! stack SyntaxError: invalid syntax gyp ERR! stack gyp ERR! stack at ChildProcess.exithandler (child_process.js:304:12) gyp ERR! stack at ChildProcess.emit (events.js:196:13) gyp ERR! stack at maybeClose (internal/child_process.js:1000:16) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:267:5) gyp ERR! System Windows_NT 10.0.17134 gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd C:\Leandro\Leandro\Programacion\MEAN\platzi-overflow\node_modules@angular-devkit\build-angular\node_modules\node-sass gyp ERR! node -v v12.0.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! not ok Build failed with error code: 1 npm WARN ajv-keywords@3.4.0 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.11.0 (node_modules@angular-devkit\build-angular\node_modules\node-sass): npm WARN optional SKIPPING OPTIONAL DEPENDENCY: node-sass@4.11.0 postinstall: node scripts/build.js npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

audited 42967 packages in 13.896s found 3 vulnerabilities (1 low, 2 high) run npm audit fix to fix them, or npm audit for details

Jesus Eduardo Cruz Valdez

student•

¿que es ng?

Juan Camilo Angel Fandiño

student•

Es el comando de angular cli para utilizar los generadores y los comandos de angular en general.

Jorge Leonardo Céspedes Tapia

student•

La nueva versión ya tiene incorporado varias dependencia y módulos.

Rocio Silva Fernandez

student•

me salta el sig error, alguien sabe como solucionarlo? Cannot read property 'textContent' of null

Julián Sotelo

student•

También se deben reemplazar en el HTML las etiquetas <md-> por <mat->

Jose Alejandro Gonzalez Rondon

student•

¿Pregunta curiosa por que al traducir la pagina el icono se desaparece?

Quimey Lucas Marquez

student•

Yo probe traducirla y aun asi se mantiene eso 😕