Curso Angular 13: Instalando o Angular - primeiro projeto

⭐ Nossos cursos: www.horadecoda...
🔴 Instagram: @horadecodar
📂 Repositório: github.com/mat...
Nesta aula vamos ter o nosso Hello World de #Angular 13
Instalaremos e criaremos nosso primeiro projeto, além de iniciar a aplicação e realizar uma alteração para ver a reflexão dela no navegador
Este passo é super importante pois geralmente utilizamos projetos prontos e iniciamos poucos projetos (infelizmente? xD), então fica um pouco 'enferrujada' na nossa mente a etapa de setup 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord

[@MatheusBattisti]

⭐ Conheça a nossa plataforma de cursos: www.horadecodar.com.br/comunidade-hora-de-codar/

[@docto0or]

Olá, segui o passo a passo porém notei que no meu projeto o arquivo karma.conf.js não foi gerado, cometi algum erro?

[@gabrielalemes594]

Para quem está tendo o problema no ng serve: O arquivo não pode ser carregado porque a execução de scripts foi desabilitada neste sistema. A solução é digitar no comando: Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Obrigado!

[@dropedala]

Vim procurando prata e achei ouro.

[@darllanlopes6343]

Cara, você é um amigo! me salvou

[@VinicioMarco]

Não tinha visto esse comentário, mas a busca foi muito tranquila para resolver isso mas agradecido por ajudar a galera!!!

[@dunada_hay5922]

tu é foda meu amigo

[@JamesOTK]

sempre mostra até abringo a parta pq tem iniciantes vendo tbm e gosta de ver cada detalhe

[@pliniomourao]

O meu "ng new " me faz um bocado de perguntas. Rounting... e outros... porque o seu vai direto? Pergunta tambem sobre qual Stylesheet eu gostaria de usar... é o tipo de coisa que acho importante num video desse, você mencionar esse detalhe do "ng new".

[@ojefersonlucas]

Provavelmente você instalou o angular/cli em uma versão nova. A que eu instalei vinha com o Angular 14

[@josedamaso6717]

Sempre com uma excelente didática 👍. Parabéns!

[@MatheusBattisti]

valeu José!

[@lucaspirula2324]

Show! Já comprei quase todos seus cursos na udemy, valeu professsor!

[@OttoAugusto-n6o]

Aula muito boa. Finalmente destravei, mas precisei da ajuda de IA porque podem surgir alguns erros no processo de instalação.

[@ojefersonlucas]

Capítulos e sumários 0:00 - Início 0:22 - Hello World 1:44 - Repositório no GitHub 2:33 - Instalando o CLI do Angular 3:17 - Conhecendo os comandos 3:53 - Criando o primeiro projeto 5:06 - Iniciando o projeto 6:57 - Fazendo pequenas modificações 8:13 - Considerações finais

[@djeisson]

Para quem teve problemas assim como eu na criação do projeto onde o app.module.ts não foi criado, o problema estava na instalação do Angular onde eu não havia instalado no escopo global e tambem no comando Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser que deve ser rodado no prompt como administrador antes de qualquer instalação.

[@matheusfrazao3792]

eu jogo esses comandos antes de fazer a instalçao?

[@djeisson]

@@matheusfrazao3792 isso

[@codificandocomleonelcassul8345]

O curso que eu estava a espera. Muito obrigado Matheus Battisti.

[@MatheusBattisti]

boa Leonel!

[@deyoliver1]

Olha, muito obrigada! Preciso fazer um trabalho da faculdade e preciso ir direto ao ponto para entregar logo e ficar livre este vídeo foi a mão na roda.

[@fabiomeireles8949]

Primeiro vídeo q eu vejo seu! Excelente! Vou continuar acompanhando o canal!

[@MatheusBattisti]

valeu Fábio!

[@luiscarvalho5726]

Show !!! Ta te puxando!!! Valeu mesmo!!!

[@MatheusBattisti]

bora!

[@werner.thiede]

Valeu pela aula.

[@MatheusBattisti]

de nada Werner, amanhã tem mais!

[@jailsonprado1600]

Mais uma excelente aula do mestre Matheus

[@MatheusBattisti]

valeu Jailson!

[@luissilva1270]

Comecei a ver agora, e já no primeiro comando o resultado é diferente do seu. O ideal seria fazer do zero e mostrar os detalhes. O comando ng new 'nome do projeto', faz varias perguntas, fiquei na duvida do que escolher

[@ricardoteixeira7374]

No meu também

[@jurandirsantos3358]

Se vc estiver usando o angular 17 ou superior ele não cria o "app.module.ts" . Então tem que rodar o comando "new" desta forma: ng new my-app --no-standalone --routing --ssr=false

[@thawandsoncosta4676]

Ansioso para as próximas aulas :D

[@MatheusBattisti]

hoje tem!

[@oreidosvideosvirais]

Professor, que dizer as bases dos Frameworks são “iguais”, só mudam a sintaxe e alguns posicionamentos de alguns arquivos? Ex: Django (python),Angular(JavaScript), Laravel(php)…

[@lucasvargas3618]

Professor suas aulas são excelentes, vc tem algum curso sobre api rest, ou react?

[@MatheusBattisti]

opa Lucas, no meu curso de Node tem bastante sobre API e também projeto com React, pode conferir os cursos por aqui: www.horadecodar.com.br/cursos-horadecodar/

[@EduardoSecondo]

Quem estiver com o problema: ng : O arquivo C:\Users\User\AppData\Roaming pm g.ps1 não pode ser carregado porque a execução de scripts foi desabilitada neste sistema. bla bla bla é pq vc está no terminal usando o "Powershell", só mudar para "Command Prompt" que vai funcionar.

[@nelsonxsi]

olá tenho o mesmo problema , entao terei que apagar o existente ?

[@EduardoSecondo]

@@nelsonxsi não, só abrir o terminal com Command prompt

[@cassanovsc]

Acabei de conhecer o canal, com certeza vou pegar alguns cursos no site! Só uma dúvida nessa primeira parte, quando crio o projeto (ng new ), aparece "Would you like to add Angular routing? (y/N)", eu coloquei que sim, mas qual a importância de ter isso ou não? Valeuu!!

[@MatheusBattisti]

fala Victor, mais pra frente a gente vai usar o Router, por equanto ele não faz diferença, creio que não atrapalhará é a estrutura que permite criar novas paginas no nosso app

[@andredias6356]

Muito obrigado por compartilhar seu conhecimento, Vai fazer curso de angular pago? Gosto da sua didática das aulas

[@MatheusBattisti]

opa Andre, vou sim, acho que vai ser mais ou menos este o cronograma: React => Abril, Vue => Junho ou Julho, Angular => Agosto ou Setembro =)

[@weltonleitedapaixao13]

Mestre super top

[@phtfao]

Parabéns Matheus, muito bom o seu curso!! 👏🏻👏🏻 Qual plugin você usa para que o VsCode já aponte no código os erros do Angular?

[@lilielili]

Dúvida: para eu rodar o comando "ng serve" na minha máquina, preciso acrescentar o comando "npx" antes. Porém existem várias aulas que as pessoas não precisam colocar esse prefixo antes. Pelas pesquisas que eu fiz, o npx é o executor dos pacotes e tals, mas pq alguns precisam colocar eles antes e outras pessoas não? é alguma diferença por conta do sistema operacional utilizado? ou algo assim?

[@RottweilerPastorAlemao]

Me tire uma duvida, estou começando agora no angular e quero saber faço para instalar diretamente no meu plano de hospedagem, já que to pagando, vou utilizar o plano. Eu já pesquisei muito e não acho nada de informação sobre isso, todo curso a pessoa faz tudo no pc

[@gilbertoba]

Show!

[@MatheusBattisti]

valeu Gilberto!

[@lucianaalves1426]

oi pessoal, apos criar meu projeto, não foram criadas as pastas Assets, Environments e styles alguem sabe porque e como resolver? Obrigada!

[@Leozulu89]

Como faço para ter os mesmos arquivos e pastas que tem no curso na data hoje fiz a instalação mas tem muita coisa diferente não da para acompanhar, pode me ajudar ?

[@IvanilsonRibeiroConsultor]

excelente,!!

[@mapermail]

Massa, vai ter autenticação com token jwt?

[@igorjrf]

nao consigo roar o comando informar "To see a list of supported npm commands" pode auxiliar?

[@mensagemdosanjosparavoce]

Olá Matheus Boa tarde! Creio que fiz a instalação de forma errada do Angular no Vscode. Gostaria de sabeer se você pode me ajudar a desinstalar o Angular de forma completa para tentar novamente instalar da maneira certa?! Desde ja agradeço de coração.

[@joaopauloalves1601]

Prof estou acompanhando o curso aqui, fiz toda instalação e fui verificar a versão, apareceu isso aqui: Warning : the current version of node (17.3.0) is not supported by angular. Alguma opção ou vou ter que baixar outra versão de node.

[@MatheusBattisti]

precisa instalar o Node mais novo sim João!

[@polyanafeitosadasilva4097]

Boa noite, quando crio minha pasta, ele não gera o arquivo do browerlistrc e nem o karma, isso é normal? é algo da nova versão? Obrigada

[@luizfernandolauriajansende5902]

po eu n consigo usar o comando ng no prompt Error: You need to specify a command before moving on. Use '--help' to view the available commands. oq eu faço?

[@felipedasilva4643]

Ao criar o projeto, o meu não cria o arquivo polyfils.ts. O que faço?

[@marianapistori5046]

Não estou conseguindo abrir o vs Code pelo terminal (tenho Mac) coloco o Code . e aparece Command not found: code, alguém pode me ajudar?

[@chicobg466]

Alguem sabe me dizer qual extensao o Matheus está usando para aparecer os icones do Angular e CSS nos arquivos correspondentes?

[@chicobg466]

Encontrei o pacote. Chama VSCode Icons pra quem tiver interesse.

[@chicobg466]

Galera, na verdade o pacote se chama apenas Icons. O VS-Icons é parecido, mas não é o mesmo do Matheus, alguns icones ele não reconheceu.

[@cleitoncode]

Cada projeto que eu crio de Angular tem no mínimo 300MB pois ele baixa várias dependências na pasta node_modules de cada projeto. Existe alguma forma de criar um projeto mais leve e não consumir muito espaço em disco?

[@jotavek999]

vc pode desenvolver seu projeto e quando terminar vc pode apagar a pasta node_modules, caso vc queira dar run no seu projeto denovo vc vai precisar colocar "npm i" ou "npm install" no terminal pra instalar todas as dependencias, o que inclui a pasta node_modules.

[@ramosandresc]

👍👍👍

[@josuealves7929]

Top

[@drario11]

COMO USAR ESSE terminal? o meu deu erro 2:39

[@drario11]

instalei o node e o visual code, o que estou errando?

[@iangodoi2468]

pena que é impossivel fazer a conexao do angular com a api no servidor...

[@mestrenader2119]

Professor, quando eu digito o comando "ng new nome-do-programa" dá um erro dizendo que a execução de scripts foi desabilitada neste sistema. O que eu faço para habilitar ?

[@luizeregina8317]

Consegui seguindo esse passo a passo que encontrei no Google: 1. Abra o Windows PowerShell como administrador. 2. Insira os comandos abaixo no PowerShell: set-ExecutionPolicy -ExecutionPolicy Unrestricted. 3. Confirme a alteração com s (sim) ou y (yes) dependendo do idioma padrão da seu sistema e aperte enter. 4. Volte para o vscode para testar.

[@mestrenader2119]

@@luizeregina8317 sim , o próprio vs code tinha mandado link com a resolução. Resolvi da mesma forma. De qualquer forma, agradeço a ajuda.

[@deyoliver1]

No proprio terminal do VSCode executei Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser Resolvido!

[@biduleitesilva]

Dúvida: no meu projeto não veio o arquivo app.module,ts. Como posso inserir esse arquivo?

[@djeisson]

Mesma coisa comigo, e ainda não consegui descobrir o por que disso

[@eliascastro7273]

o meu também não, quando tento iniciar o projeto ele pergunta "Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? (y/N) "? e traz arquivos diferentes, sem o module etc.

[@CATOLICOSWORLD]

Estou com o mesmo problema @@eliascastro7273

[@bladeq43]

tem que instalar o git?

[@lucasdev3214]

Pessoal, alguém sabe dizer onde está a parte do backend?

[@MatheusBattisti]

apenas o código Lucas? no primeiro vídeo deste curso está linkado, e também tem o vídeo dele aqui no canal...

[@maykgomes9395]

Tem algum método de criação do ambiente mais rápido ? Assim como o React tem o Vite, por que com o cra é muito demorado em algumas máquinas n mt boas.

[@florianomanoelvianadelima2386]

Quando rodo apenas o comando ng da erro, alguém mais teve esse problema ? se sim, como resolveu?

[@matheusfergos]

Não esotu conseguindo encontrar portal local

[@Pedroetbdf]

Bom.

[@Shock13022]

cara o npm install n funciona wtf???????

[@Raphael.77]

Vou ficar de React msm

[@cristianpereira]

logo apos digitar ng serve no terminal fala que o acesso nao foi autorizado

[@jeanbrandao]

Olá, quando digito o comando: ng new curso-angular o retorno que dá e esse: ng : O termo 'ng' não é reconhecido como nome de cmdlet, função, arquivo de script ou programa operável. Verifique a grafia do nome ou, se um caminho tiver sido incluído, veja se o caminho está correto e tente novamente. No linha:1 caractere:1 + ng new curso-angular + ~~ + CategoryInfo : ObjectNotFound: (ng:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@jeanbrandao]

No proprio terminal do VSCode executei Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser e não resolveu

[@lilielili]

o meu estava assim tbm, mas coloquei o npx na frente e funcionou .. npx ng new

[@Pedro-jy2jg]

o comando ng serve não funciona no meu

[@welintonsilva859]

no meu também não, já tentei de tudo mas nada!!

[@welintonsilva859]

Mano eu consegui resolver isso, primeiro cliquei na pasta do curso para abrir o terminal( não abra o terminal com a pasta aberta junto com os arquivos criados, segundo se o seu vs code tiver a extensão go live ativa vai pedir para abrir em outro localhost é só confirmar que sim) aqui no meu funcionou!!!

[@dev9543]

@@welintonsilva859 eu nao entendi, como assim clicou na pasta do curso ? pode me ajudar ? estou com o mesmo problema

[@welintonsilva859]

@@dev9543 Vc precisa abrir o terminal na pasta do curso, assim vai dar certo!

[@davisv_113]

Quando tento dar o comando npm install -g @angular/cli, aparece a seguinte mensagem => 'npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs', alguem sabe como resolver?

[@mgmoura]

quando digito o npm install -g @angular/cli o retorno aqui é : npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

[@antoniojunior8828]

Gente estou tendo problema na hora de instalar: $ npm install -g @angular/cli changed 228 packages in 18s 45 packages are looking for funding run `npm fund` for details Preciso de Help.

[@matheusfrazao3792]

meu "app.module.ts" nao está aparecendo, como faço para resolver?

[@eliascastro7273]

aqui também esta assim, parece que é a versão do angular que mudou isso..