Angular 4: Como incluir Bootstrap?

Sou um desenvolvedor de back-end e estou apenas brincando com o Angular4. Então, fiz este tutorial de instalação: https://www.youtube.com/watch?v=cdlbFEsAGXo .

Diante disso, como posso adicionar bootstrap ao app para usar a classe "container-fluid" ou "col-md-6" e coisas assim?

npm install --save bootstrap

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

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

ATUALIZAÇÃO:
no angular 6+ angular-cli.json foi alterado para angular.json.

Assista ao vídeo ou siga o passo

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

Há três maneiras de incluir bootstrap em seu projeto
1) Adicionar link CDN no arquivo index.html
2) Instalar bootstrap usando npm e definir caminho em angular.json Recomendado
3) Instalar bootstrap usando npm e definir caminho no arquivo index.html

Eu recomendei a você seguir 2 métodos que são instalados bootstrap usando npm porque está instalado no diretório do seu projeto e você pode acessá-lo facilmente

Método 1

Adicionar Bootstrap, Jquery e popper.js caminho CDN ao arquivo index.html do seu 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 mais dois pacotes javascript que são Jquery e Popper.js sem esses dois pacotes o bootstrap não está 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 Popper.js

npm install popper.js --save

Agora o Bootstrap está instalado em seu diretório de projeto dentro da pasta node_modules

abra angular.json este arquivo está disponível em seu diretório angular, abra esse arquivo e adicione o caminho dos arquivos bootstrap, jquery e popper.js dentro do caminho styles [] e scripts [] 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 altere uma sequência de arquivo js, ​​deve ser assim

Método 3

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

bootstrap.css

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css">

Jquery.js

<script src="node_modules/jquery/dist/jquery.min.js"><br>

Bootstrap.js

<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>

Popper.js

<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>

Agora o bootstrap está funcionando bem agora

Para configurar / integrar / usar o Bootstrap no angular, primeiro precisamos instalar o pacote Bootstrap usando o npm.

Pacote de instalação

$ npm install bootstrap@4.0.0-alpha.6 --save   // for specific version
or
$ npm install bootstrap --save   // for latest version

Nota: o comando --save salvará a dependência em nosso aplicativo angular dentro do arquivo package.json.

Agora que temos o pacote instalado com a etapa acima, podemos dizer ao Angular CLI que ele precisa carregar esses estilos usando qualquer uma das opções abaixo ou ambas:

opção 1) Adicionar no arquivo src / styles.css

podemos adicionar as dependências conforme mostrado abaixo:

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

Opção 2) Adicionando em angular-cli.json ou angular.json

Podemos adicionar os arquivos css de estilo no arquivo angular-cli.json ou angular.json, que está na pasta raiz de nosso aplicativo angular, conforme mostrado abaixo:

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

Angular 4 - Configuração de bootstrap / @ ng-bootstrap

Primeiro instale o bootstrap em 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 dependências acima, instale o ng-bootstrap via:

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

Depois de 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 (ex. Carrossel, modal, popovers, dicas de ferramentas, guias etc.) e vários itens adicionais (selecionador de data, classificação, selecionador de tempo, digitação antecipada).

No Angular4, conforme você lida com o sistema @types , você deve fazer o seguinte,

Faz,

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

tsconfig.json

procure por array de tipos e adicione entradas jquery e bootstrap ,

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

Index.html

na seção head adicione as seguintes entradas,

  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/jquery/dist/jquery.min.js "></script>
  <script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>

E comece a usar jquery e bootstrap ambos.

Se você estiver usando Sass / Scss, siga isto,

Instalar npm

npm install bootstrap --save

e adicionar importdeclaração ao seu arquivo sass / scss,

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

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

Etapas muito detalhadas com explicação adequada.

Etapas: Instalando Bootstrap 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 Bootstrap 3:

npm install bootstrap --save

Para Bootstrap 4 (atualmente em beta):

npm install bootstrap@next --save

OU Alternativa: CSS Bootstrap local Como alternativa, você também pode baixar o CSS Bootstrap e adicioná-lo localmente ao seu projeto. Descarreguei o Bootstrap do site e criei uma pasta styles (mesmo nível que styles.css):

Nota: Não coloque seus arquivos CSS locais na pasta de ativos. Quando fazemos a construção de produção com Angular CLI, os arquivos CSS declarados em .angular-cli.json serão minimizados e todos os estilos serão agrupados em um único styles.css. A pasta de ativos é copiada para a pasta dist durante o processo de construção (o código CSS será duplicado). Coloque seus arquivos CSS locais em ativos apenas no caso de importá-los 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: Configurar .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, uma vez que já foi declarado em .angular-cli.json.

3.1 Alternativa: CSS Bootstrap local Se você adicionou o arquivo CSS Bootstrap 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: Componentes de Bootstrap JavaScript com ngx-bootstrap (Opção 1) Caso você não precise usar componentes de Bootstrap JavaScript (que requerem JQuery), esta é toda a configuração de que você precisa. Mas se você precisa usar modais, acordeão, selecionador de data, dicas de ferramentas ou qualquer outro componente, como podemos usar esses componentes sem instalar o jQuery?

Existe uma biblioteca de wrapper Angular para 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. ng2-bootstrap foi renomeado para ngx-bootstrap após #itsJustAngular.

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

npm install bootstrap ngx-bootstrap --save

4.1: Adicionando os módulos Bootstrap necessários em app.module.ts

Vá até o ngx-bootstrap e adicione os módulos necessários em seu app.module.ts. Por exemplo, suponha que desejamos usar os componentes Suspenso, Dica de Ferramenta 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ê gostaria de organizar o ngx-bootstrap em um módulo diferente (apenas para fins de organização, no caso de você precisar importar muitos módulos bs e não querer bagunçar seu app.module), você pode criar um módulo app-bootstrap.module.ts, importe os módulos do Bootstrap (usando forRoot ()) e também os declare na seção de exportações (para que fiquem disponíveis para outros módulos também).

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 se 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 {}

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

Espero que ajude alguém!

Testado em Angular 7.0.0

Etapa 1 - Instale as dependências necessárias

npm install bootstrap (se você quiser uma versão específica, especifique o número da versão)

npm install popper.js (se você quiser uma versão específica, especifique o número da versão)

npm install jquery

Versões que tentei:

"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",

Etapa 2: Especifique as bibliotecas na ordem abaixo em angular.json. No angular mais recente, o nome do arquivo de configuração é angular.json e não angular-cli.json

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/client",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.scss"
            ],
            "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"
            ]
          },

Para bootstrap 4.0.0-alph.6

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

Então, depois que isso for feito, execute:

npm install

Agora. Abra o arquivo .angular-cli.json e importe 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.

Como posso ver, você já tem muitas respostas, mas pode tentar esse método também.

É prática recomendada não usar jquery no angular, 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

or

ng add ngx-bootstrap   (Preferred)

Mantenha seu código jquery livre no angular

Execute o seguinte comando em seu projeto, ou seja, npm install [email protected] --save

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

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

Adicione a seguinte importação em app.module import {NgbModule} de '@ ng-bootstrap / ng-bootstrap'; e adicionar NgbModule às importações

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

Etapa 1: npm install bootstrap --save

Etapa: 2: cole o código abaixo em angular.json node_modules / bootstrap / dist / css / bootstrap.min.css

Etapa 3: servir

adicionar em angular-cli.json

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

Vai dar certo, eu verifiquei.

Se você deseja usar o bootstrap online e seu aplicativo tem acesso à internet, você pode adicionar

@import url('https://unpkg.com/[email protected]/dist/css/bootstrap.min.css');

Em seu arquivo style.css principal. e é a maneira mais simples.

Referência: angular.io

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

Angular 6 CLI, basta fazer:

ng add @ ng-bootstrap / schematics 

Para instalar o mais recente, use $ npm i --save bootstrap @ next

primeiro instale o bootstrap em seu projeto usando npm, npm i bootstrap depois abra seu arquivo style.css em seu projeto e adicione esta linha

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

e é isso o bootstrap adicionado ao seu projeto

| * | Instalando Bootstrap 4 para Angular 2, 4, 5, 6 +:

| +> Instalar Bootstrap com npm

npm install bootstrap --save

npm install popper.js --save

| +> Adicionar estilos e scripts ao angular.json

"architect": [{
    ...
    "styles": [
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "src/styles.scss"
    ],
    "scripts": [
        "node_modules/jquery/dist/jquery.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ]
    ...
}]

Se você estiver no Angular 6+, adicione o seguinte ao angular.json :

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

Adicionando a versão 4 atual do bootleg:

1 / Primeiro você tem que instalar estes:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2 / Em seguida, adicione os arquivos de script necessários aos scripts em angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],
enter code here

3 / Finalmente, adicione o CSS Bootstrap à matriz de estilos em angular.json:

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

verifique este link

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

npm install ngx-bootstrap --save

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

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