Cómo agregar bootstrap a un proyecto angular-cli
Queremos usar bootstrap 4 (4.0.0-alpha.2) en nuestra aplicación generada con angular-cli 1.0.0-beta.5 (con nodo v6.1.0).
Después de obtener bootstrap y sus dependencias con npm, nuestro primer enfoque consistió en agregarlos enangular-cli-build.js
:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
e importarlos en nuestroindex.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>
Esto funcionó bien conng serve
pero tan pronto como produjimos una compilación con-prod
marcar todas estas dependencias desaparecieron dedist/vendor
(¡sorpresa!)
¿Cómo estamos destinados a manejar tal escenario (es decir, cargar scripts de bootstrap) en un proyecto generado con angular-cli?
Teníamos los siguientes pensamientos pero realmente no sabemos qué camino tomar ...
usa un CDN? pero preferimos servir estos archivos para garantizar que estarán disponibles
copiar dependencias adist/vendor
tras nuestrong build -prod
? Pero eso parece algo angular-cli debería proporcionar, ya que 'se encarga' de la parte de construcción.
agregando jquery, bootstrap y tether en src / system-config.ts y de alguna manera los incluimos en nuestro paquete en main.ts? Pero eso parecía incorrecto teniendo en cuenta que no los vamos a usar explícitamente en el código de nuestra aplicación (a diferencia de moment.js o algo así como lodash, por ejemplo)