Angular CLI: Construindo sua Aplicação para o Lançamento

No primeiro artigo desta série, preparamos o terreno, instalando o Angular CLI e criando um projeto inicial. Agora, com a nave-mãe Angular CLI em construção, é hora de preparar sua aplicação para o lançamento, transformando seu código-fonte em um pacote otimizado e pronto para ser implantado em produção.

O Comando ng build: Seu Arsenal de Construção

O comando ng build é a ferramenta principal para construir sua aplicação Angular. Ele compila o código TypeScript para JavaScript, além de otimizar, agrupar e minificar o resultado, tornando-o mais leve e rápido para ser carregado pelos navegadores.

Construtores (Builders): Os Mestres da Construção

O Angular CLI utiliza construtores (builders) para realizar as diferentes etapas do processo de construção. Cada construtor tem uma finalidade específica, e você pode escolher qual utilizar de acordo com suas necessidades.

Dica: Projetos criados com ng new utilizam @angular-devkit/build-angular:application por padrão. Bibliotecas criadas com ng generate library utilizam @angular-devkit/build-angular:ng-packagr.

Encontrando o Construtor do Seu Projeto

Você pode verificar qual construtor está sendo utilizado em seu projeto consultando o arquivo angular.json. O alvo de construção (build) especifica o construtor utilizado pelo comando ng build.

{
  "projects": {
    "meu-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          ...
        },
        ...
      }
    }
  }
}

Opções de Construção: Personalizando o Lançamento

O comando ng build oferece diversas opções para personalizar o processo de construção da sua aplicação.

--configuration ou -c: Escolhendo a Configuração de Construção

Você pode definir diferentes configurações de construção para sua aplicação, como desenvolvimento (development), produção (production) ou outras personalizadas. A opção --configuration ou -c permite que você escolha qual configuração utilizar ao executar o comando ng build.

ng build --configuration production

--output-path ou -op: Definindo o Diretório de Saída

Por padrão, o Angular CLI gera os arquivos da sua aplicação no diretório dist/. Você pode alterar o diretório de saída utilizando a opção --output-path ou -op.

ng build --output-path build

--watch ou -w: Monitorando as Alterações

A opção --watch ou -w mantém o processo de construção ativo, monitorando as alterações nos seus arquivos e reconstruindo a aplicação automaticamente sempre que um arquivo for modificado. Isso é útil durante o desenvolvimento, pois permite que você visualize as mudanças em tempo real.

ng build --watch

Com o comando ng build e suas opções, você tem controle total sobre o processo de construção da sua aplicação Angular, preparando-a para o lançamento em produção com o máximo de performance e eficiência.Controlando o Tamanho da Aplicação: Orçamento de Tamanho no Angular CLI

À medida que as aplicações Angular crescem em funcionalidades, elas também tendem a aumentar em tamanho. Para garantir que sua aplicação permaneça leve e eficiente, o Angular CLI permite que você defina limites de tamanho para diferentes partes do seu projeto.

Definindo Limites de Tamanho

Você pode configurar limtes de tamanho no arquivo de configuração do CLI, angular.json, na seção budgets de cada ambiente configurado.

{
  ...,
  "configurations": {
    "production": {
      ...,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "250kb",
          "maximumError": "500kb"
        }
      ]
    }
  }
}

Neste exemplo, estamos definindo um limite para o tamanho inicial da aplicação em produção. Se o tamanho inicial ultrapassar 250kb, o CLI emitirá um aviso. Se ultrapassar 500kb, o processo de build falhará.

Tipos de Orçamento

Você pode especificar limites para o tamanho total da aplicação, para pacotes específicos ou para partes individuais, como estilos de componentes ou scripts.

Formatos de Valores de Tamanho

Os valores de tamanho podem ser especificados nos seguintes formatos:

Propriedades dos Orçamentos

Cada entrada de orçamento é um objeto JSON com as seguintes propriedades:

Exemplo de Limites de Tamanho

Aqui está um exemplo mais detalhado de como você pode configurar vários limites de tamanho:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "allScript",
                  "maximumWarning": "1.5mb",
                  "maximumError": "2mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "5kb",
                  "maximumError": "10kb"
                },
                {
                  "type": "anyScript",
                  "maximumWarning": "200kb",
                  "maximumError": "300kb"
                }
              ]
            }
          }
        }
      }
    }
  }
}

Neste exemplo, foram definidos diversos tipos de limites para diferentes partes da aplicação, cada um com seus próprios limites de aviso e erro.

Configurando Dependências CommonJS: Navegando em Águas Turbulentas

No vasto universo das bibliotecas JavaScript, você encontrará módulos em diferentes formatos, como os nativos ECMAScript modules (ESM) e os mais antigos CommonJS (CJS). Ao construir sua aplicação Angular, é crucial entender a diferença entre esses formatos e como configurá-los corretamente para garantir um desempenho otimizado.

ESM: A Estrela Guia da Modularidade

Os ECMAScript modules (ESM) são o padrão moderno para modularidade em JavaScript. Eles oferecem recursos como importação e exportação estática, carregamento assíncrono e suporte a análise estática, o que permite que ferramentas como o Angular CLI otimizem seus pacotes de forma mais eficiente.

Sempre que possível, dê preferência a bibliotecas que utilizam ESM, pois isso resultará em aplicações menores e mais rápidas.

CommonJS: Um Visitante do Passado

O CommonJS (CJS) é um formato de módulo mais antigo, amplamente utilizado em bibliotecas Node.js. Embora o Angular CLI suporte a importação de dependências CommonJS, esses módulos podem dificultar a otimização do seu pacote, resultando em um tamanho maior.

Isso ocorre porque o CommonJS utiliza um sistema de carregamento dinâmico, que dificulta a análise estática do código. Como resultado, ferramentas como o Angular CLI podem ter dificuldade em identificar quais partes do módulo são realmente utilizadas, incluindo código desnecessário no pacote final.

Lidando com Dependências CommonJS

Ao encontrar uma dependência CommonJS em seu projeto Angular, você tem algumas opções:

1. Contatar o Mantenedor: Entre em contato com o mantenedor da biblioteca e solicite que eles adicionem suporte a ESM.
2. Contribuir: Se você tiver conhecimento suficiente, pode contribuir com a biblioteca, adicionando suporte a ESM.
3. Buscar Alternativas: Procure por bibliotecas alternativas que já utilizem ESM e atendam às suas necessidades.
4. Permitir a Dependência: Se nenhuma das opções acima for viável, você pode permitir a dependência CommonJS em seu projeto adicionando o nome do módulo à opção allowedCommonJsDependencies no arquivo angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "allowedCommonJsDependencies": [
              "lodash"
            ]
          }
        }
      }
    }
  }
}

Atenção: Permitir dependências CommonJS pode aumentar significativamente o tamanho do seu pacote. Utilize essa opção com cautela e apenas quando estritamente necessário.

Ao navegar pelas águas turbulentas das dependências CommonJS, lembre-se sempre de priorizar o uso de ECMAScript modules para garantir um desempenho otimizado e uma experiência de usuário superior. Com o Angular CLI e as boas práticas de modularidade, você estará construindo aplicações web modernas e eficientes, prontas para conquistar o universo.

Garantindo Compatibilidade Entre Navegadores: A Bússola da Navegação Web

A web é um universo vasto e diversificado, com uma infinidade de navegadores e versões diferentes. Para garantir que sua aplicação Angular funcione perfeitamente em todos os cantos desse universo, o Angular CLI utiliza o Browserslist, uma ferramenta poderosa que permite definir quais navegadores e versões sua aplicação deve suportar.

Browserslist: A Bússola da Compatibilidade

O Browserslist é como uma bússola que guia o Angular CLI na tarefa de transformar seu código JavaScript e CSS para garantir a compatibilidade com os navegadores desejados. Ele identifica quais recursos da linguagem e quais propriedades de estilo são suportados por cada navegador e aplica as transformações necessárias para evitar erros e inconsistências.

Configuração Padrão: Compatibilidade Garantida

O Angular CLI utiliza uma configuração padrão do Browserslist que abrange os navegadores oficialmente suportados pelo Angular:

last 2 Chrome versions
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

Essa configuração garante que sua aplicação funcionará nas versões mais recentes dos principais navegadores, proporcionando uma experiência consistente para a maioria dos usuários.

Personalizando a Compatibilidade: Ajustando a Bússola

Em alguns casos, você pode precisar personalizar a configuração do Browserslist para atender às necessidades específicas do seu projeto. Por exemplo, se você precisar suportar um navegador específico que não está incluído na configuração padrão, ou se quiser limitar o suporte a versões mais antigas de um navegador.

Para personalizar a configuração, você pode executar o seguinte comando no seu terminal:

ng generate config browserslist

Esse comando irá gerar um arquivo .browserslistrc no diretório do seu projeto, onde você poderá definir quais navegadores e versões deseja suportar.

Dica: Utilize a ferramenta browsersl.ist para visualizar quais navegadores são compatíveis com uma determinada configuração do Browserslist.

O arquivo .browserslistrc gerado permitirá que você especifique quais navegadores e versões deseja suportar. Veja um exemplo:

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # Angular não suporta IE 9-11.

Reduzindo a Lista de Navegadores: Navegando com Segurança

É importante evitar expandir a lista de navegadores suportados além do necessário. Mesmo que seu código seja compatível com um navegador mais antigo, o próprio Angular pode não ser. Por isso, recomenda-se que você apenas reduza o conjunto de navegadores ou versões suportados, se necessário.

Ao configurar o Browserslist com sabedoria, você garante que sua aplicação Angular alcance o público desejado, proporcionando uma experiência consistente e sem surpresas em diferentes navegadores.

Ferramentas Úteis

browsersl.ist: Uma ferramenta online útil para exibir os navegadores compatíveis com uma consulta Browserslist. Isso ajuda a verificar quais navegadores serão suportados com a configuração atual.

Utilizando Polyfills

Para adicionar polyfills, você pode modificar a seção polyfills no arquivo angular.json. Polyfills são necessários para suportar APIs Web que podem não estar presentes em todos os navegadores que você deseja suportar.

Exemplo de adição de polyfills:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "polyfills": [
              "zone.js", // Angular requer zone.js
              "core-js/es/array", // Polyfill para suporte a métodos de Array
              "classlist.js" // Polyfill para suporte a classList em SVG
            ]
          }
        }
      }
    }
  }
}

Angular CLI, o Arquiteto da Sua Aplicação

O Angular CLI é o arquiteto mestre por trás da construção da sua aplicação Angular. Com ele, você não apenas constrói, mas esculpe cada detalhe do seu projeto, garantindo que ele seja eficiente, leve e compatível com diversos navegadores.

Nesta jornada, exploramos o poder do comando ng build, que transforma seu código-fonte em um pacote otimizado, pronto para ser lançado ao mundo. Desvendamos os segredos dos construtores, os mestres da construção, que moldam cada parte da sua aplicação. Aprendemos a definir orçamentos de tamanho, garantindo que sua aplicação permaneça leve e ágil. E navegamos pelas águas turbulentas das dependências CommonJS, aprendendo a lidar com elas de forma segura e eficiente.

Com o Angular CLI como seu aliado, você está pronto para construir aplicações Angular que brilham em qualquer galáxia. Aventure-se, explore e descubra todo o potencial que essa poderosa ferramenta tem a oferecer.