jQuery no está definido en bootstrap-sass

Arranqué la aplicación Angular 2 usando angular-cli. Todo fue fácil-peasy hasta que decidí usar el modo bootstrap. Simplemente copié el código para abrir el modal de nuestro otro proyecto que no usa angular-cli. Agregué las dependencias jquery y bootstrap a las secuencias de comandos 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 $ global. He hecho algunas excavaciones y aparentemente bootstrap espera que jQuery se transmita como una variable ‘jQuery’. No le da asco a la rata por $ .

Podría exponer jQuery como una variable en el archivo webpack.config.js como lo hacemos en otro proyecto: (se omite un montón 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 permitir que otros desarrolladores se entrometieran en los archivos de configuración de la carpeta web. ¡Gracias chicos! Muy considerado de tu parte.

Intenté importar JQuery directamente en el componente angular y un montón de 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 molesto de que un tema tan trivial como agregar la dependencia de jquery para ser utilizado con bootstrap en angular-cli sea un campo de minas.

¿Has tratado con un problema similar?

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 enlace . Tiene un ejemplo de trabajo y una pregunta para lo mismo con typings y sin él. He usado bootstrap y jquery con Angular en ese proyecto, también puedes consultar el repository.

En su caso, necesita 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 el componente. declare var $: any;

Esto debería funcionar.

ACTUALIZAR

Seguí creando un modal de arranque usando solo jquery en Angular usando los pasos que mencioné.

Funciona Compruebe este enlace gh página – LINK .

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

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

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

La solución más fácil es usar una versión que está construida con Angular en mente, 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 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.

Puede usar el comando ng eject para que Angular CLI genere el archivo webpack.config.

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