El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Angular Universal

Següent ►
►

Introducció a Angular Universal

Angular Universal és una tecnologia que permet renderitzar aplicacions Angular al servidor. Això millora el rendiment de l'aplicació i l'experiència de l'usuari, especialment en dispositius amb connexions lentes. També ajuda a millorar el SEO (Search Engine Optimization) perquè els motors de cerca poden indexar millor el contingut de l'aplicació.

Beneficis d'Angular Universal

  1. Millora del rendiment inicial: La pàgina es carrega més ràpidament perquè el contingut es renderitza al servidor abans d'enviar-se al client.
  2. Millora del SEO: Els motors de cerca poden indexar el contingut renderitzat al servidor, millorant la visibilitat de l'aplicació.
  3. Millor experiència d'usuari: Els usuaris veuen el contingut més ràpidament, fins i tot abans que l'aplicació Angular es carregui completament al client.

Configuració d'Angular Universal

Pas 1: Instal·lació de les dependències necessàries

Per començar a utilitzar Angular Universal, primer hem d'instal·lar les dependències necessàries. Utilitzarem Angular CLI per afegir Angular Universal al nostre projecte.

ng add @nguniversal/express-engine

Aquest comandament farà el següent:

  • Instal·larà les dependències necessàries.
  • Configurarà el projecte per utilitzar Angular Universal.
  • Crearà fitxers addicionals per a la configuració del servidor.

Pas 2: Configuració del servidor

Després d'executar el comandament anterior, veurem que s'han creat alguns fitxers nous, incloent server.ts. Aquest fitxer conté la configuració del servidor Express per renderitzar la nostra aplicació Angular al servidor.

import 'zone.js/dist/zone-node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

const app = express();

const DIST_FOLDER = join(process.cwd(), 'dist/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', DIST_FOLDER);

app.get('*.*', express.static(DIST_FOLDER, {
  maxAge: '1y'
}));

app.get('*', (req, res) => {
  res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

const PORT = process.env.PORT || 4000;

app.listen(PORT, () => {
  console.log(`Node server listening on http://localhost:${PORT}`);
});

Pas 3: Construcció de l'aplicació

Per construir l'aplicació per a la renderització al servidor, utilitzarem el següent comandament:

npm run build:ssr

Aquest comandament crearà dues versions de l'aplicació:

  • Una per al navegador (dist/browser)
  • Una per al servidor (dist/server)

Pas 4: Executar l'aplicació

Finalment, per executar l'aplicació renderitzada al servidor, utilitzarem el següent comandament:

npm run serve:ssr

Aquest comandament iniciarà el servidor Express i renderitzarà l'aplicació Angular al servidor.

Exemples pràctics

Exemple 1: Renderització d'una pàgina simple

Suposem que tenim un component simple que mostra un missatge de benvinguda.

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

@Component({
  selector: 'app-welcome',
  template: `<h1>Benvingut a la nostra aplicació Angular Universal!</h1>`,
})
export class WelcomeComponent {}

Quan l'aplicació es carrega, aquest missatge es renderitzarà al servidor i es mostrarà immediatament al navegador.

Exemple 2: Millora del SEO

Suposem que tenim una pàgina amb contingut dinàmic que volem que els motors de cerca indexin.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-seo',
  template: `<h1>Contingut SEO</h1><p>Aquest és un contingut important per al SEO.</p>`,
})
export class SeoComponent implements OnInit {
  constructor(private meta: Meta, private title: Title) {}

  ngOnInit() {
    this.title.setTitle('Pàgina SEO');
    this.meta.addTags([
      { name: 'description', content: 'Aquesta és una pàgina important per al SEO.' },
      { name: 'keywords', content: 'Angular, SEO, Universal' },
    ]);
  }
}

Amb Angular Universal, aquest contingut es renderitzarà al servidor, permetent que els motors de cerca indexin la pàgina correctament.

Exercicis pràctics

Exercici 1: Configurar Angular Universal

  1. Crea un nou projecte Angular.
  2. Afegeix Angular Universal al projecte.
  3. Configura el servidor per renderitzar l'aplicació al servidor.
  4. Construeix i executa l'aplicació.

Exercici 2: Millorar el SEO d'una pàgina

  1. Crea un component que mostri contingut dinàmic.
  2. Afegeix metaetiquetes per millorar el SEO.
  3. Verifica que el contingut es renderitza correctament al servidor.

Conclusió

Angular Universal és una eina poderosa per millorar el rendiment i el SEO de les aplicacions Angular. Amb la configuració adequada, podem renderitzar les nostres aplicacions al servidor, oferint una millor experiència d'usuari i una millor visibilitat als motors de cerca. En els següents mòduls, explorarem altres conceptes avançats d'Angular per continuar millorant les nostres aplicacions.

◄ Anterior
◄
Següent ►
►

Curs d'Angular

Mòdul 1: Introducció a Angular

Mòdul 2: Components d'Angular

Mòdul 3: Enllaç de dades i directives

Mòdul 4: Serveis i injecció de dependències

Mòdul 5: Enrutament i navegació

Mòdul 6: Formularis a Angular

Mòdul 7: Client HTTP i observables

Mòdul 8: Gestió d'estat

Mòdul 9: Proves a Angular

Mòdul 10: Conceptes avançats d'Angular

Mòdul 11: Desplegament i millors pràctiques

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats