Como adicionar bootstrap a um projeto angular-cli

234

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).

Jerome
fonte
Você os possui em seu arquivo system-config.ts? você tem que mapeá-los.
Mjwrazor 17/07/2016
1
Muitas das respostas abaixo recomendam o uso do ngx-bootstrap. Descobri que não é um substituto completo para os plugins jquery do Bootstrap e, às vezes, você ainda precisa usar os plugins jquery "nativos", como a funcionalidade de recolhimento nas tabelas. Nesse caso, procure uma das respostas abaixo que explique como importar explicitamente o script jquery do arquivo .angular-cli.json.
Christoph
Basta usar o ng-bootstrap ng-bootstrap.github.io/#/home
Liam

Respostas:

299

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.

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

    import { AlertModule } from 'ngx-bootstrap';
    ...
    @NgModule({
    ...
    imports: [AlertModule.forRoot(), ... ],
    ... 
    })
  2. 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"
    ],
  3. 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'
  }
};
pd farhad
fonte
6
O que é o ng2-bootstrap exatamente. o que significa adicionar bootstrap nativo ao angular 2? Desculpe, estou confuso e procurei, mas ainda estou confuso. por que não posso seguir as mesmas etapas para baixar o bootstrap em vez de usar um ng2-bootstrap de terceiros.
Mjwrazor
1
@mjwrazor é porque o bootstrap não é apenas sobre estilos. é uma estrutura de front-end. para ser claro, confira usando o componente de classificação com o ng2-bootstrap e pense nos códigos que você escreveria para implementá-lo.
Ali Ghanavatian 29/07
5
Apenas um pequeno aviso para futuros leitores: a Angular CLI mudou do SystemJS para o WebPack com beta.14. Esta resposta está desatualizada, pois fornece uma solução baseada no SystemJS.
jbandi
2
Obrigado pela idéia de usar o ng2-bootstrap, aqui encontrei um manual de instalação para angular cli, na página do github. github.com/valor-software/ng2-bootstrap/blob/development/docs/… No meu caso, faltava a chamada AlertModule.forRoot () nas importações.
Bruno.bologna 27/12/16
1
Eu tive o mesmo problema com o [email protected]& [email protected]. Seguindo estas etapas com a diferença de app.module.tsnão se referir ao ngx-bootstrap por 'ngx-bootstrap / ngx-bootstrap', mas por 'ngx-bootstrap', como neste exemplo no github, corrige meu problema.
Edmond
123

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.

Nelly Sattari
fonte
2
Enquanto digito, esta é a única solução que parece usar a versão mais recente do angular-cli.
Freethebees
1
O bootstrap.js certamente NÃO é necessário! Como você não deseja usar o juqery bootstrap.js para isso, instale as diretivas ng2 do bootstrap.
Pascal
2
Se você quiser usar o javascript de inicialização, em vez de apenas o .css, também precisará incluir suas dependências na matriz de scripts: "../node_modules/jquery/dist/jquery.slim.js", "../ node_modules / corda / dist / js / tether.js "" ../node/modules/bootstrap/dist/js/bootstrap.js"
Howard Swope
2
É melhor usar o bootstrap.bundle.js na sua declaração de scripts, que também possui popper.js.
Dejazmach
1
Para fazer o trabalho, não perca o último ponto, execute ng servenovamente. Além disso, por que a CLI Angular não pode adicionar isso automaticamente? Seria bom se tivéssemos uma opção para isso.
shaijut
58

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"
],
mahatmanich
fonte
5
IMHO esta também é uma ótima opção, especialmente com as versões mais recentes do angular-cli. A grande vantagem é que esse método não depende de pessoas atualizando a biblioteca a partir do pacote npm mencionado na resposta aceita; além disso, isso também nos permite substituir variáveis ​​de autoinicialização usando o SASS, sem apontar diretamente para arquivos CSS compilados.
18716 martin
2
Sim, é mais limpo e mais modular, por isso prefiro!
mahatmanich
Este documento não funciona para mim, todos os pré-requisitos a seguir, estou usando a versão mais recente do angular e do bootstrap e adicionei todas as alterações acima, não funcionou dessa maneira, mas trabalhou na adição de <link rel = "stylesheet" type = "text / css" href = "fornecedor / bootstrap / dist / css / bootstrap.min.css"> no index.html
har_shit 25/11/16
Isso está usando a configuração cli!
mahatmanich
7
um método mais limpo seria @import '~ bootstrap / dist / css / bootstrap'; Usando o sinal ~ para importar como um módulo diretamente da pasta node_modules. Encontre uma explicação aqui: stackoverflow.com/questions/39535760/…
AI
32

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"
  ]
Alberto Viezzi
fonte
2
você quis dizer $ projectRoot / .angular-cli.json?
21

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.

tilo
fonte
4
Esta solução não adicionar os arquivos javascript para inicialização, apenas o css
Robin van der Knaap
Veja esta outra história: github.com/angular/angular-cli/wiki/stories-global-lib . Ele descreve a adição de arquivos de script, usando o bootstrap 4 como exemplo.
Robin van der Knaap
$brand-primary: red;não funcionou para mim. No entanto, $primary: red;fez!
Johan Frick
Obrigado por explicar a diferença entre o bootstrap e o boostrap @ next :-)
Venkatesh Muniyandi
17

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.

Shigiang Liu
fonte
1
como isso torna o bootstrap capaz de usar o jquery? Eu fiz isso e isso não funciona.
Mjwrazor
exemplo finalmente encontrou isso e funcionou. Eu não conseguia descobrir isso por enquanto.
Mjwrazor
8

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>
shakram02
fonte
1
O método de Ahmed Hamdy funciona, aparentemente a atualização de código ocorreu agora. Atualizado sua mensagem com solução.
28416 PeterH
1
se você quiser usar o Bootstrap 4, precisará alterar "npm install ng2-bootstrap bootstrap --save" TO BE "npm install ng2-bootstrap [email protected] --save" .... não inteiramente óbvio na documentação (faça uma pesquisa por 'card-' no bootstrap.css para saber se funcionou) ... observe que atualmente é o Alpha 6, isso mudará sem dúvida ... verifique o site do bootstrap para obter as instruções atuais do npm
72GM
8

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

  1. abrir src/app/app.component.html
  2. 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/ )

  1. Salve o arquivo

  2. 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

rashidnk
fonte
6

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

Jimmy Kane
fonte
6
  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

Xjw919
fonte
Embora o ngx-bootstrap seja bom para os componentes que ele suporta, às vezes você ainda precisa usar plugins jquery "nativos", como a funcionalidade de recolhimento nas tabelas. Então você ainda precisa importar explicitamente o script jquery, que esta resposta mostra.
Christoph
Promovido para o ponto 4 (Reinicie o servidor local) Estou usando ---> npm install ngx-bootstrap bootstrap --save
Palanikumar
5

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

Léger Djiba
fonte
4
  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"
        ]
Konvivial
fonte
2

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)

Nelly Sattari
fonte
2
  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" ],
srijishks
fonte
2

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.

Raj Sahoo
fonte
2

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.

JLS
fonte
2
  1. Instale o bootstrap, popper.js

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

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

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

FEUJIO Marie Therese
fonte
2

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"

kireeti9
fonte
Principalmente a melhor resposta atual, exceto remove --save-dev. Como você deseja que o bootstrap seja implantado com seu aplicativo.
Sydwell 12/02/19
2

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.

Alexander Zaldostanov
fonte
Legal adicionando Jquery também.
Surya R Praveen
1

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

Claudiu Constantin
fonte
1

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"
  ],
ilia
fonte
1

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í.

Chanaka Fernando
fonte
Que tal colocá-lo em uma variedade de estilos angular-cli.json? Não é necessário?
CodyBugstein 30/10/2015
Não, não é necessário. desde que incluímos nosso arquivo style.css nessa matriz. podemos importar outros arquivos css em nosso style.css ou style.scss "@import" ~@angular/material/prebuilt-themes/indigo-pink.css ";" @import "../node_modules/bootstrap/dist/css /bootstrap.css ";
Chanaka Fernando
Ah ok .. mas acho que inclusive em angular-cli.jsoné provavelmente melhor
CodyBugstein
@CodyBugstein Não tenho certeza se é necessariamente "melhor" adicioná-lo ao .angular-cli.json. Aqui estão algumas razões pelas quais você pode querer adicionar importações ao seu arquivo styles.scss: 1) Você pode aplicar facilmente um tema de inicialização como o exemplo do Bootswatch aqui: github.com/thomaspark/bootswatch 2) A edição de arquivos .json é mais complicada do que editar arquivos .scss porque os arquivos .json não permitem comentários e 3) os novos desenvolvedores podem considerar o styles.scss como um ponto de partida para todo o CSS, em vez do .angular-cli.json.
Keith
1

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. insira a descrição da imagem aqui

Tadele Ayelegn
fonte
1

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.

Andris
fonte
1

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

  2. 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.

ichbinpradnya
fonte
1

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

Farid Rajab
fonte
1

Executar este comando

npm install bootstrap@3

seu Angular.json

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
],
Vikas Katariya
fonte
1

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

bhavesh ajani
fonte
0

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 .

Slupek
fonte