twitter-bootstrap - instalar - ngx-bootstrap angular 4

¿Cómo usar el programa de arranque 4 en el angular 2?

Question

Estoy construyendo una aplicación angular 2 escrita en texto mecanografiado. Utilizaría el marco de bootstrap 4 en combinación con alguna temática personalizada, ¿es esto posible?

El paquete npm "ng2-bootstrap" no funciona, ya que no me permite usar las clases bootstrap css, sino que proporciona componentes personalizados. ( http://github.com/valor-software/ng2-bootstrap )

En mi proyecto angular 2 estoy usando sass, ¿sería posible construir bootstrap 4 desde la fuente, ya que también está usando sass para el diseño?

Answer 1

En angular 6 no use npm i bootstrap @ next - save puede funcionar, pero a veces no sería mejor agregar esto:

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

Answer 2

Las opciones anteriores funcionarán, sin embargo, uso este enfoque a través de NPM:

1. Navega a: Bootstrap 4 y recupera el comando npm

2. Ejecute el comando NPM obtenido desde el paso 1 en su proyecto, es decir,

   npm install [email protected] --save

3. Después de instalar la dependencia anterior, ejecute el siguiente comando npm que instalará el módulo de arranque npm install --save @ng-bootstrap/ng-bootstrap Puede leer más sobre esto here

4. Agregue la siguiente importación a la aplicación.module import {NgbModule} from ''@ng-bootstrap/ng-bootstrap''; y agregue NgbModule a las imports

5. Su módulo de aplicación se verá así:

   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. Abra angular-cli.json e inserte una nueva entrada en la matriz de estilos:

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

7. Abra src / app / app.component.html y agregue

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

   o si desea utilizar la alerta ng, coloque lo siguiente en su app.component.html page

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

8. Ahora ejecuta tu proyecto y deberías ver el mensaje de alerta de arranque en el navegador.

NOTA: Puede leer más sobre los componentes ng aquí

Answer 3

Para usar cualquier biblioteca visual que necesite JQuery, solo haga lo siguiente:

• Agregue la biblioteca css en el índice;
• Agregue el archivo jquery js al índice;
• Agregue los archivos js de la biblioteca en el índice;
• Instale los archivos de definición de biblioteca (d.ts);
• Instale archivos de definiciones de jquery (d.ts);

Si la biblioteca no tiene archivos de definición, puede:

• Crea la definición tú mismo;
• Cree una variable global con el mismo nombre del objeto de la biblioteca, solo para no obtener errores del compilador;
• Usar con errores ( esta es la peor opción );

Ahora puede usar la biblioteca dentro de Typescript;

Answer 4

Primero, vaya a su directorio de proyectos y siga los pasos dados a continuación.

1) npm install --save @ng-bootstrap/ng-bootstrap (ejecuta este comando en el indicador de comando del nodo js)

2) npm install [email protected] (luego ejecuta esto)

3) import {NgbModule} from ''@ng-bootstrap/ng-bootstrap'' (escriba esto en la aplicación module.ts)

4) Si el módulo es su módulo raíz, incluya esto

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

    (or)

Si no es un módulo raíz

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

5) Escribe esto en system.config.js

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

6) Agregar en Index.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" />`

Answer 5

Puede usar npm para instalar la última versión de arranque. Esto se puede hacer usando el comando:

npm install [email protected]

Y después de esto, es posible que deba importar bootstrap.css en su archivo css principal. Que será styles.css, si está usando angular-cli.

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

Si quiere saber más, utilice el enlace: http://technobytz.com/install-bootstrap-4-using-npm.html

Answer 6

Yo sugeriría:

• Simplemente incluye un enlace al archivo CSS de Bootstrap en su página index.html
• Uso de ng-bootstrap : un conjunto dedicado de directivas Angular 2 para partes en las que se necesita un comportamiento dinámico. De esta forma no es necesario importar / configurar jQuery ni preocuparse por el JavaScript de Bootstrap.

Answer 7

ng add se ha introducido con Angular 6. Para instalar Bootstrap 4 (ng-bootstrap 2.0.0)

ng add @ng-bootstrap/schematics

No olvide reiniciar su aplicación con ng serve .

Answer 8

Bootstrap4 alpha para Angular2 CLI (también funciona para Angular4 CLI)

Si está utilizando angular2 cli / angular 4 cli haga lo siguiente:

npm i bootstrap@next --save

Esto agregará bootstrap 4 a su proyecto.

Luego vaya a su src/style.scss o src/style.css e importe bootstrap allí:

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";

Si está utilizando scss, asegúrese de cambiar su estilo predeterminado a scss en .angular-cli.json :

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

Componentes Bootstrap JS

Para que los componentes de Bootstrap JS funcionen, aún necesitará importar bootstrap.js en .angular-cli.json bajo los scripts (esto debería suceder automáticamente) :

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

Actualización 2017/09/13: Boostrap 4 Beta ahora está utilizando popper.js en lugar de tether.js. De modo que, dependiendo de la versión que esté utilizando, importe tether.js (alpha) o popper.js (beta) en sus scripts. Gracias por la información de @MinorThreat