Queremos usar o bootstrap 4 (4.0.0-alpha.2) em nosso aplicativo gerado com angular-cli 1.0.0-beta.5 (com nó v6.1.0).

Após obter o bootstrap e suas dependências com o npm, nossa primeira abordagem consistiu em adicioná-los em angular-cli-build.js:

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

e importá-los em nossa index.html

<script src="vendor/jquery/dist/jquery.min.js"></script>
<script src="vendor/tether/dist/js/tether.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

Isso funcionou bem, ng servemas assim que produzimos uma compilação com -prodflag, todas essas dependências desapareceram dist/vendor(surpresa!).

Como pretendemos lidar com esse cenário (por exemplo, carregando scripts de autoinicialização) em um projeto gerado com angular-cli?

Tivemos os seguintes pensamentos, mas na verdade não sabemos para onde ir ...

• usar uma CDN? mas preferimos veicular esses arquivos para garantir que eles estarão disponíveis

• copiar dependências para dist/vendordepois da nossa ng build -prod? Mas isso parece algo que o angular-cli deve fornecer, pois "cuida" da parte da construção?

• adicionando jquery, bootstrap e tether src/system-config.tse de alguma forma puxá-los para o nosso pacote main.ts? Mas isso parecia errado, considerando que não vamos usá-los explicitamente no código do aplicativo (diferente do moment.js ou algo como lodash, por exemplo).

ATUALIZAÇÃO IMPORTANTE: ng2-bootstrap agora é substituído por ngx-bootstrap

O ngx-bootstrap suporta Angular 3 e 4.

Atualização: 1.0.0-beta.11-webpack ou versões acima

Antes de tudo, verifique sua versão angular-cli com o seguinte comando no terminal:

ng -v

Se sua versão angular-cli for maior que 1.0.0-beta.11-webpack , siga estas etapas:

1. Instale o ngx-bootstrap e o bootstrap :

   npm install ngx-bootstrap bootstrap --save

Essa linha instala o Bootstrap 3 hoje em dia, mas pode instalar o Bootstrap 4 no futuro. Lembre-se de que o ngx-bootstrap suporta as duas versões.

2. Abra src / app / app.module.ts e adicione:

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Abra angular-cli.json (para o nome do arquivo angular6 e posterior alterado para angular.json ) e insira uma nova entrada na stylesmatriz:

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

4. Abra src / app / app.component.html e adicione:

   <alert type="success">hello</alert>

1.0.0-beta.10 ou versões inferiores:

E, se a sua versão angular-cli for 1.0.0-beta.10 ou inferior, você poderá usar as etapas abaixo.

Primeiro, vá para o diretório do projeto e digite:

npm install ngx-bootstrap --save

Em seguida, abra o seu angular-cli-build.js e adicione esta linha:

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Agora, abra seu src / system-config.ts e escreva:

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...e:

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Procurando a palavra-chave> Instalação da Biblioteca Global em https://github.com/angular/angular-cli ajuda a encontrar a resposta.

De acordo com o documento, você pode seguir as etapas abaixo para adicionar a biblioteca Bootstrap.

Primeiro instale o Bootstrap a partir do npm:

npm install bootstrap@next

Em seguida, adicione os arquivos de script necessários em apps [0] .scripts no arquivo angular-cli.json:

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

Por fim, adicione o CSS do Bootstrap à matriz apps [0] .styles:

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

Reinicie o servir se você estiver executando, e o Bootstrap 4 deve estar funcionando no seu aplicativo.

Esta é a melhor solução. Mas se você não reiniciar o ng serve, nunca funcionará. É altamente recomendável fazer essa última ação.

Faça o seguinte:

npm i bootstrap@next --save

Isso adicionará o bootstrap 4 ao seu projeto.

Em seguida, vá para o seu arquivo src/style.scssou src/style.css(escolha o que estiver usando) e importe a inicialização aqui:

Para style.css

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

Para style.scss

/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";

Para scripts, você ainda precisará adicionar o arquivo no arquivo angular-cli.json da seguinte maneira ( na versão Angular 6, essa edição precisa ser feita no arquivo angular.json ) :

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

Primeiro, você deve instalar o tether, jquery e bootstrap com estes comandos

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Depois de adicionar essas linhas no seu arquivo angular-cli.json (angular.json da versão 6 em diante)

  "styles": [
    "styles.scss",
    "../node_modules/bootstrap/scss/bootstrap-flex.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ]

Como ninguém se referiu à história oficial (equipe angular-cli) sobre como incluir o Bootstrap ainda: https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

Incluir Bootstrap

Bootstrap é uma estrutura CSS popular que pode ser usada em um projeto Angular. Este guia orientará você na adição do bootstrap ao seu projeto Angular CLI e na sua configuração para usar o bootstrap.

Usando CSS

Começando

Crie um novo projeto e navegue até o projeto

ng new my-app
cd my-app

Instalando o Bootstrap

Com o novo projeto criado e pronto, você precisará instalar o bootstrap no seu projeto como uma dependência. Usando a --saveopção, a dependência será salva no package.json

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

Configurando o projeto

Agora que o projeto está configurado, ele deve ser configurado para incluir o CSS de autoinicialização.

• Abra o arquivo a .angular-cli.jsonpartir da raiz do seu projeto.
• Sob a propriedade, appso primeiro item dessa matriz é o aplicativo padrão.
• Há uma propriedade stylesque permite que estilos globais externos sejam aplicados ao seu aplicativo.
• Especifique o caminho para bootstrap.min.css

Deve ter a seguinte aparência quando você terminar:

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

Nota: Ao fazer alterações, .angular-cli.jsonvocê precisará reiniciar ng servepara selecionar as alterações na configuração.

Projeto de teste

Abra app.component.htmle adicione a seguinte marcação:

<button class="btn btn-primary">Test Button</button>

Com o aplicativo configurado, execute ng servepara executar seu aplicativo no modo de desenvolvimento. No seu navegador, navegue até o aplicativolocalhost:4200 . Verifique se o botão com estilo de inicialização aparece.

Usando o SASS

Começando

Crie um novo projeto e navegue até o projeto

ng new my-app --style=scss
cd my-app

Instalando o Bootstrap

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

Configurando o projeto

Crie um arquivo vazio _variables.scssno src/.

Se você estiver usando bootstrap-sass, adicione o seguinte a _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

Em styles.scssadicionar o seguinte:

// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

Projeto de teste

Abra app.component.htmle adicione a seguinte marcação:

<button class="btn btn-primary">Test Button</button>

Com o aplicativo configurado, execute ng servepara executar seu aplicativo no modo de desenvolvimento. No seu navegador, navegue até o aplicativo localhost:4200. Verifique se o botão com estilo de inicialização aparece. Para garantir que suas variáveis ​​sejam usadas, abra _variables.scsse adicione o seguinte:

$brand-primary: red;

Retorne o navegador para ver a cor da fonte alterada.

Atualização v1.0.0-beta.26

Você pode ver no documento a nova maneira de importar bootstrap aqui

Se ainda assim não funcionar, reinicie com o comando ng serve

1.0.0 ou versões inferiores:

No seu arquivo index.html, você só precisa do link de bootstrap css (não precisa de scripts js)

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

E

npm install ng2-bootstrap --save
npm install moment --save

Depois de instalar o ng2-bootstrap em my_project / src / system-config.ts:

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap': {
    defaultExtension: 'js'
  },
  'moment':{
     format: 'cjs'
  }
};

E em my_project / angular-cli-build.js:

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

Não esqueça este comando para colocar seu módulo no fornecedor:

ng build

importar de outro módulo que seja o mesmo princípio.

Acho que os métodos acima foram alterados após o lançamento, confira este link

https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md

iniciar projeto

npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap

instalar ng-bootstrap e bootstrap

npm install ng2-bootstrap bootstrap --save

abra src / app / app.module.ts e adicione

import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
   ...
   imports: [AlertModule, ... ],
    ... 
})

abra angular-cli.json e insira uma nova entrada na matriz de estilos

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

abra src / app / app.component.html e teste todos os trabalhos adicionando

<alert type="success">hello</alert>

Etapas para o Bootstrap 4 no Angular 5

1. Criar projeto Angular 5

   do novo AngularBootstrapTest

2. Mover para o diretório do projeto

   cd AngularBootstrapTest

3. Baixar bootstrap

   npm install bootstrap

4. Adicionar Bootstrap ao projeto

   4.1 open .angular-cli.json

   4.2 encontre a seção "styles" no json

   4.3 adicione o caminho do bootstrap css como abaixo

   .

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

Agora você adicionou com êxito o bootstrap css no projeto angular 5

Teste de inicialização

5. abrir src/app/app.component.html
6. adicionar componente do botão de inicialização

.

<button type="button" class="btn btn-primary">Primary</button>

você pode consultar os estilos de botão aqui ( https://getbootstrap.com/docs/4.0/components/buttons/ )

7. Salve o arquivo

8. executar o projeto

   ng serve --abre

Agora você verá o botão de estilo de inicialização na página

Nota: se você adicionou o caminho de autoinicialização após o ng servir , você deve parar e executar novamente o ng servir para refletir as alterações

Como isso se tornou tão confuso e as respostas aqui são totalmente misturadas, vou sugerir que você vá com o ui-team oficial para o repo BS4 (sim, existem muitos desses repos para o NG-Bootstrap.

Basta seguir as instruções aqui https://github.com/ng-bootstrap/ng-bootstrap para obter o BS4.

Citando a partir da lib:

Esta biblioteca está sendo construída do zero pela equipe ui-bootstrap. Estamos usando o TypeScript e visando a estrutura CSS do Bootstrap 4.

Como no Bootstrap 4, esta biblioteca é um trabalho em andamento. Confira nossa lista de problemas para ver todas as coisas que estamos implementando. Sinta-se livre para fazer comentários lá.

Apenas copie e cole o que existe para isso:

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

Uma vez instalado, você precisa importar nosso módulo principal:

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

A única parte restante é listar o módulo importado no seu módulo de aplicativo. O método exato será ligeiramente diferente para o módulo raiz (de nível superior) para o qual você deve terminar com o código semelhante a (observe NgbModule.forRoot ()):

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

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Outros módulos em seu aplicativo podem simplesmente importar o NgbModule:

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

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgbModule, ...], 
})
export class OtherModule {
}

Este parece ser o comportamento mais consistente de longe

1. Instalar inicialização

   npm install bootstrap@next

2. Adicione código ao .angular-cli.json:

   "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"
   ],

3. Por último, adicione bootstrap.css ao seu código style.scss

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

4. Reinicie seu servidor local

Execute os seguintes passos:

1. npm install --save bootstrap

2. E no seu .angular-cli.json, adicione à seção de estilos:

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

Depois disso, você deve reiniciar seu servidor de ng

Aproveitar

1. Instale o Bootstrap usando o npm

   npm install bootstrap

2.Instale o Popper.js

npm install --save popper.js

3.Goto angular.json no projeto Angular 6 / .angular-cli.json no Angular 5 e adicione os listados:

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

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

Tente isto

npm install bootstrap@next

https://github.com/angular/angular-cli#global-library-installation

Você também pode assistir a este vídeo de Mike Brocchi, que contém informações úteis sobre como adicionar bootstrap ao seu projeto gerado pelo Angular-Cli. https://www.youtube.com/watch?v=obbdFFbjLIU (cerca de minutos 13:00)

1. Executar no bash npm install ng2-bootstrap bootstrap --save
2. Adicione / altere o seguinte em angular-cli.json
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ],

Abra Terminal / prompt de comando no diretório de projeto respectivo e digite o seguinte comando.

npm install --save bootstrap

Em seguida, abra o arquivo .angular-cli.json, procure

"styles": [ "styles.css" ],

mude isso para

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

Tudo feito.

Agora, com a nova versão ng-bootstrap 1.0.0-beta.5, suporta a maioria das diretivas Angular nativas com base na marcação e CSS do Bootstrap.

A única dependência necessária para trabalhar com isso é bootstrap. Não há necessidade de usar jquery e popper.js dependências .

O ng-bootstrap substitui completamente a implementação JavaScript dos componentes. Então você não precisa incluirbootstrap.min.js na seção de scripts em seu arquivo .angular-cli.json.

siga estas etapas ao integrar o bootstrap ao projeto gerado com a versão mais recente do angular-cli.

• Inculde bootstrap.min.cssem sua seção de estilos .angular-cli.json.

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

• Instale a dependência do ng-bootstrap .

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

• Adicione isso à sua classe de módulo principal.

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

• Inclua o seguinte na seção principal de importações de módulos.

  @NgModule({
     imports: [NgbModule.forRoot(), ...],
  })

• Faça o seguinte também no (s) seu (s) submódulo (s) se você estiver usando componentes ng-bootstrap dentro dessas classes de módulos.

  import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
  
  @NgModule({
     imports: [NgbModule, ...],
  })

• Agora seu projeto está pronto para usar os componentes ng-bootstrap disponíveis.

1. Instale o bootstrap, popper.js

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

3. No src / styles.css , importe o estilo do bootstrap

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

Etapa 1:
npm install bootstrap@latest --save-dev instalará a versão mais recente do bootstrap. No entanto, a versão especificada pode ser instalada adicionando o número da versão

Etapa 2: abra styles.css e adicione o seguinte @import "~bootstrap/dist/css/bootstrap.css"

Para adicionar Bootstrap e Jquery, ambos

npm install bootstrap@3 jquery --save

Depois de executar este comando, vá em frente e verifique a pasta node_modules, para poder ver o bootstrap e o jquery adicionados.

angular-cliagora tem uma página wiki dedicada , onde você pode encontrar tudo o que precisa. TLDR, instale bootstrapvia npme adicione o link de estilos à seção "styles" no seu .angular-cli.jsonarquivo

Exemplo de trabalho no caso de usar angular-cli e css:

1.instalar inicialização

npm install bootstrap tether jquery --save

2.adicionar a .angular-cli.json

  "styles": [
    "../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"
  ],

instale o boostrap usando o npm

npm install boostrap@next --save

em seguida, verifique na pasta node_modules o arquivo boostrap.css (dentro de dist) normalmente o caminho é

"../node_modules/bootstrap/dist/css/bootstrap.css",

adicione este caminho | importar boostrap em style.css ou style.scss

@import "../node_modules/bootstrap/dist/css/bootstrap.css";  //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme

é isso aí.

Execute este comando a seguir dentro do projeto

npm install --save @bootsrap@4

e se você receber uma confirmação como esta

+ bootstrap@4.1.3
updated 1 package in 8.245s

Isso significa que o boostrap 4 foi instalado com sucesso. No entanto, para usá-lo, é necessário atualizar a matriz "styles" no arquivo angular.json.

Atualize-o da seguinte maneira para que a inicialização possa substituir os estilos existentes

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

Para garantir que tudo esteja configurado corretamente, execute ng serve > open browser at http://localhost:4200/ or a port you run the angular app > right click > inspect > under the head check the styles if you have bootsrap like shown belowe você poderá usar o boostrap.

Não vi este aqui:

@import 'bootstrap/scss/bootstrap.scss';

Acabei de adicionar esta linha no style.scss. No meu caso, eu também queria substituir as variáveis ​​de auto-inicialização.

Se você acabou de começar com angular e bootstrap, a resposta simples seria abaixo das etapas: 1. Adicione o pacote de nós do bootstrap como dependência do desenvolvedor

npm install --save bootstrap

2. importe a folha de estilo da auto-inicialização no arquivo angular.json.

   "styles": [ "projects/my-app/src/styles.scss", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

3. e você está pronto para usar o bootstrap para estilo, grade etc.

   <div class="container">My first bootstrap div</div>

A melhor parte disso que descobri foi que estamos dirigindo usando o bootstrap sem nenhuma dependência do módulo de terceiros. Podemos atualizar o bootstrap a qualquer momento apenas atualizando o comando npm install --save [email protected]etc.

Você tem várias maneiras de adicionar o Bootstrap 4 ao seu projeto Angular :

• Incluindo os arquivos CSS e JavaScript do Bootstrap na seção do arquivo index.html do seu projeto Angular com as tags e,

• Importando o arquivo CSS do Bootstrap no arquivo global styles.css do seu projeto Angular com uma palavra-chave @import.

• Adicionando os arquivos CSS e JavaScript do Bootstrap nas matrizes de estilos e scripts do arquivo angular.json do seu projeto

Executar este comando

npm install bootstrap@3

seu Angular.json

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

você pode instalar o bootstrap em angular usando o npm install bootstrapcomando

e o próximo caminho de inicialização da instalação em angular.jsonarquivo e style.cssarquivo.

você pode ler um blog completo sobre como instalar e configurar o bootstrap em angular, clique aqui para ler o blog completo sobre isso

Um exemplo de trabalho no caso de usar angular-cli:

npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install

Funciona para css e scss. Bootstrap v3 e v4 estão disponíveis.

Mais informações sobre esquemas de bootstrap, acesse aqui .