Incluindo dependências na minha aplicação Angular

  • Autor Autor ulises2010
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
U

ulises2010

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola, estoy desarrollando una aplicación en Angular y no se bien como son las buenas prácticas en cuanto a las dependencias, es decir.

Mi proyecto usa bootstrap y yo he hecho un

Inserir CODE, HTML ou PHP:
 npm install bootstrap

que me ha creado una carpeta bootstrap en node_modules con un montón de archivos.

En un primer momento intenté linkarlo desde el index incluyendo esto:

Inserir CODE, HTML ou PHP:
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">

Pero no me cargaba nada, así que leyendo he visto que node_modules es un directorio privado y que los módulos que se necesiten se deben copiar a otro lado. Así que yo me he copiado toda la carpeta de bootstrap a assets y sustituido el código anterior por este:

Inserir CODE, HTML ou PHP:
<link rel="stylesheet" href="./assets/global/plugins/bootstrap/dist/css/bootstrap.min.css">

y todo funciona bien, pero se me plantea una duda.

Verdaderamente con ese código yo sólo estoy cargando un archivo (bootstrap.min.css) ¿sería suficiente y recomendable copiar únicamente ese fichero a assets?.. por otro lado, una de las cosas buenas de npm es que carga también las dependencias que sean precisas, pero si yo luego voy y lo saco de donde las ha inclulido no se si fallará algo....
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Cuando instales una dependencia con npm no olvides usar el comando --save para que se guarde en el archivo package.json. Luego para usar esa dependencia en tu proyecto te sugiero que aprendas Webpack, ya que con una sola línea de código, usando import, puedes llamar a esa dependencia sin necesidad de poner rutas largas, solo importas con el nombre con el que se ha guardado en el package.json y node va saber donde ubicarlo.
 
Angular buenas practicas

La documentación official de angular, recomienda usar Angular CLI.

Para tener que evitar haciendo lo que estas haciendo, importarlas manualmente. No esta mal, pero ralentiza el proceso de desarrollo.

Angular Docs
 
Última edição:
Yo sinceramente no uso Bootstrap porque no me gusta, uso materialize css y es 100% recomendable que uses Angular Cli, esto te crea un archivo angular-cli.json y al hacer por ejemplo npm i materialize o bootstrap --save vas a ese archivo y escribes tus styles y scripts externos que vas a usar en su arreglo correspondiente por ejemplo:

Inserir CODE, HTML ou PHP:
"styles": [
 "styles.css",
 "../node_modules/materialize-css/dist/css/materialize.css",
  "../node_modules/mdi/css/materialdesignicons.css"
],
"scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/materialize-css/dist/js/materialize.js",
 "../node_modules/moment/moment.js"
],

Saludos :encouragement:
 
Con Webpack simplemente pones esto al inicio del documento:
// css
import 'bootstrap';
import 'materialize';

// libraries
import jquery from 'jQuery';
import moment from 'moment-js';

y listo.
 
Última edição:
Voltar
Topo