Como instalar a CLI angular no Ubuntu 20.04

Angular é a estrutura mais popular usada para criar aplicativos móveis e web. Angular é uma estrutura de aplicativos da web de código aberto desenvolvido pelo Google e uma grande comunidade de indivíduos. A partir de hoje, o Angular 10 é a versão mais recente disponível para a instalação. Este tutorial ajudará você a instalar o módulo Angular CLI Node no seu Ubuntu 20.04 Sistema Linux.

Etapa 1 - Instalando o nó.JS

NVM é uma ferramenta de linha de comando para instalar e gerenciar o nó.JS no sistema Linux. Então, primeiro precisamos instalar o NVM em nosso sistema. Faça login no sistema com o usuário para o qual você precisa instalar o nó.JS, então execute o comando abaixo para instalar o nvm:

Curl https: // RAW.GithubUserContent.com/criação/nvm/mestre/instalação.sh | Bash  

Depois disso, você pode instalar qualquer versão do nó no seu sistema. Você também pode instalar várias versões de nós no sistema único. Execute os comandos abaixo para carregar o ambiente e instalar o último nó.versão JS:

fonte ~///.Bashrc Nó de instalação NVM 

O comando acima exibirá a versão do nó e o NPM instalado em seu sistema.

Etapa 2 - Instalando a CLI angular

Depois de instalar o nó.JS e NPM em seu sistema, use os seguintes comandos para instalar a ferramenta CLI angular em seu sistema.

npm install -g @angular/cli 

A versão mais recente da CLI angular será instalada no seu sistema Ubuntu Linux.

NPM Install -g @angular/[email protegido]8 #Angular 8 NPM Install -g @angular/[email protegido]9 #Angular 9 NPM Install -g @angular/[email protegido]10 #Angular 10 

Usando o comando -g acima, instalará a ferramenta CLI angular globalmente. Portanto, será acessível a todos os usuários e aplicativos no sistema. CLI angular fornece um comando ng usado para operações de linha de comando. Vamos verificar a versão instalada do NG no seu sistema.

ng -versão _ _ ____ _ ___ / \ _ __ __ _ _ _ | | __ _ _ __ / ___ | | | _ _ | / △ \ | '_ \ / _' | | | | |/ _ '| '__ | | | | | | | / ___ \ | | | | (_ | | | _ | | | (_ | | | | | ___ | | ___ | | / _ / \ _ \ _ | | _ | \ __, | \ __, _ | _ | \ __, _ | _ | \ ____ | _____ | ___ | ___/ CLI angular: 10.1.1 Nó: 14.10.1 OS: Linux X64 Angular:… Ivy Workspace: Versão do pacote ----------------------------------------- ------------------- @angular-devkit/arquiteto 0.1001.1 @angular-devkit/core 10.1.1 @angular-devkit/esquema 10.1.1 @esquemas/angular 10.1.1 @esquemas/atualização 0.1001.1 rxjs 6.6.2 

A interface da linha de comando angular foi instalada em seu sistema. Para o aplicativo existente, pode iniciar seu trabalho e ignorar o artigo REST.

Siga as próximas etapas para criar um novo aplicativo angular em seu sistema.

Etapa 3 - Criando nova aplicação angular

Você pode usar o comando ng para criar um novo aplicativo angular. Crie um aplicativo chamado Hello-World usando a ferramenta de linha de comando angular. Execute abaixo o comando no terminal:

ng novo Hello-World 

Saída:

? Você gostaria de adicionar roteamento angular? Sim ? Qual formato de folha de estilo você gostaria de usar? CSS Crie Hello-World/ReadMe.MD (1028 bytes) Crie Hello-World/.EditorConfig (274 bytes) Crie Hello-World/.Gitignore (631 bytes) Crie Hello-World/Angular.JSON (3606 bytes) Crie Hello-World/Package.JSON (1254 bytes) Crie Hello-World/Tsconfig.JSON (458 bytes) Crie Hello-World/TSLint.JSON (3185 bytes) Crie Hello-World/.BrowSerlistrc (853 bytes) Crie Hello-World/Karma.conf.JS (1023 bytes) Crie Hello-World/Tsconfig.aplicativo.JSON (287 bytes) Crie Hello-World/Tsconfig.espec.JSON (333 bytes) Crie Hello-World/Src/Favicon.ICO (948 bytes) Crie Hello-World/Src/Index.HTML (296 bytes) Crie Hello-World/Src/Main.TS (372 bytes) Crie Hello-World/Src/Polyfills.TS (2835 bytes) Crie Hello-World/Src/Styles.CSS (80 bytes) Crie Hello-World/SRC/Teste.TS (753 bytes) Crie Hello-World/Src/Assets/.Gitkeep (0 bytes) Crie Hello-World/Src/Ambientes/Ambiente.Prod.TS (51 bytes) Crie Hello-World/Src/Ambientes/Ambiente.TS (662 bytes) Crie Hello-World/Src/App/App-Routing.módulo.TS (245 bytes) Crie Hello-World/Src/App/App.módulo.TS (393 bytes) Crie Hello-World/Src/App/App.componente.CSS (0 bytes) Crie Hello-World/Src/App/App.componente.HTML (25757 bytes) Crie Hello-World/Src/App/App.componente.espec.TS (1072 bytes) Crie Hello-World/Src/App/App.componente.TS (215 bytes) Crie Hello-World/E2E/Transferidor.conf.JS (869 bytes) Crie Hello-World/E2E/TSconfig.JSON (294 bytes) Crie Hello-World/E2E/SRC/App.e2e-spec.TS (644 bytes) Crie Hello-World/E2E/SRC/App.po.TS (301 bytes) ✔ Pacotes instalados com sucesso. Git inicializado com sucesso. 

Isso criará um diretório chamado Hello-World em seu diretório atual e criará todos os arquivos para um aplicativo angular.

Etapa 4 - Sirva a aplicação angular

Sua aplicação angular básica está pronta para servir. Mude para o diretório Hello-World e depois execute seu aplicativo angular usando o comando ng servir.

CD Hello-World ng servir 

Por padrão, aplicação angular executada na porta 4200. Você pode acessar seu sistema na porta 4200 para abrir a aplicação angular, como:

• http: // localhost: 4200

Você pode alterar o host e a porta para executar o aplicativo angular, fornecendo argumentos de linha de comando -Host e -port.

ng servir -hospedeiro 0.0.0.0 -Port 8080 

O endereço IP 0.0.0.0 ouve todas as interfaces e acessível ao público.

Conclusão

Neste tutorial, você aprendeu a instalar o utilitário de linha de comando angular como um pacote de nós. Este tutorial também ajudou você a criar um novo aplicativo angular. Agora, visite aqui para configurar a aplicação angular por trás do servidor Apache.