Configuração do Workspace em Projetos Angular

Desvendando o Coração da Configuração do Angular: O Caminho para a Maestria no angular.json

No reino do Angular, o arquivo angular.json reina supremo, um pergaminho enigmático que guarda os segredos da configuração do seu reino de código. Dominar este pergaminho é essencial para qualquer aspirante a mestre Angular, pois ele molda o destino dos seus projetos, desde a fundação até a construção de imponentes catedrais de código.

Neste guia, desvendaremos os mistérios do angular.json, revelando os segredos por trás de sua estrutura, as opções de configuração que moldam o Angular CLI e os projetos que ele comanda, a arte da configuração de esquemas e builders, e como manipular configurações complexas com a maestria de um alquimista. Ao final desta jornada, você terá o conhecimento necessário para dominar o angular.json e moldar o seu reino Angular de acordo com sua visão.

Anatomia do Pergaminho: Estrutura Geral do angular.json

No topo do pergaminho angular.json, encontramos propriedades que ditam o destino de todo o reino de código, e uma seção especial, chamada projects, que abriga os segredos individuais de cada projeto. As opções de configuração definidas no nível do reino podem ser sobrepostas pelas opções definidas para cada projeto, e o poder final reside nas suas mãos, pois você pode usar a linha de comando para moldar o destino final do seu reino.

As seguintes propriedades, no topo do pergaminho, definem o destino do reino como um todo:

A aplicação inicial que você cria com ng new app-name é listada em “projects”:

Quando você cria um projeto de biblioteca com ng generate library, o projeto da biblioteca também é adicionado à seção projects.

A Forja do Mago: Opções de Configuração do Angular CLI

No coração do angular.json, a seção cli abriga as opções que personalizam o Angular CLI, o mago que invoca seus projetos à existência. Nesta forja, você controla os feitiços de construção, teste e execução, moldando o ciclo de vida dos seus projetos.

Você pode substituir os padrões do Angular CLI definidos no nível do workspace através de padrões definidos no nível do projeto. Também é possível substituir os padrões definidos no nível do projeto usando a linha de comando.

As seguintes propriedades, no nível superior do arquivo, configuram o workspace:

Aprofundando na Forja: Opções de Cache e Avisos do Angular CLI

Na forja do mago Angular CLI, as opções de cache e avisos oferecem controle refinado sobre o comportamento do CLI, permitindo que você otimize o desempenho e a experiência de desenvolvimento.

Propriedades de Cache

Opções de Avisos

Esta propriedade controla se um aviso deve ser exibido quando a versão global do Angular CLI é mais recente que a versão instalada localmente no projeto. Manter a versão local atualizada é importante para garantir compatibilidade e acesso aos recursos mais recentes.

Moldando os Projetos: Opções de Configuração Individual

No angular.json, cada projeto, seja ele uma aplicação ou biblioteca, possui seu próprio conjunto de segredos que moldam seu destino. Na seção projects['project-name'], as seguintes propriedades ditam o caminho de cada criatura do Angular:

A Arte da Criação: Esquemas no angular.json

No coração do angular.json, os esquemas (schematics) são como pergaminhos mágicos que guiam a criação e modificação de projetos Angular. Eles definem as instruções para adicionar novos arquivos, modificar os existentes e moldar a estrutura do seu reino de código.

Cada esquema possui um nome no formato <schematic-package>:<schematic-name>. Os esquemas padrão do Angular CLI, como @schematics/angular:component (para gerar um componente) e @schematics/angular:module (para gerar um módulo), estão disponíveis no pacote @schematics/angular.

Personalizando Esquemas

Você pode personalizar os esquemas no angular.json para ajustar o comportamento dos comandos ng generate. Por exemplo, para desativar a criação de componentes standalone por padrão, adicione a seguinte configuração no seu angular.json:

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "standalone": false
        }
      }
    }
  }
}

Os campos dados no esquema do schematic correspondem aos valores permitidos dos argumentos da linha de comando e padrões para as opções dos subcomandos do Angular CLI.
Você pode atualizar o arquivo de esquema do workspace para definir um padrão diferente para uma opção de subcomando.

Configurando Schematics

Você pode configurar os schematics no arquivo angular.json para personalizar como os comandos de geração de código funcionam. Isso permite que você defina padrões específicos que se aplicam sempre que você usa um comando ng generate.

Exemplo de Configuração de Schematics

Suponha que você queira configurar o schematic para componentes para que eles usem a extensão scss para arquivos de estilo em vez de css. Você também quer que os componentes gerados sejam colocados em uma pasta específica.

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "path": "src/app/components"
        }
      }
    }
  }
}

Neste exemplo, sempre que você gerar um novo componente usando ng generate component, ele usará scss para os arquivos de estilo e será colocado na pasta src/app/components.

Outros Exemplos de Configuração

Configuração de Diretivas

Para configurar diretivas para usar um prefixo específico e um caminho padrão:

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:directive": {
          "prefix": "myPrefix",
          "path": "src/app/directives"
        }
      }
    }
  }
}

Configuração de Serviços

Para configurar serviços para serem gerados em uma pasta específica e com a opção de ser um singleton:

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:service": {
          "path": "src/app/services",
          "flat": true
        }
      }
    }
  }
}

Explorando as Possibilidades

Os esquemas oferecem um vasto leque de possibilidades para personalizar o seu fluxo de trabalho. Você pode definir opções padrão para nomes de arquivos, estilos, templates e outras configurações, moldando a criação de novas entidades no seu reino Angular.

A Oficina do Arquiteto: Configurando Builders no Angular CLI

No coração do angular.json, o Architect é o mestre construtor que comanda a execução de tarefas complexas, como compilação, testes e deployments. Ele utiliza builders, ferramentas especializadas, para realizar cada tarefa de acordo com as configurações definidas.

O Architect é uma espécie de shell que executa um builder especificado para realizar uma tarefa determinada, de acordo com uma configuração de target. Você pode definir e configurar novos builders e targets para estender o Angular CLI.

Builders e Targets Padrão

O Angular CLI já possui um conjunto de builders e targets padrão, prontos para serem utilizados em seus projetos. Cada builder possui um esquema JSON que define suas opções e configurações, permitindo que você personalize o comportamento de cada tarefa.

Os esquemas JSON que definem as opções e os padrões para cada um desses builders são coletados no pacote @angular-devkit/build-angular.

Os esquemas configuram opções para os seguintes builders:

Cada um desses builders possui opções configuráveis que permitem adaptar seu comportamento às necessidades do seu projeto.

Configurando Targets de Builders

Você pode especificar diferentes opções de configuração para cada target de builder, permitindo uma flexibilidade significativa no processo de construção do seu projeto. Por exemplo, você pode ter um target de build para desenvolvimento e outro para produção, cada um com suas próprias configurações específicas.

Dominando a Arquitetura: Configurando Targets no Angular CLI

No pergaminho do angular.json, a seção architect é o reino dos targets, os planos de construção que ditam como o Architect executará as tarefas no seu projeto. Cada target é um conjunto de instruções que define qual builder será usado e quais opções serão aplicadas para realizar uma determinada tarefa.

A Estrutura dos Targets

Cada target possui as seguintes propriedades:

• builder: O nome do builder que será invocado pelo Architect para executar a tarefa.
• options: As opções de configuração padrão para o target, que podem ser sobrescritas na linha de comando.
• configurations: Configurações alternativas para o target, que podem ser selecionadas na linha de comando.

Targets Padrão

O Angular CLI oferece um conjunto de targets padrão para as principais tarefas do desenvolvimento:

Importante

Todas as opções no angular.json devem ser escritas em camelCase (ex: outputPath), não em kebab-case (ex: output-path).

A Arte da Construção: O Target build no Angular CLI

No pergaminho do angular.json, o target build é o plano mestre para construir sua aplicação Angular, transformando seu código em um artefato pronto para ser implantado no mundo real.

A Estrutura do Target build

O target build possui as seguintes propriedades:

Personalizando o Target build

Você pode personalizar o target build para atender às suas necessidades específicas. Por exemplo, para desativar as otimizações durante o build, adicione a seguinte configuração no seu angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "optimization": false
          }
        }
      }
    }
  }
}

Com esta configuração, o comando ng build gerará um build não otimizado da sua aplicação.

O target build oferece uma infinidade de opções para personalizar o processo de construção da sua aplicação. Você pode ajustar as configurações de saída, definir variáveis de ambiente, configurar o processo de empacotamento e muito mais.

A Magia da Versatilidade: Configurações Alternativas de Build

O Angular CLI, em sua sabedoria, oferece duas configurações de build: production e development. Por padrão, o feitiço ng build invoca a configuração production, que aplica otimizações para tornar sua aplicação mais leve e rápida, como:

• Agrupar arquivos em bundles.
• Remover espaços em branco, comentários e código morto.
• Minificar o código, tornando-o mais compacto.

Mas a magia não para por aí! Você pode criar configurações alternativas, como staging ou test, para personalizar o build de acordo com suas necessidades. Para invocar uma configuração alternativa, use a bandeira --configuration na linha de comando:

ng build --configuration staging

Exemplo: Otimização Somente em Produção

Para habilitar otimizações apenas em builds de produção, adicione a seguinte configuração ao seu angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "optimization": false
          },
          "configurations": {
            "production": {
              "optimization": true
            }
          }
        }
      }
    }
  }
}

Com esta configuração, o comando ng build gerará um build não otimizado, enquanto ng build --configuration production aplicará as otimizações.

Combinando Configurações

Você pode combinar múltiplas configurações usando uma lista separada por vírgulas. Por exemplo, para aplicar as configurações staging e french, use o comando:

ng build --configuration staging,french

O CLI processará as configurações da esquerda para a direita, e o último valor definido para cada opção prevalecerá.

Se várias configurações alterarem a mesma configuração, o último valor definido será o final. Neste exemplo, se ambas as configurações staging e french definirem o caminho de saída, o valor em french será utilizado.

O Poder da Personalização

As configurações alternativas de build oferecem um poder imenso para personalizar o processo de construção da sua aplicação. Você pode ajustar as opções de otimização, definir variáveis de ambiente específicas para cada configuração e muito mais.

Aperfeiçoando a Arte: Opções Extras de Build e Teste

A maestria na construção de aplicações Angular vai além dos targets padrão. O Angular CLI oferece um arsenal de opções extras para personalizar seus builds e testes, permitindo que você ajuste cada detalhe do processo.

Opções de Build

Exemplo Prático: Trocando de Ambiente com fileReplacements

Para mostrar na prática como o Angular CLI pode turbinar seu fluxo de trabalho, vamos dar uma olhada em um exemplo prático usando a opção fileReplacements. Imagine que você tem diferentes arquivos de configuração para cada ambiente da sua aplicação (desenvolvimento, produção, etc.). Com fileReplacements, você pode facilmente trocar esses arquivos durante o build, sem precisar fazer alterações manuais.

Configurando o angular.json

No seu arquivo angular.json, dentro do target build, adicione a seguinte configuração:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ... outras opções
            "fileReplacements": [
              {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }
            ]
          }
        }
      }
    }
  }
}

Nesta configuração, estamos dizendo ao Angular CLI para substituir o arquivo environment.ts pelo arquivo environment.prod.ts durante o build. Isso significa que, ao executar o comando ng build, a aplicação será construída com as configurações de produção.

Diferentes Ambientes, Diferentes Configurações

Você pode criar arquivos de ambiente para cada configuração que desejar, como environment.dev.ts para desenvolvimento, environment.staging.ts para staging e assim por diante. Para usar uma configuração específica, basta passar o nome da configuração como argumento para o comando ng build:

ng build --configuration=production  // Usará environment.prod.ts
ng build --configuration=staging    // Usará environment.staging.ts

A Magia da Automação

Com fileReplacements, você automatiza a troca de arquivos de configuração, eliminando a necessidade de fazer alterações manuais e reduzindo o risco de erros. Isso torna o processo de build mais eficiente e confiável, permitindo que você se concentre no que realmente importa: desenvolver sua aplicação Angular.

Desvendando a Complexidade: Valores Avançados de Configuração

A maestria na configuração do Angular exige o domínio de valores complexos, que oferecem um controle granular sobre o processo de build.
Nesta seção, exploraremos as nuances de assets, estilos, scripts, source maps, otimizações e outras configurações avançadas.

Assets: Os Tesouros do Seu Projeto

No coração do angular.json, a propriedade assets é o cofre onde você guarda seus tesouros: imagens, fontes, vídeos, ícones e outros arquivos que enriquecem sua aplicação Angular. Vamos explorar em detalhes como configurar este cofre para garantir que seus tesouros sejam copiados corretamente para a pasta de saída da sua aplicação.

A Estrutura dos Assets

Por padrão, o Angular CLI copia a pasta src/assets e o arquivo src/favicon.ico para a pasta de saída.

Mas você pode personalizar essa configuração usando um array de objetos, onde cada objeto representa um asset individual.

Um objeto de especificação de asset pode ter os seguintes campos:

Exemplo Prático: Configurando Assets

Vamos ver um exemplo prático de como configurar os assets no seu angular.json:

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  },
  {
    "glob": "*.svg",
    "input": "src/assets/icons/",
    "output": "/assets/icons/",
    "ignore": ["*.bak"] // Exclui arquivos de backup
  }
]

Nesta configuração, estamos:

1. Copiando todos os arquivos da pasta src/assets para a pasta assets no diretório de saída.
2. Copiando o arquivo favicon.ico para a raiz do diretório de saída.
3. Copiando todos os arquivos SVG da pasta src/assets/icons para a pasta assets/icons no diretório de saída, exceto arquivos de backup (.bak).

Com esta configuração, seus assets estarão organizados e prontos para serem utilizados pela sua aplicação Angular.

A Beleza e o Cérebro da Aplicação: Configurando Estilos e Scripts no Angular

Em cada projeto Angular, os estilos e scripts são a alma e o corpo da sua aplicação, definindo a aparência e o comportamento. No angular.json, as propriedades styles e scripts permitem que você orquestre essa sinfonia de forma elegante e eficiente.

Estilos e Scripts: Uma Dança de Objetos e Caminhos

As propriedades styles e scripts podem receber tanto um simples caminho para o arquivo (como src/styles.css) quanto um objeto com configurações mais detalhadas:

Exemplo

"styles": [
  {
    "input": "src/styles.scss",
    "inject": true
  },
  {
    "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "inject": false,
    "bundleName": "bootstrap-styles"
  }
],
"scripts": [
  {
    "input": "src/main.ts"
  },
  {
    "input": "node_modules/jquery/dist/jquery.min.js",
    "inject": false,
    "bundleName": "external-scripts"
  }
]

Neste exemplo, estamos:

1. Incluindo o arquivo styles.scss na pasta src e injetando-o no HTML.
2. Incluindo o Bootstrap, mas não injetando-o automaticamente. Em vez disso, criamos um bundle chamado bootstrap-styles para que você possa incluí-lo manualmente no HTML quando necessário.
3. Incluindo o arquivo main.ts na pasta src.
4. Incluindo o jQuery, mas não injetando-o automaticamente. Em vez disso, criamos um bundle chamado external-scripts.

stylePreprocessorOptions: Dominando os Pré-processadores

Se você utiliza um pré-processador CSS como Sass, Less ou Stylus, a propriedade stylePreprocessorOptions permite que você configure opções específicas para cada um deles.

Exemplo: Sass

"stylePreprocessorOptions": {
  "includePaths": ["src/styles"] 
}

Neste exemplo, estamos adicionando a pasta src/styles aos caminhos de inclusão do Sass. Isso permite que você importe arquivos Sass de qualquer lugar do seu projeto sem precisar usar caminhos relativos longos.

Dica: Se você precisar dos estilos ou scripts para seus testes unitários, adicione-os também ao builder test.

Com estas configurações, você pode organizar e otimizar seus estilos e scripts, garantindo que sua aplicação Angular tenha a aparência e o comportamento desejados.

A Arte da Otimização: Refinando a Performance no Angular

Em cada projeto Angular, a otimização é a chave para a performance, a rapidez e a eficiência que encantam seus usuários. No angular.json, a propriedade optimization é o seu laboratório de alquimia, onde você pode transformar seu código em um elixir de alta performance.

Otimização: Mais que um Simples Booleano

A propriedade optimization pode ser um simples booleano (true ou false), mas sua verdadeira magia se revela quando você a usa como um objeto, abrindo um mundo de possibilidades para personalizar a otimização do seu projeto.

Opções de Otimização

Várias opções podem ser usadas para ajustar a otimização de uma aplicação.

Opções de Otimização de Estilos

Opções de Otimização de Fontes

Exemplo Prático: Otimizando Estilos e Scripts

Vamos ver um exemplo prático de como configurar a otimização no seu angular.json:

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": true
}

Nesta configuração, estamos:

1. Habilitando a otimização de scripts.
2. Habilitando a otimização de estilos, incluindo minificação e inserção de estilos críticos.
3. Habilitando a otimização de fontes.

Desvendando os Mapas da Criação: Source Maps no Angular

Em cada projeto Angular, os source maps são como mapas de tesouro que guiam você de volta ao código original, mesmo após a otimização e a minificação.
No angular.json, a propriedade sourceMap é a bússola que controla a geração desses mapas, revelando a origem de cada linha de código no seu projeto.

Source Maps: Mais que um Simples Booleano

A propriedade sourceMap pode ser um simples booleano (true ou false), mas sua verdadeira magia se revela quando você a usa como um objeto, abrindo um leque de opções para personalizar a geração de source maps.

Opções de Source Maps

Desvendando os Mapas da Criação: Source Maps no Angular

Em cada projeto Angular, os source maps são como mapas de tesouro que guiam você de volta ao código original, mesmo após a otimização e a minificação. No angular.json, a propriedade sourceMap é a bússola que controla a geração desses mapas, revelando a origem de cada linha de código no seu projeto.

Source Maps: Mais que um Simples Booleano

A propriedade sourceMap pode ser um simples booleano (true ou false), mas sua verdadeira magia se revela quando você a usa como um objeto, abrindo um leque de opções para personalizar a geração de source maps.

Opções de Source Maps

Exportar para as Planilhas

Exemplo Prático: Configurando Source Maps

Vamos ver um exemplo prático de como configurar os source maps no seu angular.json:

"sourceMap": {
  "scripts": true, // Gera source maps para scripts
  "styles": false, // Não gera source maps para estilos
  "hidden": true,  // Oculta source maps nos arquivos JavaScript
  "vendor": true   // Gera source maps para bibliotecas de terceiros
}

Source Maps Ocultos: O Segredo da Segurança

Os source maps ocultos são uma ferramenta poderosa para proteger seu código fonte em produção. Ao omitir a referência aos source maps nos arquivos JavaScript, você impede que eles sejam acessados pelas ferramentas de desenvolvimento do navegador, tornando seu código mais difícil de ser decifrado por olhos curiosos.

Importante: Mesmo com source maps ocultos, é crucial garantir que os arquivos de source map não sejam servidos em produção, pois eles ainda contêm informações sobre o seu código original.

Com os source maps, você tem a chave para desvendar os mistérios do seu código Angular, mesmo após a otimização e a minificação. Use-os com sabedoria para facilitar a depuração e proteger seu código fonte.

A Porta de Entrada: Configurando o Index no Angular

O arquivo index.html é a porta de entrada para sua aplicação Angular, o primeiro contato do usuário com seu mundo de código. No angular.json, a propriedade index permite que você personalize esse ponto de entrada, definindo qual arquivo será usado e onde ele será gerado.

Opções do Index

A propriedade index pode ser uma string simples, indicando o caminho do arquivo index.html, ou um objeto com as seguintes opções:

Opções de Index

A Porta de Entrada: Configurando o Index no Angular

O arquivo index.html é a porta de entrada para sua aplicação Angular, o primeiro contato do usuário com seu mundo de código. No angular.json, a propriedade index permite que você personalize esse ponto de entrada, definindo qual arquivo será usado e onde ele será gerado.

Opções do Index

A propriedade index pode ser uma string simples, indicando o caminho do arquivo index.html, ou um objeto com as seguintes opções:

Exportar para as Planilhas

Exemplo Prático: Personalizando o Index

Vamos ver um exemplo prático de como personalizar o arquivo index.html no seu angular.json:

"index": {
  "input": "src/index.template.html",
  "output": "meu-index.html"
}

Nesta configuração, estamos:

1. Usando o arquivo src/index.template.html como base para gerar o arquivo index.html.
2. Gerando o arquivo index.html com o nome meu-index.html no diretório de saída da aplicação.

Index e Ambientes

Você pode usar diferentes arquivos index.html para cada ambiente da sua aplicação, como index.prod.html para produção e index.dev.html para desenvolvimento. Para isso, basta criar os arquivos correspondentes e configurar o angular.json para usar o arquivo correto em cada ambiente.

"configurations": {
  "production": {
    "index": {
      "input": "src/index.prod.html"
    }
  },
  "development": {
    "index": {
      "input": "src/index.dev.html"
    }
  }
}

Com esta configuração, o comando ng build --configuration=production usará o arquivo index.prod.html, enquanto ng build --configuration=development usará o arquivo index.dev.html.

A Porta de Entrada para a Sua Aplicação

O arquivo index.html é a primeira impressão que o usuário terá da sua aplicação Angular. Personalize-o com cuidado, utilizando as opções do angular.json para garantir que ele seja gerado corretamente e que atenda às necessidades do seu projeto.

O Destino Final: Configurando o Caminho de Saída no Angular

No pergaminho do angular.json, a propriedade outputPath é o mapa que guia o Angular CLI para o destino final dos seus artefatos de build. Com ele, você controla onde os arquivos gerados serão armazenados, organizando seu reino de código com maestria.

Opções do Caminho de Saída

A propriedade outputPath pode ser uma string simples, indicando o caminho base de saída, ou um objeto com as seguintes opções:

Várias opções podem ser usadas para ajustar a estrutura de saída de uma aplicação.

Exemplo Prático: Personalizando o Caminho de Saída

Vamos ver um exemplo prático de como personalizar o caminho de saída no seu angular.json:

"outputPath": {
  "base": "dist",
  "browser": "my-app/browser",
  "server": "my-app/server"
}

Nesta configuração, estamos:

1. Definindo o caminho base de saída como dist.
2. Gerando o build do navegador na pasta dist/my-app/browser.
3. Gerando o build do servidor na pasta dist/my-app/server.

Caminhos de Saída e Ambientes

Você pode definir diferentes caminhos de saída para cada ambiente da sua aplicação, como dist/prod para produção e dist/dev para desenvolvimento. Para isso, basta adicionar as configurações correspondentes à seção configurations do seu target de build.

"configurations": {
  "production": {
    "outputPath": {
      "base": "dist/prod"
    }
  },
  "development": {
    "outputPath": {
      "base": "dist/dev"
    }
  }
}

O Destino Final do Seu Código

A propriedade outputPath é o último passo na jornada de configuração do seu projeto Angular. Com ela, você define o destino final dos seus artefatos de build, garantindo que eles sejam organizados e estejam prontos para serem implantados no mundo.

Dominando o angular.json: O Mapa da Maestria Angular

O arquivo angular.json é o coração pulsante do seu projeto Angular, um pergaminho enigmático que guarda os segredos da configuração e do controle.
Desvendamos cada página deste grimório, revelando as opções que moldam o Angular CLI, os projetos individuais, os esquemas que guiam a criação, os builders que constroem, os targets que definem as tarefas e as nuances da otimização.

O Poder do angular.json em Suas Mãos

Com o conhecimento adquirido nesta jornada, você está pronto para:

• Personalizar o Angular CLI: Ajustar o comportamento do mago que invoca seus projetos, controlando o cache, os avisos e o gerenciador de pacotes.
• Moldar seus projetos: Configurar cada projeto individualmente, definindo seu tipo, raiz, prefixo e esquemas.
• Orquestrar a construção: Dominar o Architect e seus builders, personalizando os targets para otimizar o processo de build.
• Otimizar a performance: Aplicar técnicas de otimização para tornar sua aplicação mais leve, rápida e eficiente.
• Controlar o destino dos seus artefatos: Definir o caminho de saída dos arquivos gerados, garantindo uma estrutura organizada e eficiente.

A Jornada Continua

O angular.json é apenas o começo da sua jornada rumo à maestria no Angular.
Continue explorando as profundezas deste framework, desvendando seus segredos e dominando suas ferramentas. Com dedicação e perseverança, você se tornará um mestre Angular, capaz de construir aplicações web poderosas e eficientes que encantam seus usuários.

Compartilhe a Sabedoria Angular com o Mundo!

Domine o angular.json e desvende os segredos da configuração do Angular. Compartilhe este guia com seus colegas no LinkedIn e ajude-os a alcançar a maestria no desenvolvimento web.

Compartilhe agora e inspire a comunidade Angular!

Deixe seu Legado nos Comentários!

Compartilhe suas experiências, dúvidas e descobertas nos comentários abaixo. Vamos construir juntos um conhecimento mais profundo sobre o Angular e suas ferramentas.