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 dans 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 build avec -prod
indicateur, toutes ces dépendances ont disparu dist/vendor
(surprise!).
Comment nous sommes censés gérer un tel scénario (c'est-à-dire le chargement de 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 où aller ...
utiliser un CDN? mais nous préférons servir ces fichiers pour garantir qu'ils seront disponibles
copier les dépendances
dist/vendor
après notreng build -prod
? Mais cela semble que quelque chose d'angular-cli devrait fournir car il «s'occupe» de la partie de construction?en ajoutant jquery, bootstrap et tether dans
src/system-config.ts
et en quelque sorte les tirer dans notre bundlemain.ts
? Mais cela semblait faux é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).