Um guia rápido para configurar o ambiente local do Angular 9 (2023)

Este artigo é um guia para construir uma atmosfera sólida para facilitar o melhorAngularaprendizagem e experiência de trabalho. Vamos garantir que tenhamos a melhor experiência de desenvolvimento possível e não tenhamos problemas comuns com o ambiente de desenvolvimento. Enfrentar problemas com o ambiente de desenvolvimento é um dos maiores obstáculos para alguém novo no ecossistema Angular, talvez até mais do que os próprios conceitos reativos.

Portanto, é crucial configurar o ambiente corretamente desde o início. O ambiente de desenvolvimento deve ser facilmente atualizável e criar problemas mínimos ao longo do tempo devido a itens como versão semântica.

Neste guia, discuto como configurar seu ambiente de desenvolvimento Angular usando o método Angular CLI. Falarei sobre os pré-requisitos, como instalar uma CLI, como criar um espaço de trabalho inicial e um aplicativo inicial e como executar o aplicativo localmente para testar sua configuração.

saiba mais sobre cli angular.

Pré-requisitos

Você deve estar familiarizado com o seguinte para usar a estrutura Angular:

HTML, CSS,JavaScript, Datilografado

O conhecimento do TypeScript é útil, mas não essencial.

DesenvolvimentoAmbiente

• Nó
• NPM
• Editor-Visual Studio Code
• Angular CLI

ContextovocêpaAmbiente de Desenvolvimento de Nó

Nesse caso,Node.jsé usado para criar o back-end do seu aplicativo e pode ser substituído por qualquer tecnologia do lado do servidor que você desejar, como PHP, Ruby ou Python. No entanto, o Angular não depende do Node.js, exceto para sua ferramenta CLI e para download de pacotes NPM.

Para configurar a melhor experiência de desenvolvimento possível e se você ainda não tiver o node instalado: visite onodejs.orgwebsite e instale a versão mais recente do node.

Certifique-se de usar a versão de suporte de longo prazo (LTS) em vez da versão mais recente. Abra um navegador, digite https:/nodejs.org/en/download/ e clique no botão Windows Installer. Você verá o LTS exibido junto com a versão atual do nó. Vá em frente e baixe a versão recomendada ou atual do node.

Usaremos o node para fins de ferramentas de front-end e para executar nosso servidor de desenvolvimento. Para esse propósito específico, você provavelmente teria menos problemas se empregasse a versão mais recente. No entanto, se você já tiver o node instalado (qualquer versão), há uma maneira muito melhor de atualizar sua versão do node do que executar um instalador. Em vez de substituir sua versão atual do node pela versão mais recente, vamos usar uma linha de comando simples ferramenta que permite facilmente trocar de versão de nó.

Existem várias vantagens em usar a ferramenta de linha de comando:

• É muito útil poder alterar rapidamente as versões de nós se, por exemplo, houver vários projetos a serem mantidos na mesma máquina e cada projeto precisar de diferentes versões de nós.
• Com esta ferramenta, será muito mais fácil atualizar para versões mais recentes do nó no futuro – não precisaremos executar o instalador novamente em sua máquina.

Portanto, certifique-se de ter pelo menos alguma versão do nó instalada em sua máquina antes de começar. Paraverifique sua versão, executenó -vem uma janela de terminal/console.

Gerenciador de pacotes NPM

NPM é o gerenciador de pacotes de nós. Esta é uma lista para hospedar pacotes de nós. Também tem sido usado nos últimos anos para publicar pacotes front-end e bibliotecas como Angular, React, Vue.js e até Bootstrap.

Angular, Angular CLI e aplicativos Angular dependem de recursos e funcionalidades fornecidas por bibliotecas que estão disponíveis como pacotes npm. Para baixar e instalar pacotes npm, você precisa ter um gerenciador de pacotes npm. A interface de linha de comando do cliente npm é usada para acessar o gerenciador de pacotes NPM que é instalado com o nó js.

Para verificar se você simplesmente tem o cliente npm instalado, execute npm -v durante uma janela de terminal/console.

npm -vv5.6.0

Instalar Angular CLI

Angular CLI é o recurso oficial para iniciar e operar com projetos Angular. Ele evita a confusão de configurações complicadas e cria recursos como TypeScript, Webpack e assim por diante. Como a maioria das ferramentas de front-end modernas atualmente, o Angular CLI também é construído no topo do Node.js. Node.js é uma tecnologia de servidor que permite executar JavaScript em seu servidor e criar aplicativos da Web do lado do servidor. No entanto, Angular é o código front-end, portanto, mesmo que você precise instalar o Node.js em seu computador de desenvolvimento, seria apenas para executar a CLI.

Ao criar seu software de produção, você não precisará do Node.js porque os pacotes finais são HTML estático, CSS e JavaScript podem ser suportados por qualquer servidor ou CDN. Se você estiver criando um aplicativo da Web de pilha completa com Angular, talvez precise do Node.js para criar o back-end se quiser usar JavaScript para o front-end e o back-end.

Implante a CLI angular

Abra o terminal e digite o comando abaixo com a ajuda do NPM para instalar o CLI angular:

npminstale -g @angular/cli

Alguns comandos úteis usando CLI angular

Você pode executar muitos comandos depois de baixar o Angular CLI, como:

1. Para verificar a versão da CLI: $ ng version
2. Para adicionar suporte ao seu projeto para uma biblioteca externa: $ng add
3. Para compilar o aplicativo Angular no diretório de saída chamado dist.or no caminho de saída definido; deve ser executado de dentro de um diretório do espaço de trabalho: $ng construct
4. Para recuperar ou definir valores de configuração Angular: $ng configure
5. Para abrir a documentação oficial do Angular (angular.io) no navegador e procurar por uma palavra-chave: $ng doc
6. Para gerar e/ou alterar arquivos baseados em esquemas: $ng generate
7. Para listar os comandos disponíveis e suas breves descrições: $ng help
8. Para executar ferramentas de revestimento no código do dispositivo Angular na pasta do projeto: $ng lint
9. Para criar um novo espaço de trabalho e um aplicativo Angular inicial: $ng new
10. Para executar um conjunto de destino personalizado para seu projeto: $ng run
11. Para desenvolver e dar suporte à sua solicitação, restaure as alterações no arquivo: $ng serve

Depois de instalar o Angular CLI, você precisará executar um comando para criar um projeto e outro para suportá-lo usando um servidor de desenvolvimento local para brincar com seu programa.

Criação do espaço de trabalho e inicialização do aplicativo angularn:

Você pode usar o Angular CLI para criar seu primeiro projeto Angular executando o comando abaixo em sua interface de linha de comando:

Passo 1:Navegarpara o diretório do projeto

$ cd ~/Dev/ (Vá para o diretório local Dev)$mkdirmyProject(Crie o diretório myProject na pasta dev)$cd myProject(navegando para a pasta myProject)

Passo 2:Criandoum Angular app

$ do novo helloworld

O comando ng new solicitará que você inclua um recurso padrão na solicitação inicial. Use a tecla Enter ou Return para reconhecer os padrões.

Nota: 'Helloworld' é o nome deste projeto. Claro, você pode selecionar qualquer nome apropriado para o seu projeto. Como esta é nossa configuração inicial, vou usar 'hello world' como um nome para o aplicativo front-end.

etapa 3:Navegue até o projetoeexecutar servidor local

$ cd /path/to/your/newly/created/app/Like$ cd ~/Dev/myProject/helloworld/$ ng serve –open

Isso iniciará http:/localhost:4200/

* Observação: o comando ng serve inicia um servidor, procura alterações em seus arquivos e reconstrói o software quando você salva as alterações *

Etapa4:Editar projeto

Abra o arquivo em dev/myproject/helloworld/src/app/app.component.ts:

Edite o arquivo e faça algunsmudançase salve-o. Mudançasvai serdestacado:

Na raiz do aplicativo (a raiz do aplicativo está em /myproject/helloworld/ para nosso aplicativo), execute:

ng serve –abra ou apenas navegue até http:/localhost:4200/ . A IU da Web refletirá as alterações.

Com o ng serve ainda em execução, faça e salve uma nova alteração emapp.component.ts:

Você ficará surpreso ao ver as alterações refletidas automaticamenteemhttp:/localhost:4200/

Passo 5:Criar aplicativo epegarpronto para implantação

de construir

Este comando cria uma nova pasta na raiz do seu aplicativo chamada "/dist/", que é todo o seu pacote, compilado e pronto para envio.

Belas Bandeiras opcionais:

• Prodisso cria uma versão do seu aplicativo pronta para produção
• output-path /para/seu/caminho/isso altera o caminho padrão para criar seus arquivos Angular
• hashing de saída nenhumremova hash adicional no nome do arquivo

Conclusão

Neste guia, seguimos as etapas para configurar um ambiente local sólido para facilitar o melhor aprendizado e experiência de trabalho do Angular. Seguindo essas etapas, você garantirá que o ambiente de desenvolvimento seja facilmente atualizável, minimizando a possibilidade de quaisquer problemas que surjam ao longo do tempo devido a itens como versão semântica.

Discutimos como configurar seu ambiente de desenvolvimento Angular usando o método Angular CLI, os pré-requisitos necessários e explicamos como instalar uma CLI, como criar um espaço de trabalho inicial e um aplicativo inicial e como executar o aplicativo localmente para testar sua configuração .

Espero que este tenha sido um guia útil e desejo a você o melhor aprendizado e experiência de trabalho do Angular!