Como utilizar o bootstrap 4 no angular 2?

Bootstrap4 alpha para Angular2 CLI (também funciona para Angular4 CLI)

Se estiver a utilizar o angular2 cli/angular 4 cli faça o seguinte:

npm i bootstrap@next --save

Isto irá adicionar bootstrap 4 ao seu projecto.

Em seguida, vá para o seu ficheiro src/style.scss ou src/style.css e importação de 'bootstrap' para lá:

Pelo estilo.css

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

Pelo estilo.scss

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

Se estiver a utilizar scss, certifique-se que muda o seu estilo por omissão para scss em .angular-cli.json:

  "defaults": {
    "styleExt": "scss",
    "component": {}
  }

Componentes de JS de inicialização

Para os componentes de JS Bootstrap funcionarem, terá de importar bootstrap.js para .angular-cli.json em scripts (isto deve acontecer automaticamente):

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

Actualizar 2017/09/13: Boostrap 4 Beta está agora a usar popper.js em vez de amarra.js. Então, dependendo da versão que você está usando importar qualquer um dos cabos.js (alpha) ou popper.js (beta) em seus scripts.Obrigado pelo aviso. @MinorThreat

As opções acima irão funcionar, no entanto, Uso esta abordagem através do NPM:

1. navegar para: Bootstrap 4 e obter o comando npm

2. Execute o comando NPM obtido do Passo 1 do seu projecto I. e

   npm install [email protected] --save

3. Depois de instalar a dependência acima, execute o seguinte comando npm que irá instalar o módulo de inicialização npm install --save @ng-bootstrap/ng-bootstrap Você pode ler mais sobre isso aqui

4. adicionar a seguinte importação em app.Módulo import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; e adicionar NgbModule ao imports

5. O teu módulo de aplicações será assim:

   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
   
   @NgModule({
      declarations: [
      AppComponent,
      WeatherComponent
   ],
     imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     NgbModule.forRoot(), // Add Bootstrap module here.
   ],
     providers: [],
     bootstrap: [AppComponent]
   })
   
   export class AppModule { }
   

6. Abrir angular-cli.JSON e inserir um novo item na lista de estilos:

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

7. Abrir src/app / app.componente.html e adicionar

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

   Ou se gostaria de utilizar a indicação ng coloque o seguinte na sua app.component.html page

   <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert>
   

8. Agora execute o seu projecto e deverá ver a mensagem de alerta de inicialização no navegador.

Nota: pode ler mais sobre os Componentes aqui

• incluindo simplesmente uma ligação ao ficheiro CSS do Bootstrap na sua index.html Página
• utilizando ng-bootstrap - um conjunto específico de directivas angulares 2 para as partes em que é necessário um comportamento dinâmico. Desta forma, você não precisa importar / configurar jQuery nem se importar com o JavaScript do Bootstrap.

Pode usar o MPN para instalar a versão mais recente do bootstrap. Isto pode ser feito usando o comando:

npm install [email protected]

E depois disto você pode ter que importar bootstrap.css no seu ficheiro css principal. Que serão estilos.css, se estiver a usar o angular-cli.

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

Se quiser saber mais, por favor use o link: http://technobytz.com/install-bootstrap-4-using-npm.html

Primeiro vai para o directório do seu projecto e segue os passos abaixo indicados.

1) npm install --save @ng-bootstrap/ng-bootstrap (Execute este comando na linha de comandos js prompt)

2)npm install [email protected] (Próxima execução isto)

3)import {NgbModule} from '@ng-bootstrap/ng-bootstrap'(escreva isto no módulo app.ts)

4) Se o módulo for o seu módulo root, inclua este

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

    (or)

Se não for o módulo root

`@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...]
})`

5) escreva isto no sistema.configuracao.js

`map: {
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-
bootstrap/bundles/ng-bootstrap.js',
}`

6) Adicionar ao índice.html

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

ng add foi introduzido com Angular 6. Para instalar Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

Não se esqueça de reiniciar a sua aplicação com ng serve.

No angular 6 não use npm I bootstrap@next -- save may iria funcionar, mas às vezes não seria melhor adicionar estes:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script>