CLI Angular - Como criar um novo projeto Angular no Linux
Angular é uma estrutura de desenvolvimento de aplicativos front-end de código aberto, popular e altamente extensível, usada para construir aplicativos móveis e web usando TypeScript/JavaScript e outras linguagens comuns.
Angular é um termo abrangente para todas as versões do Angular que vêm depois do AngularJS (ou Angular versão 1.0), incluindo Angular 2 e Angular 4.
Angular é adequado para criar aplicativos de pequeno a grande porte do zero. Um dos principais componentes da plataforma Angular para auxiliar no desenvolvimento de aplicativos é o utilitário Angular CLI – é uma ferramenta de linha de comando simples e fácil de usar usada para criar , gerenciar, criar e testar aplicativos Angular.
Neste artigo, explicaremos como instalar a ferramenta de linha de comando Angular em um sistema Linux e aprenderemos alguns exemplos básicos desta ferramenta.
Instalando Node.js no Linux
Para instalar o Angular CLI, você precisa ter a versão mais recente do Node.js e do NPM instalada em seu sistema Linux.
Instale o Node.js no Ubuntu
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs
Instale o Node.js no Debian
------------- For Node.js v19.x -------------
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs
Instale Node.js no RHEL, CentOS, Fedora, Rocky e Alma Linux
------------- For Node.js v19.x -------------
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v18.x -------------
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v16.x -------------
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs
------------- For Node.js v14.x -------------
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs
Além disso, para compilar e instalar complementos nativos do NPM você pode precisar instalar ferramentas de desenvolvimento em seu sistema como segue.
sudo apt install -y build-essential [On Debian/Ubuntu]
sudo yum install gcc-c++ make [On RHEL Systems]
Instalando Angular CLI no Linux
Depois de instalar o Node.js e o NPM, conforme mostrado acima, você pode instalar o Angular CLI usando o gerenciador de pacotes npm como segue (o sinalizador -g significa instalar a ferramenta em todo o sistema para ser usada por todos os usuários do sistema).
npm install -g @angular/cli
OR
sudo npm install -g @angular/cli
Você pode iniciar o Angular CLI usando o executável ng que agora deve estar instalado em seu sistema. Execute o seguinte comando para verificar a versão do Angular CLI instalada.
ng version
OR
ng --version
Criando um projeto Angular usando Angular CLI
Nesta seção, mostraremos como criar, construir e servir um novo projeto Angular básico. Primeiro, vá para o diretório webroot do seu servidor e, em seguida, inicialize um novo aplicativo Angular da seguinte maneira (lembre-se de seguir as instruções):
cd /var/www/html/
ng new tecmint-app #as root
OR
sudo ng new tecmint-app #non-root user
Em seguida, vá para o diretório do aplicativo que acabou de ser criado e sirva o aplicativo conforme mostrado.
cd tecmint-app
ls #list project files
ng serve
Antes de poder acessar seu novo aplicativo a partir de um navegador da Web, se você tiver um serviço de firewall em execução, será necessário abrir a porta 4200 na configuração do firewall, conforme mostrado.
---------- On Firewalld ----------
firewall-cmd --permanent --zone=public --add-port=4200/tcp
firewall-cmd --reload
---------- On UFW ----------
sudo ufw allow 4200/tcp
sudo ufw reload
Agora você pode abrir um navegador da web e navegar usando o seguinte endereço para ver o novo aplicativo sendo executado conforme mostrado na captura de tela a seguir.
http://localhost:4200/
or
http://SERVER_IP:4200
Nota: Se você usar o comando ng serve para construir um aplicativo e servi-lo localmente, como mostrado acima, o servidor reconstrói automaticamente o aplicativo e recarrega as páginas da web quando você altera qualquer um dos arquivos de origem.
Para obter mais informações sobre a ferramenta ng, execute o seguinte comando.
ng help
Página inicial da CLI Angular: https://angular.io/cli
Neste artigo, mostramos como instalar o Angular CLI em diferentes distribuições Linux. Também abordamos como construir, compilar e servir um aplicativo Angular básico em um servidor de desenvolvimento. Para qualquer dúvida ou opinião que você queira compartilhar conosco, use o formulário de feedback abaixo.