[Anderson Paraibano]

Angular Universal: Excluir Rota para uma Aplicação Angular 6+ [RESOLVIDO]

Resumo:
Angular Universal é uma estrutura poderosa para renderização do lado do servidor (SSR) em aplicações Angular. No entanto, às vezes é necessário excluir rotas específicas da renderização SSR, seja porque essas rotas são exclusivas para o cliente ou porque dependem de recursos indisponíveis no ambiente de renderização SSR. Neste artigo, exploraremos como excluir rotas do processo de renderização SSR em uma aplicação Angular 6+ com Angular Universal.

Introdução:
O Angular Universal permite que os desenvolvedores criem aplicações Angular que podem ser pré-renderizadas no servidor e entregues como HTML estático para melhorar o desempenho e a experiência do usuário. No entanto, nem todas as rotas em uma aplicação Angular são adequadas para a renderização SSR. Alguns exemplos comuns são rotas que dependem de APIs de terceiros ou serviços específicos do cliente, como autenticação.

Excluindo rotas da renderização SSR:
Para excluir uma rota específica da renderização SSR em uma aplicação Angular com Angular Universal, siga as etapas abaixo:

Passo 1: Identificar as rotas a serem excluídas
Primeiro, identifique as rotas que não devem ser renderizadas no servidor. Essas rotas podem depender de recursos específicos do cliente ou simplesmente não se beneficiarem da renderização SSR.

Passo 2: Configurar o módulo de roteamento
No módulo de roteamento da sua aplicação Angular, geralmente chamado de “app-routing.module.ts” ou similar, adicione uma condição para excluir as rotas identificadas no passo anterior. Por exemplo:

typescript
Copy code
import { NgModule } from ‘@angular/core’;
import { Routes, RouterModule } from ‘@angular/router’;

const routes: Routes = [
{ path: ‘home’, component: HomeComponent },
{ path: ‘about’, component: AboutComponent },
// …outras rotas…
{ path: ‘rota-excluida’, component: RotaExcluidaComponent, data: { ssr: false } }, // Exemplo de rota excluída
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
No exemplo acima, a rota com o caminho “rota-excluida” foi marcada com “data: { ssr: false }”, indicando que ela não deve ser renderizada no servidor.

Passo 3: Acessar a propriedade ssr nas rotas
Para que a exclusão das rotas funcione corretamente, é necessário acessar a propriedade “ssr” nas rotas durante a renderização SSR. No arquivo “server.ts” ou em outro arquivo responsável pela inicialização do servidor, adicione o seguinte código:

typescript
Copy code
import ‘zone.js/dist/zone-node’;
import { renderModuleFactory } from ‘@angular/platform-server’;
import { provideModuleMap } from ‘@nguniversal/module-map-ngfactory-loader’;
import { APP_BASE_HREF } from ‘@angular/common’;
import { readFileSync } from ‘fs’;
import { enableProdMode } from ‘@angular/core’;
import * as express from ‘express’;
import { join } from ‘path’;

const app = express();
const port = 4000;
const distFolder = join(process.cwd(), ‘dist/browser’);
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require(‘./dist/server/main’);

// …

app.get(‘*’, (req, res) => {
const shouldRenderSSR = (route) => route.data && route.data.ssr !== false;

const routesToRender = appRoutes.filter(shouldRenderSSR); // Filtra as rotas que devem ser renderizadas

// Renderiza a aplicação Angular com as rotas filtradas
renderModuleFactory(AppServerModuleNgFactory, {
document: indexHtml,
url: req.url,
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP),
{ provide: APP_BASE_HREF, useValue: req.baseUrl },
{ provide: ‘routesToRender’, useValue: routesToRender } // Passa as rotas filtradas como um provedor
]
}).then(html => {
res.status(200).send(html);
}).catch(err => {
console.error(err);
res.sendStatus(500);
});
});

// …

No código acima, a função “shouldRenderSSR” filtra as rotas com base na propriedade “ssr”. A lista de rotas filtradas é passada como um provedor com a chave “routesToRender” para que possa ser acessada posteriormente no servidor.

Conclusão:
Excluir rotas específicas da renderização SSR em uma aplicação Angular com Angular Universal pode ser alcançado seguindo as etapas descritas neste artigo. Ao marcar rotas com a propriedade “data: { ssr: false }” e filtrar essas rotas durante a renderização SSR, os desenvolvedores têm controle sobre quais rotas serão processadas no servidor.

Lembre-se de considerar cuidadosamente quais rotas devem ser excluídas da renderização SSR, pois isso pode afetar o desempenho e a experiência do usuário.

[Autor]

Posts