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.
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.
Respostas:
Desde que você use o Angular-CLI para gerar novos projetos, existe outra maneira de tornar o bootstrap acessível no Angular 2/4 .
$ npm install --save bootstrap
. A --save
opção fará com que o bootstrap apareça nas dependências."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">
app.component.html
. por favor diga.
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 bootstrap@4.0.0-alpha.6 --save
, apontando para o arquivo no seu styles.scss
arquivo, supondo que você esteja usando o SASS:
@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
@import
inseri-lo no seu arquivo SASS. Caso contrário, você pode tentar adicioná-lo ao seu vendor.ts
arquivo, mas não o estou usando no meu código.
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.json
arquivo
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
Finalmente, você apenas atualiza seu npm localmente usando o terminal
$ npm update
Procedimento com Angular 6+ e Bootstrap 4+:
npm install --save bootstrap@4.1.3
npm install --save jquery 1.9.1
npm audit fix
@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.
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