Tutorial sobre a criação de uma aplicação SSG com Angular: Static Site Generation.

Neste tutorial, você aprenderá como criar uma aplicação utilizando Static Site Generation (SSG) com Angular. O SSG é uma abordagem de geração de sites estáticos que pré-renderiza as páginas durante o build do aplicativo, o que resulta em um carregamento mais rápido e em melhor performance.

Vamos começar criando um novo projeto Angular. Certifique-se de ter o Angular CLI instalado em seu sistema antes de prosseguir. Para criar um novo projeto Angular, abra o terminal e execute o seguinte comando:

ng new nome-do-projeto

Isso criará uma nova pasta com a estrutura básica do projeto Angular. Navegue até a pasta do projeto usando o comando cd e então instale as dependências necessárias executando o comando:

npm install

Agora, vamos instalar a biblioteca @angular-builders/custom-webpack para personalizar o processo de build. Execute o seguinte comando:

npm install @angular-builders/custom-webpack --save-dev

Em seguida, precisamos importar o plugin na configuração do Angular CLI. Abra o arquivo angular.json na raiz do projeto e adicione o plugin no architect/build:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./extra-webpack.config.js"
      }
    }
  }
}

Agora, crie um novo arquivo chamado extra-webpack.config.js na raiz do projeto e adicione a seguinte configuração para habilitar o Static Site Generation:

module.exports = {
  target: 'node'
};

Com isso feito, podemos agora gerar as páginas de forma estática. Crie um novo componente Angular que representa uma página do site. Por exemplo, podemos criar um componente chamado home:

ng generate component home

Em seguida, crie um arquivo home.route.ts na pasta do componente home com o seguinte conteúdo:

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  }
];

Agora, importe as rotas da página home no app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeRoutes } from './home/home.route';

const routes: Routes = [
  ...HomeRoutes
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Finalmente, adicione a tag <router-outlet> no arquivo app.component.html para renderizar as páginas dinamicamente:

<router-outlet></router-outlet>

Agora, podemos gerar as páginas estáticas executando o comando:

ng build --output-hashing none

Isso gerará a versão estática do site na pasta dist. Você pode hospedar esses arquivos em qualquer serviço de hospedagem estática, como o Netlify ou Vercel.

Espero que este tutorial o tenha ajudado a entender como criar uma aplicação SSG com Angular. Se tiver alguma dúvida ou precisar de mais informações, não hesite em entrar em contato.