# Angular2 e Boostrap

**URL:** <https://forum.casadocodigo.com.br/t/angular2-e-boostrap/907>\
**Category:** Livros\
**Tags:** angular\
**Created:** [Janeiro 17, 2018, 11:40pm UTC](https://forum.casadocodigo.com.br/t/angular2-e-boostrap/907 "2018-01-17T23:40:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hargon](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@hargon](https://forum.casadocodigo.com.br/u/hargon)\
**Post date:** [Janeiro 17, 2018, 11:40pm UTC](https://forum.casadocodigo.com.br/t/angular2-e-boostrap/907/1 "2018-01-17T23:40:37Z")

</div>

Comprei o livro ‘Crie aplicações com angular’ e ao implementar o código do projeto final, existem informações pendentes.

Por exemplo, não é explicado onde você deve executar o comando “npm install bootstrap@next --save” . Pela lógica, deve ser na raiz do projeto, até porque é lá que está o arquivo package.json. Logo depois é falado para inserir o seguinte conteúdo no arquivo styles.css “@import  
’~bootstrap/dist/css/bootstrap.min.css’;” . O que ocorre é que no console do navegador diz: “Failed to load resource: the server responded with a status of 404 (Not Found) bootstrap.min.css” .

O que estou fazendo de errado?

---

<div class="post-metadata">

**Author:** ![Thiago\_Guedes](https://yyz1.discourse-cdn.com/flex029/user_avatar/forum.casadocodigo.com.br/thiago_guedes/32/14425_2.png) [@Thiago\_Guedes](https://forum.casadocodigo.com.br/u/Thiago_Guedes)\
**Post date:** [Janeiro 18, 2018, 11:42am UTC](https://forum.casadocodigo.com.br/t/angular2-e-boostrap/907/2 "2018-01-18T11:42:01Z")

</div>

Olá Hargon, tudo bem?

O comando `npm install bootstrap@next --save` deve ser feito na raiz do projeto para a dependência ser salva no package.json do projeto.

Sobre o erro do bootstrap, vá ao arquivo _package.json_ e verifique a última versão instalada do seu _bootstrap_, provavelmente será `"bootstrap": "^4.0.0-beta.2"`.

Retire o `^` e deixe somente dessa forma `"bootstrap": "4.0.0-beta.2"`.

Rode a aplicação novamente (ng serve) no console.

Fiz os testes usando a versão do angular cli - `"@angular/cli": "1.0.0-beta.32.3",` e também a versão `"@angular/cli": "1.6.1",`.

Sobre o bootstrap testei nas versões - `"bootstrap": "4.0.0-alpha.6",` e também na versão `"bootstrap": "4.0.0-beta.2"`.

Em resumo é somente retirar o `^` do package.json.

Desde já fico a disposição para ajudar em outras dúvidas.

Att  
Thiago Guedes

---

<div class="post-metadata">

**Author:** ![hargon](https://avatars.discourse-cdn.com/v4/letter/h/57b2e6/32.png) [@hargon](https://forum.casadocodigo.com.br/u/hargon)\
**Post date:** [Janeiro 18, 2018, 8:13pm UTC](https://forum.casadocodigo.com.br/t/angular2-e-boostrap/907/3 "2018-01-18T20:13:04Z")

</div>

Obrigado pelo retorno Thiago\_Guedes.

Como criei o projeto ontem, a minha versão do Bootstrap é `"bootstrap": "^4.0.0-beta.3"` .

Alterei para versão que você disse e o erro mudou para:  
\*\* GET [http://localhost:4200/bootstrap/dist/css/bootstrap.min.css](http://localhost:4200/bootstrap/dist/css/bootstrap.min.css) net::ERR\_ABORTED addStyles.js:225\*\*

Meu angular cli- está na versão `angular-cli: 1.0.0-beta.28.3`

* * *

Eu acabei de alterar o styles.css para  
`@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';`

E deu certo. Mas se essa não é a melhor maneira, gostaria de saber, se possível, o que devo corrigir para seguir as boas práticas mencionadas no livro.

Desde já agradeço.