Como usar o Bootstrap em um projeto Angular?

Estou iniciando meu primeiro aplicativo Angular e minha configuração básica está concluída.

Como posso adicionar o Bootstrap ao meu aplicativo?

Se você pode dar um exemplo, seria uma grande ajuda.

Desde que você use o Angular-CLI para gerar novos projetos, existe outra maneira de tornar o bootstrap acessível no Angular 2/4 .

1. Via interface da linha de comandos, navegue até a pasta do projeto. Em seguida, use npm para instalar inicialização:
   $ npm install --save bootstrap. A --saveopção fará com que o bootstrap apareça nas dependências.
2. Edite o arquivo .angular-cli.json, que configura seu projeto. Está dentro do diretório do projeto. Adicione uma referência à "styles"matriz. A referência deve ser o caminho relativo para o arquivo de auto-inicialização baixado com o npm. No meu caso é:"../node_modules/bootstrap/dist/css/bootstrap.min.css",

Meu exemplo .angular-cli.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "bootstrap-test"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Agora o bootstrap deve fazer parte das suas configurações padrão.

Uma integração com o Angular2 também está disponível no projeto ng2-bootstrap : https://github.com/valor-software/ng2-bootstrap .

Para instalá-lo, basta colocar esses arquivos na sua página HTML principal:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Então você pode usá-lo em seus componentes da seguinte maneira:

import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'my-app',
  directives: [Alert],
  template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}

Tudo o que você precisa fazer é incluir o boostrap css no seu arquivo index.html.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Outra alternativa muito boa (melhor?) É usar um conjunto de widgets criados pela equipe angular-ui: https://ng-bootstrap.github.io

Se você planeja usar o Bootstrap 4, que é necessário com o ng-bootstrap da equipe da angular-ui, mencionado neste tópico, convém usá-lo (NOTA: você não precisa incluir o arquivo JS):

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Você também pode fazer referência a isso localmente após a execução npm install [email protected] --save, apontando para o arquivo no seu styles.scssarquivo, supondo que você esteja usando o SASS:

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

A opção mais popular é usar alguma biblioteca de terceiros distribuída como pacote npm, como o projeto ng2-bootstrap https://github.com/valor-software/ng2-bootstrap ou a biblioteca Angular UI Bootstrap.

Eu pessoalmente uso o ng2-bootstrap. Existem várias maneiras de configurá-lo, porque a configuração depende de como o seu projeto Angular é construído. Abaixo, eu posto um exemplo de configuração com base no projeto QuickStart do Angular 2 https://github.com/angular/quickstart

Primeiramente, adicionamos dependências em nosso package.json

    { ...
"dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",

    ...

    "bootstrap": "^3.3.7",
    "ng2-bootstrap": "1.1.16-11"
  },
... }

Em seguida, temos que mapear nomes para URLs apropriadas em systemjs.config.js

(function (global) {
  System.config({
    ...
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      //bootstrap
      'moment': 'npm:moment/bundles/moment.umd.js',
      'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
...
  });
})(this);

Temos que importar o arquivo .css de inicialização no index.html. Podemos obtê-lo no diretório / node_modules / bootstrap no disco rígido (porque adicionamos a dependência do bootstrap 3.3.7) ou na web. Lá estamos obtendo da web:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    ...
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Devemos editar nosso arquivo app.module.ts no diretório / app

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';

import { AppComponent }  from './app.component';


@NgModule({
  //bootstrap alert import part 2
  imports:      [ BrowserModule, AlertModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

E, finalmente, nosso arquivo app.component.ts do diretório / app

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <alert type="success">
        Well done!
    </alert>
    `
})

export class AppComponent {

    constructor() { }

}

Em seguida, precisamos instalar nossas dependências de bootstrap e ng2-bootstrap antes de executar nosso aplicativo. Devemos ir ao diretório do projeto e digitar

npm install

Finalmente, podemos iniciar nosso aplicativo

npm start

Existem muitos exemplos de código no github do projeto ng2-bootstrap mostrando como importar o ng2-bootstrap para várias construções de projetos do Angular 2. Existe até uma amostra de plnkr. Também há documentação da API no site do software Valor (autores da biblioteca).

Em um ambiente angular-cli, a maneira mais direta que encontrei é a seguinte:

1. Solução em um ambiente com s̲c̲s̲s̲ stylesheets

npm install bootstrap-sass —save

No style.scss:

$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

Nota1: O ~caractere é uma referência à pasta nodes_modules .
Nota2: Como estamos usando o scss, podemos personalizar todas as variáveis ​​do boostrap que desejamos.

2. Solução em um ambiente com folhas de estilo c̲s̲s̲

npm install bootstrap —save

No style.css:

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

Existem várias maneiras de configurar o angular2 com o Bootstrap, uma das maneiras mais completas de aproveitar ao máximo é usar o ng-bootstrap, usando essa configuração que damos ao algular2 controle completo sobre o nosso DOM, evitando a necessidade de usar o JQuery e o Boostrap .js.

1-Tome como ponto de partida um novo projeto criado com o Angular-CLI e, usando a linha de comando, instale o ng-bootstrap:

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

Nota: Mais informações em https://ng-bootstrap.github.io/#/getting-started

2-Então precisamos instalar o bootstrap para o css e o sistema de grade.

npm install bootstrap@4.0.0-beta.2 --save

Nota: Mais informações em https://getbootstrap.com/docs/4.0/getting-started/download/

Agora temos a configuração do ambiente e, para isso, temos que alterar o .angular-cli.json adicionando ao estilo:

"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Aqui está um exemplo:

"apps": [
    {
      "root": "src",
        ...
      ],
      "index": "index.html",
       ...
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

O próximo passo é adicionar o módulo ng-boostrap ao nosso projeto. Para isso, precisamos adicionar o app.module.ts:

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

Em seguida, adicione o novo módulo ao aplicativo: NgbModule.forRoot ()

Exemplo:

@NgModule({
  declarations: [
    AppComponent,
    AppNavbarComponent
  ],
  imports: [
    BrowserModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Agora podemos começar a usar o bootstrap4 em nosso projeto angular2 / 5.

Eu tive a mesma pergunta e encontrei este artigo com uma solução realmente limpa:

http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/

Aqui estão as instruções, mas com minha solução simplificada:

Instale o Bootstrap 4 ( instruções ):

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

Se necessário, renomeie seu src / styles.css para styles.scss e atualize .angular-cli.json para refletir a alteração:

"styles": [
  "styles.scss"
],

Em seguida, adicione esta linha ao styles.scss :

@import '~bootstrap/scss/bootstrap';

basta verificar o arquivo package.json e adicionar dependências para o bootstrap

"dependencies": {

   "bootstrap": "^3.3.7",
}

adicione o código abaixo no .angular-cli.jsonarquivo

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

Finalmente, você apenas atualiza seu npm localmente usando o terminal

$ npm update

1. npm install --save bootstrap

2. vá para -> arquivo angular-cli.json , encontre propriedades de estilos e adicione a próxima picada: "../node_modules/bootstrap/dist/css/bootstrap.min.css", pode ser assim:

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

Procedimento com Angular 6+ e Bootstrap 4+:

1. Abra um shell na pasta do seu projeto
2. Instale o bootstrap com o comando: npm install --save [email protected]
3. O Bootstrap precisa da dependência jquery, portanto, se você não a possui, pode instalá-la com o comando: npm install --save jquery 1.9.1
4. Pode ser necessário corrigir a vulnerabilidade com o comando: npm audit fix
5. No seu arquivo principal style.scss, adicione a seguinte linha: @import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

OU

Adicione esta linha ao seu arquivo index.html principal: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Eu estava procurando a mesma resposta e finalmente encontrei este link. Você pode encontrar três maneiras diferentes explicadas de como adicionar bootstrap css ao seu projeto angular 2. Isso me ajudou.

Aqui está o link: http://codingthesmartway.com/using-bootstrap-with-angular/

Minha recomendação seria, em vez de declará-lo na caneta json, para colocá-lo no scss para que tudo seja compilado e em um só lugar.

1) instale o bootstrap com o npm

 npm install bootstrap

2) Declare o bootstrap npm no css com nossos estilos

Criar _bootstrap-custom.scss:

  // Required
  @import "bootstrap-custom-required";


  // Optional
  @import "~bootstrap/scss/root";
  @import "~bootstrap/scss/grid";
  @import "~bootstrap/scss/tables";

    ...
    ..
    .

3) Dentro do styles.scss, inserimos

@import "bootstrap-custom";

então teremos todo o nosso núcleo compilado e em um só lugar

Você pode tentar usar a biblioteca da interface do usuário Prettyfox http://ng.prettyfox.org

Esta biblioteca usa o bootstrap 4 estilos e não precisa de jquery.

adicione as seguintes linhas na sua página html

<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Se você usar o angular cli, após adicionar o bootstrap ao package.json e instalar o pacote, tudo o que você precisa é adicionar boostrap.min.css na seção "styles" do .angular-cli.json.

Uma coisa importante é "Quando você faz alterações no arquivo .angular-cli.json, precisará reiniciar o serve para captar as alterações na configuração".

Ref:

https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Outra alternativa muito boa é usar o esqueleto Angular 2/4 + Bootstrap 4

1) Faça o download do ZIP e extraia a pasta zip

2) ng servir