Angular 4: Como include o Bootstrap?

Eu sou um desenvolvedor backend e estou apenas brincando com o Angular4. Então eu fiz este tutorial de instalação: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Dado isso, como posso adicionar bootstrap ao aplicativo para que eu possa usar a class “container-fluid” ou “col-md-6” e coisas assim?

npm install --save bootstrap 

depois, dentro de angular-cli.json (dentro da pasta raiz do projeto), encontre os styles e adicione o arquivo bootstrap css assim:

 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], 

ATUALIZAR:
em angular 6 angular-cli.json foi alterado de angular-cli.json para angular.json .

Assista ao vídeo ou siga a etapa

Instale o bootstrap 4 em angular 2 / angular 4 / angular 5 / angular 6

Há três maneiras de include o bootstrap em seu projeto
1) Adicionar Link CDN no arquivo index.html
2) Instale o bootstrap usando o npm e configure o caminho em .angular-cli.json Recomendado
3) Instale o bootstrap usando o npm e configure o caminho no arquivo index.html

Eu recomendei você seguindo 2 methods que estão instalados bootstrap usando npm porque está instalado no diretório do projeto e você pode acessá-lo facilmente

Método 1

Adicionar caminho Bootstrap, Jquery e popper.js CDN ao arquivo index.html do projeto angular

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

Método 2

1) Instale o bootstrap usando npm

 npm install bootstrap --save 

após a instalação do Bootstrap 4, precisamos de dois pacotes javascript mais que é o Jquery e o Popper.js sem que o bootstrap desses dois pacotes esteja completo, porque o Bootstrap 4 está usando o pacote jquery e popper.js, então temos que instalar também

2) Instale o JQUERY

 npm install jquery --save 

3) Instale o Popper.js

 npm install popper.js --save 

Agora o Bootstrap é instalado no diretório do projeto dentro da pasta node_modules

abra .angular-cli.json este arquivo está disponível no diretório angular que abrir esse arquivo e adicione o caminho dos arquivos bootstrap, jquery e popper.js dentro dos estilos [] e scripts [] caminho veja o exemplo abaixo

 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/popper.js/dist/umd/popper.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], 

Nota: Não mude uma sequência de arquivos js como deveria ser

Método 3

Instale o bootstrap usando o npm, siga o método 2 no método 3, apenas definimos o caminho dentro do arquivo index.html em vez do arquivo .angular-cli.json

bootstrap.css

   

Jquery.js

  

Bootstrap.js

  

Popper.js

  

Agora Bootstrap funcionando bem agora

Adicione e configure as dependencies de Bootstrap e FontAwesome Quando criamos nosso aplicativo, executamos o seguinte comando para instalar nossas dependencies usando o npm.

 $ npm install --save bootstrap@4.0.0-alpha.6 font-awesome 

Agora que temos as dependencies no lugar, podemos informar ao Angular CLI que ele precisa carregar esses estilos abrindo o arquivo
src / styles.css
e adicionando as duas instruções a seguir.

 @import "~bootstrap/dist/css/bootstrap.min.css"; @import "~font-awesome/css/font-awesome.css"; 

para mais detalhes, visite https://medium.com/@beeman/tutorial-add-bootstrap-to-angular-cli-apps-b0a652f2eb2

Angular 4 – Bootstrap / @ ng-bootstrap setup

Primeiro instale o bootstrap no seu projeto usando o comando abaixo:

npm install --save bootstrap

Em seguida, adicione esta linha "../node_modules/bootstrap/dist/css/bootstrap.min.css" ao arquivo angular-cli.json (pasta raiz) em estilos

 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], 

Depois de instalar as dependencies acima, instale o ng-bootstrap via:

npm install --save @ng-bootstrap/ng-bootstrap

Uma vez instalado, você precisa importar o módulo principal.

 import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 

Depois disso, você pode usar todos os widgets do Bootstrap (por exemplo, carrossel, modal, popovers, dicas de ferramentas, guias etc.) e vários adicionais (datepicker, rating, timepicker, typeahead).

Em Angular4 como você lida com o sistema @types , você deve fazer as seguintes coisas,

Faz,

 1) npm install --save @types/jquery 2) npm install --save @types/bootstrap 

tsconfig.json

procure tipos array e adicione inputs jquery e bootstrap ,

 "types": [ "jquery", "bootstrap", "node" ] 

Index.html

na seção principal adicione as seguintes inputs,

     

E comece a usar o jquery e o bootstrap .

por favor, consulte este link https://github.com/angular/angular-cli/wiki/stories-include-bootstrap .

Ele fornece instruções passo a passo sobre como include o mais recente bootstrap ao seu angular 4 usando o angular-cli.

Como este recebe mais e mais respostas eu vou marcar o que me ajudou:

Como adicionar bootstrap a um projeto angular-cli

Para obter as etapas detalhadas abaixo e exemplo de trabalho, você pode visitar https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/

Etapas muito detalhes com explicação adequada.

Passos: Instalando o Bootstrap a partir do NPM

Em seguida, precisamos instalar o Bootstrap. Mude o diretório para o projeto que criamos (cd angular-bootstrap-example) e execute o seguinte comando:

Para o Bootstrap 3:

 npm install bootstrap --save 

Para o Bootstrap 4 (atualmente em beta):

 npm install bootstrap@next --save 

OR Alternativa: Local Bootstrap CSS Como alternativa, você também pode baixar o Bootstrap CSS e adicioná-lo localmente ao seu projeto. Eu baixei o Bootstrap do site e criei um estilo de pasta (mesmo nível que o styles.css):

Nota: Não coloque seus arquivos CSS locais na pasta de ativos. Quando fazemos a construção da produção com o Angular CLI, os arquivos CSS declarados no .angular-cli.json serão reduzidos e todos os estilos serão empacotados em um único styles.css. A pasta assets é copiada para a pasta dist durante o processo de compilation (o código CSS será duplicado). Coloque apenas seus arquivos CSS locais em ativos, caso os importe diretamente no index.html.

Importando o CSS 1.Temos duas opções para importar o CSS do Bootstrap que foi instalado do NPM:

texto forte 1: Configure .angular-cli.json:

 "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.scss" ] 

2: Importe diretamente em src / style.css ou src / style.scss:

 @import '~bootstrap/dist/css/bootstrap.min.css'; 

Eu pessoalmente prefiro importar todos os meus estilos em src / style.css já que ele já foi declarado em .angular-cli.json.

3.1 Alternativa: Local Bootstrap CSS Se você adicionou o arquivo Bootstrap CSS localmente, basta importá-lo em .angular-cli.json

 "styles": [ "styles/bootstrap-3.3.7-dist/css/bootstrap.min.css", "styles.scss" ], 

ou src / style.css

 @import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css'; 

4: Bootstrap JavaScript Components com ngx-bootstrap (Opção 1) Caso você não precise usar os componentes do Bootstrap JavaScript (que exigem JQuery), essa é toda a configuração de que você precisa. Mas se você precisar usar modals, accordion, datepicker, tooltips ou qualquer outro componente, como podemos usar esses componentes sem instalar o jQuery?

Existe uma biblioteca de wrapper Angular para o Bootstrap chamada ngx-bootstrap que também podemos instalar a partir do NPM:

 npm install ngx-bootstrap --save 

Nota ng2-bootstrap e ngx-bootstrap são o mesmo pacote. O ng2-bootstrap foi renomeado para ngx-bootstrap após o #itsJustAngular.

Caso você queira instalar o Bootstrap e o ngx-bootstrap ao mesmo tempo em que cria seu projeto Angular CLI:

 npm install bootstrap ngx-bootstrap --save 

4.1: Adicionando os módulos do Bootstrap requeridos em app.module.ts

Percorra o ngx-bootstrap e adicione os módulos necessários em seu app.module.ts. Por exemplo, suponha que queremos usar os componentes Dropdown, Tooltip e Modal:

 import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { ModalModule } from 'ngx-bootstrap/modal'; @NgModule({ imports: [ BrowserModule, BsDropdownModule.forRoot(), TooltipModule.forRoot(), ModalModule.forRoot() ], // ... }) export class AppBootstrapModule {} 

Como chamamos o método .forRoot () para cada módulo (devido aos provedores do módulo ngx-bootstrap), as funcionalidades estarão disponíveis em todos os componentes e módulos do seu projeto (escopo global).

Como alternativa, se você deseja organizar o ngx-bootstrap em um módulo diferente (apenas para fins de organização, caso precise importar muitos módulos bs e não quiser confundir seu app.module), é possível criar um módulo app-bootstrap.module.ts, importe os módulos do Bootstrap (usando forRoot ()) e também declare-os na seção exports (assim eles também estarão disponíveis para outros módulos).

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; import { TooltipModule } from 'ngx-bootstrap/tooltip'; import { ModalModule } from 'ngx-bootstrap/modal'; @NgModule({ imports: [ CommonModule, BsDropdownModule.forRoot(), TooltipModule.forRoot(), ModalModule.forRoot() ], exports: [BsDropdownModule, TooltipModule, ModalModule] }) export class AppBootstrapModule {} 

Por fim, não esqueça de importar seu módulo de bootstrap em seu app.module.ts.

import {AppBootstrapModule} de ‘./app-bootstrap/app-bootstrap.module’;

 @NgModule({ imports: [BrowserModule, AppBootstrapModule], // ... }) export class AppModule {} 

O ngx-bootstrap funciona com o Bootstrap 3 e 4. E também fiz alguns testes e a maioria das funcionalidades também funciona com o Bootstrap 2.x (sim, ainda tenho algum código legado para manter).

Espero que isso ajude alguém!

Se você está usando Sass / Scss, então siga isso,

Faça a instalação do npm

 npm install bootstrap --save 

e adicione a declaração de import ao seu arquivo sass / scss,

 @import '~bootstrap/dist/css/bootstrap.css' 

Para o bootstrap 4.0.0-alph.6

 npm install bootstrap@4.0.0-alpha.6 jquery tether --save 

Então, depois disso, execute:

 npm install 

Agora. Abra o arquivo .angular-cli.json e importe o bootstrap, jquery e tether:

 "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ] 

E agora. Você está pronto para ir.

Execute o seguinte comando em seu projeto, ou seja, npm install bootstrap@4.0.0-alpha.5 –save

Depois de instalar a dependência acima, execute o seguinte comando npm que instalará o módulo de boot npm install –save @ ng-bootstrap / ng-bootstrap

Confira isso para a referência – https://github.com/ng-bootstrap/ng-bootstrap

Adicione a seguinte importação no app.module import {NgbModule} de ‘@ ng-bootstrap / ng-bootstrap’; e adicione NgbModule às importações

Em seu stye.css @import “../node_modules/bootstrap/dist/css/bootstrap.min.css”;

adicionar em angular-cli.json

  "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], "scripts": [ "../node_modules/bootstrap/dist/js/bootstrap.js" ], 

Será trabalho, eu verifiquei.

Como eu posso ver você já tem muita resposta, mas você pode tentar este método para.

Sua melhor prática para não usar o jquery em angular, eu prefiro o método https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md para instalar o bootstrap sem usar o bootstrap componente js que depende do jquery.

 npm install ngx-bootstrap bootstrap --save 

Mantenha seu código livre de jquery em angular

Se você quiser usar o bootstrap online e seu aplicativo tiver access à Internet, você pode adicionar

 @import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css'); 

Em seu arquivo style.css principal. e é o caminho mais simples.

Referência: angular.io

Nota. Esta solução carrega o bootstrap do site unpkg e precisa ter access à internet.

Angular 6 CLI, faça apenas:

ng add @ ng-bootstrap / esquemas

Para instalar o último uso $ npm i –save bootstrap @ next

primeiro instale o bootstrap no seu projeto usando o npm npm i bootstrap depois que abrir o arquivo ur style.css em seu projeto e adicione esta linha

@import "~bootstrap/dist/css/bootstrap.css";

e é isso bootstrap adicionado em seu projeto

você trabalha com o cdn para bootstrap e jquery ou instala o bootstarp diretamente no aplicativo com:

 npm install ngx-bootstrap --save 

use também https://ng-bootstrap.github.io/#/home , mas isso não é apropriado

https://medium.com/codingthesmartway-com-blog/using-bootstrap-with-angular-c83c3cee3f4a