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 em angular-cli-build.js
:
'bootstrap/dist/**/*.min.+(js|css)',
'jquery/dist/jquery.min.+(js|map)',
'tether/dist/**/*.min.+(js|css)',
e importá-los em nossa 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>
Isso funcionou bem, ng serve
mas assim que produzimos uma compilação com -prod
flag, todas essas dependências desapareceram dist/vendor
(surpresa!).
Como pretendemos lidar com esse cenário (por exemplo, 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 veicular esses arquivos para garantir que eles estarão disponíveis
copiar dependências para
dist/vendor
depois da nossang build -prod
? Mas isso parece algo que o angular-cli deve fornecer, pois "cuida" da parte da construção?adicionando jquery, bootstrap e tether
src/system-config.ts
e de alguma forma puxá-los para o nosso pacotemain.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).