Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Arquivos e plugins de terceiros

Em um projeto de dashboard pretendo utilizar um tema que comprei na internet por exemplo. Este tema em seu blank page, me lista N coisas para adicionar em meu index.html para que a página tenha sua estrutura conforme exemplo.

Vou listar alguns arquivos aqui, para exemplificar melhor:

<!-- Stylesheets -->
  <link rel="stylesheet" href="../../../global/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../../global/css/bootstrap-extend.min.css">
  <link rel="stylesheet" href="../../assets/css/site.min.css">
  <!-- Plugins -->
  <link rel="stylesheet" href="../../../global/vendor/animsition/animsition.css">
  <link rel="stylesheet" href="../../../global/vendor/asscrollable/asScrollable.css">
  <link rel="stylesheet" href="../../../global/vendor/switchery/switchery.css">

E alguns js de tbm de exemplo:

<!-- Core  -->
  <script src="../../../global/vendor/babel-external-helpers/babel-external-helpers.js"></script>
  <script src="../../../global/vendor/jquery/jquery.js"></script>
  <script src="../../../global/vendor/tether/tether.js"></script>
  <!-- Plugins -->
  <script src="../../../global/vendor/switchery/switchery.min.js"></script>
  <script src="../../../global/vendor/intro-js/intro.js"></script>

Diante, disso me surgiu uma dúvida:

  • Onde devo colocar estes arquivos de terceiros para que no build ele consiga ainda levar esses em consideração para que tudo continue funcionando?

PS: Coloquei o caminho href e src conforme esta na blankpage de exemplo... Mas assim que souber o caminho correto dos arquivos todos esses serão corrigidos.

6 respostas

Se você esta usando Angular 2, precisa colocá-los como você fez, diretamente no index.html. Se você usa Angular 2.2 para cima (inclusive até Angular 4) terá que importá-los via Webpack.

Há um exemplo aqui:

https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

São bastante configurações que você precisa fazer. No meio do projeto a equipe do Angular decidiu usar Webpack.

Uma dica para você aprender sobre webpack é assistir a parte 2 do curso de Vue.js. Nele, explico como importar bootstrap, jquery e CSS de terceiros. Como Angular 4 usa webpack, esse conhecimento pode lhe ser útil, pois é o mesmo arquivo de configuração.

Estou usando Angular4 mesmo, vou ver os videos então!

Valeu!

Beleza, depois me diz se ajudou. O conceito é igual ao que você terá que fazer no Angular 4. Mas vendo essa parte e consultado documentações ficará mais claro para você essas configurações.

É esse capítulo que precisa assistir:

https://cursos.alura.com.br/course/vue-parte2/task/24762

Abraço meu aluno!

Um detalhe, estou usando angular-cli, mesmo assim uso webpack? pois varias vezes já tive que adicionar um css ou js no arquivo angular-cli.json

solução!

Se vc usa o angular cli estará usando webpack sim.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software