Vogliamo usare bootstrap 4 (4.0.0-alpha.2) nella nostra app generata con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).
Dopo aver ottenuto bootstrap e le sue dipendenze con npm, il nostro primo approccio consisteva nell'aggiungerle in angular-cli-build.js
:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
e importali nel nostro 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>
Questo ha funzionato bene ng serve
ma non appena abbiamo prodotto un build con -prod
flag tutte queste dipendenze sono scomparse dist/vendor
(sorpresa!).
In che modo intendiamo gestire tale scenario (ovvero caricare gli script bootstrap) in un progetto generato con angular-cli?
Abbiamo avuto i seguenti pensieri ma non sappiamo davvero quale strada fare ...
usare un CDN? ma preferiremmo servire questi file per garantire che saranno disponibili
copiare le dipendenze
dist/vendor
dopo il nostrong build -prod
? Ma sembra che qualcosa dovrebbe fornire angular-cli dal momento che "si prende cura" della parte di costruzione?aggiungendo jquery, bootstrap e tether in
src/system-config.ts
e in qualche modo inserirli nel nostro bundlemain.ts
? Ma sembrava sbagliato considerando che non li useremo esplicitamente nel codice della nostra applicazione (a differenza di moment.js o qualcosa come lodash, per esempio).