Comment ajouter bootstrap à un projet angular-cli

Question

Nous voulons utiliser bootstrap 4 (4.0.0-alpha.2) dans notre application générée avec angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

Après avoir obtenu bootstrap et ses dépendances avec npm, notre première approche a consisté à les ajouter en angular-cli-build.js :

'bootstrap/dist/**/*.min.+(js|css)',  
'jquery/dist/jquery.min.+(js|map)',  
'tether/dist/**/*.min.+(js|css)',

et les importer dans notre 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>

Cela a bien fonctionné avec ng serve mais dès que nous avons produit une construction avec -prod flag toutes ces dépendances ont disparu de dist/vendor (surprise !).

Comment devons-nous gérer un tel scénario (c'est-à-dire le chargement des scripts de démarrage) dans un projet généré avec angular-cli ?

Nous avons eu les pensées suivantes, mais nous ne savons pas vraiment quelle direction prendre...

• utiliser un CDN ? mais nous préférons servir ces fichiers pour garantir qu'ils seront disponibles

• copier les dépendances dans dist/vendor après notre ng build -prod ? Mais cela semble être quelque chose qu'angular-cli devrait fournir puisqu'il "s'occupe" de la partie construction ?

• ajout de jquery, bootstrap et tether en src/system-config.ts et d'une manière ou d'une autre, les mettre dans notre paquet en main.ts ? Mais cela ne semblait pas correct étant donné que nous n'allons pas les utiliser explicitement dans le code de notre application (contrairement à moment.js ou quelque chose comme lodash, par exemple).

Answer 1

MISE À JOUR IMPORTANTE : ng2-bootstrap est maintenant remplacé par ngx-bootstrap

ngx-bootstrap prend en charge Angular 3 et 4.

Mise à jour : 1.0.0-beta.11-webpack ou versions supérieures

Tout d'abord, vérifiez votre angular-cli avec la commande suivante dans le terminal :

ng -v

Si votre angular-cli est supérieure à la version 1.0.0-beta.11-webpack vous devez alors suivre les étapes suivantes :

1. Installer ngx-bootstrap y bootstrap :

   npm install ngx-bootstrap bootstrap --save

Cette ligne installe actuellement Bootstrap 3, mais peut installer Bootstrap 4 à l'avenir. Gardez à l'esprit ngx-bootstrap prend en charge les deux versions.

2. Ouvrir src/app/app.module.ts et ajoutez :

   import { AlertModule } from 'ngx-bootstrap';
   ...
   @NgModule({
   ...
   imports: [AlertModule.forRoot(), ... ],
   ... 
   })

3. Ouvrir angular-cli.json (pour angular6 et les versions ultérieures, le nom du fichier a été changé en angular.json ) et insérer une nouvelle entrée dans le styles le tableau :

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

4. Ouvrir src/app/app.component.html et ajoutez :

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

1.0.0-beta.10 ou des versions inférieures :

Et, si votre angular-cli version est 1.0.0-beta.10 ou moins, vous pouvez alors utiliser les étapes suivantes.

Tout d'abord, allez dans le répertoire du projet et tapez :

npm install ngx-bootstrap --save

Ensuite, ouvrez votre angular-cli-build.js et ajoutez cette ligne :

vendorNpmFiles: [
   ...
   'ngx-bootstrap/**/*.js',
   ...
]

Maintenant, ouvrez votre src/system-config.ts puis écrivez :

const map:any = {
   ...
   'ngx-bootstrap': 'vendor/ngx-bootstrap',
   ...
}

...et :

const packages: any = {
  'ngx-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ngx-bootstrap.js'
  }
};

Answer 2

Recherche du mot clé > Installation de la bibliothèque mondiale sur https://github.com/angular/angular-cli vous aide à trouver la réponse.

Conformément à leur document, vous pouvez suivre les étapes suivantes pour ajouter la bibliothèque Bootstrap.

Installez d'abord Bootstrap depuis npm :

npm install bootstrap@next

Ensuite, ajoutez les fichiers script nécessaires à apps[0].scripts dans le fichier angular-cli.json :

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

Enfin, ajoutez le CSS Bootstrap au tableau apps[0].styles :

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

Redémarrez ng serve si vous l'exécutez, et Bootstrap 4 devrait fonctionner sur votre application.

C'est la meilleure solution. Mais si vous ne redémarrez pas ng serve, ça ne marche jamais. Il est fortement recommandé de faire cette dernière action.

Answer 3

Faites ce qui suit :

npm i bootstrap@next --save

Cela ajoutera bootstrap 4 à votre projet.

Ensuite, allez dans votre src/style.scss o src/style.css (choisissez celui que vous utilisez) et importez-y bootstrap :

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

Pour style.scss

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

Pour les scripts, vous devrez toujours ajouter le fichier dans le fichier angular-cli.json comme suit ( Dans Angular version 6, cette modification doit être effectuée dans le fichier angular.json ) :

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

Answer 4

Tout d'abord, vous devez installer tether, jquery et bootstrap avec les commandes suivantes

npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 

Après avoir ajouté ces lignes dans votre fichier angular-cli.json (angular.json à partir de la version 6)

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

Answer 5

Mise à jour v1.0.0-beta.26

Vous pouvez voir sur la doc pour la nouvelle façon d'importer bootstrap aquí

Si cela ne fonctionne toujours pas, redémarrez avec la commande ng serve

1.0.0 ou des versions inférieures :

Dans votre fichier index.html vous avez juste besoin du lien bootstrap css (pas besoin de scripts js).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Y

npm install ng2-bootstrap --save
npm install moment --save

Après avoir installé ng2-bootstrap en mon_projet/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'
  }
};

Et dans mon_projet/angular-cli-build.js :

module.exports = function (defaults) {
return new Angular2App(defaults, {
    vendorNpmFiles: [
        'ng2-bootstrap/**/*',
        'moment/moment.js'
    ]
});
};

N'oubliez pas cette commande pour placer votre module dans le vendeur :

ng build

pour importer d'un autre module qui est le même principe.