¿Cómo resolver errores al renderizar una aplicación Angular en el servidor y navegador?
Al trabajar con aplicaciones Angular, es común enfrentar errores al realizar el renderizado desde el servidor y el navegador. Esto se debe a las diferencias entre las capacidades y referencias disponibles en cada entorno. Aquí te mostramos cómo manejar estas diferencias de manera efectiva.
¿Qué referencias se pierden al pasar al servidor?
Cuando tu aplicación Angular está configurada para renderizar desde el servidor (SSR), algunas referencias y funciones específicas del navegador, como window, document o API de geolocalización, no están disponibles de la misma manera. Esto puede llevar a errores si el código intenta acceder a ellas directamente. Angular proporciona herramientas para diferenciar dónde se ejecuta el código, ya sea en el servidor o en el navegador.
¿Cómo utilizar isPlatformBrowser e isPlatformServer para solucionar problemas de renderizado?
Para determinar el entorno en el que se está ejecutando tu aplicación y adaptar el comportamiento en consecuencia, Angular ofrece dos métodos muy útiles:
isPlatformBrowser: Identifica si el código se está ejecutando en el navegador.isPlatformServer: Verifica si el código se está ejecutando en el servidor.Ejemplo de implementación:
import { PLATFORM_ID, Inject } from '@angular/core'; import { isPlatformBrowser, isPlatformServer } from '@angular/common'; export class AppComponent { constructor(@Inject(PLATFORM_ID) private platformId: Object) { if (isPlatformBrowser(this.platformId)) { console.log('Este código se ejecuta solo en el navegador'); } if (isPlatformServer(this.platformId)) { console.log('Este código se ejecuta solo en el servidor'); } } }
¿Cómo podemos limpiar la caché y asegurar que el contenido no esté precargado sin actualización?
Manos a la obra. A menudo, durante el desarrollo y pruebas de aplicaciones Angular, la caché del navegador puede causar que veas contenido desactualizado. Limpiarla es vital para asegurar que estás viendo la versión más reciente de tu aplicación.
Limpieza manual de la caché: Accede a las herramientas de desarrollo del navegador, dirígete a la sección de aplicación o almacenamiento y borra toda la caché.
Desactivación puntual de la caché: Esto se puede hacer directamente desde las opciones de las herramientas de desarrollo para asegurarte de que el navegador no utilice versiones almacenadas temporalmente de tus archivos.
¿Cómo asegurar la correcta indexación y mejora en rendimiento?
Utilizando técnicas de renderizado del lado del servidor (SSR) con Angular, no solo mejoras la experiencia del usuario al proporcionar contenido más rápido, sino que también optimizas tu aplicación para los motores de búsqueda, maximizando la visibilidad en la web. Mantén tu aplicación en óptimas condiciones asegurándote de que:
Estos ajustes y técnicas no solo mejorarán el rendimiento de tu aplicación, sino que también maximizarán su visibilidad en los motores de búsqueda, llevándola a un nuevo nivel en el entorno digital. ¡Continúa aplicando estos conceptos y verás grandes mejoras en tu desarrollo con Angular!
Al día de hoy la documentación ha cambiado, no me saltaron errores en el swiper, el unico error que tuve fue el mismo, el de localStorage, apoyandome de la documentación hice modificaciones el el archivo token service y quedó así:
import { Injectable, Inject } from '@angular/core'; import {DOCUMENT} from '@angular/common'; @Injectable({ providedIn: 'root' }) export class TokenService { // tslint:disable-next-line: variable-name constructor(@Inject(DOCUMENT) private _doc: Document) { } saveToken(token: string): void { this.getWindow().localStorage.setItem('token', token); } getToken(): string { return this.getWindow().localStorage.getItem('token'); } private getWindow(): Window | null { return this._doc.defaultView; } }
Como el localStorage es una funcion de window, en el server no lo tenemos asi que se injecta el documento.
Rodrigo Rodriguez
Hola a todos, tengo la siguiente duda, si el home hace llamadas al API y se hace server side rendering, tendriamos que hacer las llamadas al api solo cuando se esta en el servidor ? , por lo tanto tendria que hacer uso de if platformServer para saber si corresponde hacer la llamada. ??
Juan Diego Brocca
Cuando levanto el SSR me sale el siguiente mensaje de error:
@ngrx/store: The feature name “siteContext” does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot(‘siteContext’, ...) or StoreModule.forFeature(‘siteContext’, ...). If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.
Alguien sabe porque?
Alejandro Valenzuela
Buenas comunidad, tengo una consulta a la hora de aplicar esta tecnica, yo tengo un proyecto en el cual deploye en heroku( segui una esta guia ), y lo que hice fue agregar un service.js en el raiz:
const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(__dirname + '/dist/farmacia-fnt')); app.get('/*', function (req, res) { res.sendFile(path.join(__dirname+'/dist/farmacia-fnt/index.html')); }); app.listen(process.env.PORT || 8080); console.log(`Running on port ${process.env.PORT || 8080}`)
y el cual ejecuto la aplicación desde este archivo mediante el comando :
package.json { .. "start:prod": "node server.js", }
ahora con esta técnica como tengo que proceder??osea ya no usaría este archivo, el que cree yo?? no me queda claro como deployar el proyecto. Desde ya si alguien me puede guiar se lo agraderia. Alejandro.
Victor Larco Buchelli
Pese a colocarlo dentro del condicional isPlatform tengo problemas con el localstorage. Me salta el siguiente error: ERROR { Error: Uncaught (in promise): ReferenceError: localStorage is not defined. Saben como puedo solucionarlo.
Nicolas Molina
ProfesorHola! al parecer tu SSR no esta funcionando muy bien por que toma el localstorage como parte del código del server nos puedes mostrar como estas haciendo el uso de isPlatform ?
Armando Rivera
Christian Guevara
Hey SaaS
Angular Universal funciona en un servidor en python, como funciona en AWS???
Manuel Andrade
Como puedo usar SSR en mi servidor de cpanel??? Falto este tema en este módulo.
Nicolas Molina
ProfesorHola, para esto necesitas NodeJs corriendo en tu servidor.
Un Cpanel es muy limitado, ya que viene con la formula LAMP (Linux, Apache, Mysql y PHP) por defecto y es complejo cambiarlo, debes hablar con tu proveedor.
Te recomiendo mejor un instancia en donde tu tengas total control y puedas instalar node y lo que sea.
Te recomiendo DO (Digital Ocean) para iniciar tiene maquinas desde 5 USD.
Nicolas Molina
ProfesorHeroku también es un excelente opción si quieres iniciar mucho más rápido.
Andres Giraldo
Nico, excelente clase pero me quedo una duda, dices que al ejecutar los comandos de SSR serve:ssr, build:ssr se levanta un servidor NODEJS en el puerto 4000, como seria entonces el proceso para llevar una aplicación con SSR a producción? cambiaría algo o seria igual?
Bryan Alejandro Sánchez Ramírez
Te comparto mi experiencia: tengo un proyecto de SSR en un servidor Ubuntu con un proxy inverso de NGINX. Tu pones la configuración para que cuando se haga una solicitud al puerto 80 tome lo que hay al puerto 4000 (por ejemplo).
Bryan Alejandro Sánchez Ramírez
Algo mas o menos de este estilo.
Jorge Jorge Marrero
Armando Rivera
Al dia de hoy el comando ha cambiado, ahora es
npm run dev:ssr
Sin el build
Armando Rivera
Para solucionar ese problema de window te recomiendo leer la doucmentación ya que se actualizó. https://github.com/angular/universal/blob/master/docs/gotchas.md
Practicamente tienes que inyectar el documento y despues con los metodos get que ahí vienen hacer referencia a window
Al día de hoy la documentación ha cambiado, no me saltaron errores en el swiper, el unico error que tuve fue el mismo, el de localStorage, apoyandome de la documentación hice modificaciones el el archivo token service y quedó así:
import { Injectable, Inject } from '@angular/core'; import {DOCUMENT} from '@angular/common'; @Injectable({ providedIn: 'root' }) export class TokenService { // tslint:disable-next-line: variable-name constructor(@Inject(DOCUMENT) private _doc: Document) { } saveToken(token: string): void { this.getWindow().localStorage.setItem('token', token); } getToken(): string { return this.getWindow().localStorage.getItem('token'); } private getWindow(): Window | null { return this._doc.defaultView; } }
Como el localStorage es una funcion de window, en el server no lo tenemos asi que se injecta el documento.
Tengo una consulta a dia de hoy en mi proyecto estoy importando iconos externos y lo almaceno en mi carpeta de assets, al poner en marchi mi servidor tengo un problema y es que me aparace el siguiente error:
++ERROR Error: Error retrieving icon :platzi! Unable to find icon with the name ":platzi"++
Actualmente yo importo los iconos con Angular Material en la documentacion, implmente lo aprendido en esta clase pero no consigo solucion al error :(
import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core'; import { isPlatformBrowser, isPlatformServer } from '@angular/common'; import { DomSanitizer } from '@angular/platform-browser'; import { MatIconRegistry } from '@angular/material/icon'; @Component({ selector: 'app-footer', templateUrl: './footer.component.html', styleUrls: ['./footer.component.scss'], }) export class FooterComponent implements OnInit { constructor( iconRegistry: MatIconRegistry, sanitizer: DomSanitizer, // tslint:disable-next-line: ban-types @Inject(PLATFORM_ID) private platformId: Object ) { if (isPlatformBrowser(this.platformId)) { iconRegistry.addSvgIcon( 'youtube', sanitizer.bypassSecurityTrustResourceUrl('../../../../assets/svg/youtube.svg') ); iconRegistry.addSvgIcon( 'platzi', sanitizer.bypassSecurityTrustResourceUrl('assets/svg/Platzi.svg') ); iconRegistry.addSvgIcon( 'twitter', sanitizer.bypassSecurityTrustResourceUrl('assets/svg/twitter.svg') ); } } ngOnInit(): void {} }
Ese es el modo que lo implemento en mi Footer pero no consigo eliminar el error...
Una consulta cuando ejecuto npm run build:ssr && npm run serve:ssr me sale el siguiente error
Angular is running in the development mode. Call enableProdMode() to enable the production mode. ERROR ReferenceError: window is not defined
y en ese fichero main.ts lo que hay es
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; if (environment.production) { enableProdMode(); } document.addEventListener('DOMContentLoaded', () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); });
