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)

Respuestas a la pregunta(27)

Su respuesta a la pregunta