Como adicionar bootstrap a um projeto angular-cli
Queremos usar o bootstrap 4 (4.0.0-alpha.2) em nosso aplicativo gerado com angular-cli 1.0.0-beta.5 (com nó v6.1.0).
Após obter o bootstrap e suas dependências com o npm, nossa primeira abordagem consistiu em adicioná-los aoangular-cli-build.js
:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
e importá-los em nossaindex.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>
Isso funcionou bem comng serve
mas assim que produzimos uma compilação com-prod
sinalizar todas essas dependências desapareceram dedist/vendor
(surpresa !).
Como pretendemos lidar com esse cenário (ou seja, carregando scripts de autoinicialização) em um projeto gerado com angular-cli?
Tivemos os seguintes pensamentos, mas na verdade não sabemos para onde ir ...
usar uma CDN? mas preferimos exibir esses arquivos para garantir que eles estarão disponíveis
copiar dependências paradist/vendor
depois do nossong build -prod
? Mas isso parece algo que o angular-cli deve fornecer, pois "cuida" da parte da construção?
adicionando jquery, bootstrap e tether no src / system-config.ts e, de alguma forma, atraí-los para o nosso pacote no main.ts? Mas isso parecia errado, considerando que não vamos usá-los explicitamente no código do aplicativo (diferente do moment.js ou algo como lodash, por exemplo)