Gerando o Build do Projeto Angular

No tema anterior, criamos o primeiro projeto simples:

helloapp/
|-- angular.json
|-- package.json
|-- tsconfig.json
|-- src/
    |-- index.html
    |-- main.ts
    |-- app/
        |-- app.component.ts

Como podemos obter os arquivos que realmente representam a aplicação e que podemos hospedar em algum servidor? Para isso, precisamos gerar o build do projeto.

No tema anterior, definimos o seguinte arquivo angular.json:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

A seção "build" descreve a configuração do comando "ng build". Em particular, o parâmetro "outputPath" define o diretório onde os arquivos compilados da aplicação serão armazenados.

Podemos então inserir o comando ng build no terminal para gerar o build do projeto:

C:\angular\helloapp>ng build

✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial chunk files | Names         |  Raw size | Estimated transfer size
main.js             | main          | 131.64 kB |                37.34 kB
polyfills.js        | polyfills     |  34.80 kB |                11.31 kB
runtime.js          | runtime       | 894 bytes |               507 bytes

| Initial total | 167.34 kB |                49.16 kB

Build at: 2024-08-25T18:17:23.192Z - Hash: bbdae8f2c8b17218 - Time: 11927ms

Após a execução desse comando, será criada uma pasta dist/helloapp no diretório do projeto, onde poderemos ver todos os arquivos da aplicação. Podemos hospedar esses arquivos em qualquer servidor web e acessar a página principal da aplicação:

dist/ 
|-- helloapp/
    |-- 3rdpartylicenses.txt
    |-- index.html
    |-- main.js
    |-- polyfills.js
    |-- runtime.js

Configurando o Build do Projeto

Por padrão, o Angular CLI utiliza uma série de configurações ao gerar o build do projeto. Por exemplo, os arquivos são compilados no modo de produção, ou seja, prontos para serem implantados. No entanto, também podemos definir explicitamente todas as configurações do build do projeto. Vamos alterar o arquivo angular.json da seguinte forma:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {
              "optimization": false,
              "sourceMap": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

Agora adicionamos uma subseção "configurations" ao comando "build", que define configurações adicionais para o projeto. Aqui, foram especificadas duas configurações: "production" e "development". Estas são configurações que se aplicam ao build da aplicação, quando ela está pronta para ser implantada e usada plenamente. As seguintes configurações são definidas:

• optimization: indica se a otimização será aplicada.

• outputHashing: define se um valor hash será adicionado ao nome dos arquivos gerados. O valor "all" indica que um hash será adicionado aos nomes de todos os arquivos gerados.

• sourceMap: define se os arquivos de mapa de origem (source map) serão gerados.

• namedChunks: define se os arquivos nomeados para chunks carregados serão utilizados.

• vendorChunk: define se será criado um arquivo separado para bibliotecas de terceiros usadas na aplicação.

• buildOptimizer: ativa o pacote @angular-devkit/build-optimizer para otimização ao usar a opção aot.

É importante notar que essas configurações não afetam o processo de desenvolvimento da aplicação, mas apenas o build da aplicação.

Agora vamos usar a configuração de produção para gerar o build do projeto. Para isso, passamos o parâmetro --configuration production ao comando build:

C:\angular\helloapp>ng build --configuration production

Após isso, veremos na pasta dist/helloapp os mesmos arquivos, mas que foram gerados com as configurações especificadas no arquivo angular.json. Alterando essas configurações, podemos ajustar os parâmetros do build do projeto conforme necessário para situações específicas.