Integrar Angular 6 y Ng-Bootstrap 4

7 mayo, 2018
Category : Angular,Introduccion,programacion

Integrar Angular 6 y Ng-Bootstrap 4

Hola buenas a todos? hoy vamos a ver como se puede integrar Bootstrap (Ng-Bootstrap 4) con la ultima versión de Angular ( Angular 6), como ya sabrán, en la semana pasada se libero la ultima versión LTS de Angular, y con ello trajo algunos problemas con algunas dependencias, en este caso como lo es Bootstrap.

En un caso si no tenias actualizado Angular cli, al momento de intentar compilar, genera errores en las librerias de bootstrap.

¿Como solucionamos esto?

Primero ejecutamos los siguientes comandos

npm update -D

luego

npm update -S

Luego instalamos la ultima versión con el siguiente comando:

npm install -g @angular/cli@latest

Para estar mas tranquilos, también podemos ejecutar los siguientes comandos para actualizar todo:

ng update

ng update @angular/cli

Con eso tenemos actualizado todo y podemos empezar a crear nuevas aplicaciones.

Ahora crearemos un nuevo proyecto:

ng new demoBoostrao
cd demoBoostrao

Instalaremos ng-bootstrap via CLI:

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

Agregamos ng-bootstrap en nuestro module principal:

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

import { AppComponent } from './app.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

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

Nota: import > import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; si tu planeas usar “Form elements”

En styles.css agregar el min de Bootstrap para que funcione todo correctamente

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css';

Bien, si todo salio bien hasta ahora, podremos ver como queda implementado Bootstrap 4 en nuestro proyecto de forma correcta y sin problemas de dependencias.

Antes