descargar - jQuery no está definido en bootstrap-sass

tooltip bootstrap

Question

Puse en marcha la aplicación Angular 2 usando angular-cli. Todo fue fácil hasta que decidí usar el modo de arranque. Simplemente copié el código para abrir el modal de nuestro otro proyecto que no usa angular-cli. Agregué dependencias jquery y bootstrap a los scripts en el archivo angular-cli.json. jQuery es reconocido en el proyecto, pero cuando trato de ejecutar this.$modalEl.modal(options) dentro del componente angular me sale un error de que jQuery is not defined .

En realidad, jQuery se importa al proyecto pero como un $ global. He cavado un poco y aparentemente bootstrap espera que jQuery se pase como una variable ''jQuery''. No le da el culo de rata alrededor de $ .

Podría exponer jQuery como una variable en el archivo webpack.config.js como lo hacemos en otro proyecto: (se omite una gran cantidad de código por brevedad)

var jQueryPlugin = {
  $: ''jquery'',
  jquery: ''jquery'',
  jQuery: ''jquery''
}

exports.root = root;

exports.plugins = {
  globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
    svg4everybody: ''svg4everybody/dist/svg4everybody.js''
  }))
}

pero el equipo de desarrollo de angular-cli decidió no dejar que otros desarrolladores se entrometan con los archivos de configuración del paquete web. ¡Gracias chicos! Muy considerado de tu parte.

Intenté importar jQuery directamente en el componente Angular y muchas otras cosas mencionadas aquí https://github.com/angular/angular-cli/issues/3202 (agregando importaciones al archivo vendor.ts y luego agregando vendor.ts a scripts array en angular-cli.json) pero nada funciona.

Para ser honesto, estoy bastante enojado porque un tema tan trivial como agregar dependencia jquery para usar con bootstrap en angular-cli es un campo minado.

¿Has tratado con un problema similar?

Answer 1

No he usado específicamente Bootstrap con Angular 2, pero sí con Angular 1 y la situación es la misma en que la versión normal de Bootstrap está diseñada para funcionar con jQuery y no está construida teniendo en cuenta Angular. Por supuesto, puede instalar jQuery pero el Javascript puede no funcionar como se espera en el contexto de Angular.

La solución más fácil es usar una versión que esté construida teniendo en mente a Angular, y creo que ng-bootstrap es la más destacada. No lo he usado yo mismo, pero he usado angular-ui-bootstrap para Angular 1 y esto parece ser una contraparte de Angular 2 para el mismo proyecto.

Alternativamente, puede envolverlo en una directiva usted mismo , pero evitaría hacerlo si puede hacer que ng-bootstrap haga lo que quiera, ya que será mucho más trabajo.

Answer 2

Puede usar el comando github.com/angular/angular-cli/wiki/eject para que Angular CLI genere el archivo webpack.config.

Luego exponga jQuery como una variable como lo ha hecho antes.

Answer 3

Paso uno

npm install jssha --save [using jssha for this demo]
It it is your own custom file place it in the scripts array of angular-cli.json skip this step 1

Segundo paso

Add the jssha scripts file in .angular-cli.json file
"scripts": [ "../node_modules/jssha/src/sha.js" ]
Step three Adding a var in component to be used as a global variable

//using external js modules in Angular Component
declare var jsSHA: any; // place this above the component decorator
shaObj:any;
hash:string;
this.shaObj = new jsSHA("SHA-512", "TEXT");
this.shaObj.update("This is a Test");
this.hash = this.shaObj.getHash("HEX")

Echa un vistazo a este link . Tiene un ejemplo de trabajo y una pregunta para el mismo con tipings y sin él. He usado bootstrap y jquery con Angular en ese proyecto, también puedes consultar el repositorio.

En su caso, debe agregar los archivos jquery

así en tu angular-cli.json

  "styles": [
    "../node_modules/bootstrap-v4-dev/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.min.js",
    "../node_modules/bootstrap-v4-dev/dist/js/bootstrap.min.js"

y luego declarar en componente. declare var $: any;

Esto debería funcionar.

ACTUALIZAR

Pasé a crear un modal de bootstrap usando solo jquery en Angular usando los pasos que mencioné.

Funciona Compruebe este enlace de página gh - LINK .

y si desea verificar el código fuente para el mismo, verifique LINK .

La respuesta que publiqué vino de este enlace, esta es mi página en Angular LINK