i BootsTrappate l'application angulaire 2 à l'aide de l'ACLI-CLI. Tout était facile à paisible jusqu'à ce que j'ai décidé d'utiliser Bootstrap Modal. J'ai simplement copié le code pour ouvrir le modal de notre autre projet qui n'utilise pas l'ACLIGULT-CLI. J'ai ajouté des dépendances JQuery et Bootstrap à des scripts dans le fichier angular-cli.json. JQuery est reconnu dans le projet, mais quand j'essaie d'exécuter En réalité, JQuery est importé dans le projet, mais comme un Je pourrais exposer ceci. $ modalel.modal (options) code> Inside composant angulaire, je reçois une erreur que jQuery n'est pas défini code>. $ code>. J'ai fait des creuser et apparemment Bootstrap s'attend à ce que JQuery soit transmis dans une variable «jQuery». Il ne donne pas le cul de rat sur $ code>. P> jQuery code> en tant que variable dans webpack.config.js code> comme nous le faisons dans un autre projet: (beaucoup de code omis de la brièveté ) P> var jQueryPlugin = {
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery'
}
exports.root = root;
exports.plugins = {
globalLibProvider: new webpack.ProvidePlugin(webpackMerge(jQueryPlugin, {
svg4everybody: 'svg4everybody/dist/svg4everybody.js'
}))
}
3 Réponses :
Je n'ai pas utilisé spécifiquement de bootstrap avec angulaire 2, mais j'ai avec angulaire 1 et la situation est la même en ce que la version régulière de Bootstrap est conçue pour fonctionner avec JQuery et n'est pas construite avec l'esprit angulaire. Vous pouvez bien sûr installer jQuery mais le JavaScript peut ne pas fonctionner comme prévu dans le contexte de l'angulaire.
La solution la plus facile consiste à utiliser une version construite en ligne angulaire, et je crois NG-Bootstrap est le plus important de ceux-ci. Je ne l'ai pas utilisé moi-même, mais j'ai utilisé des ui-bootstrap angular-ui pour angular 1 et cela semble être une contrepartie angulaire 2 dans le même projet.
Alternativement, vous pouvez Dans une directive vous-même , mais j'éviterais de le faire si vous pouvez obtenir NG-Bootstrap pour faire ce que vous voulez car ce sera beaucoup plus de travail.
Il devrait passer à l'angulaire 4 à utiliser NG-BOOTSTRAP . Une fois que cela a été fait, leur composant modal fonctionne bien.
@Matthew Daly Cela ne répond pas à ma question parfaitement, mais néanmoins c'est la meilleure solution. Ng-Bootstrap est assez élégant et ne comptra pas sur JQuery. J'ai donc remplacé Bootstrap-Sass et JQuery pour NG-Bootstrap dans mes dépendances.
Heureux qu'il résout votre problème. Évidemment, vous peut créer votre propre directive pour l'envelopper si besoin (et parfois c'est la seule solution, surtout si vous travaillez avec quelque chose de relativement obscur), mais pour quelque chose d'aussi courant que Bootstrap il y a presque Toujours une solution existante, et si vous aurez besoin de plus d'un composant, vous faites beaucoup de travail pour vous-même si vous choisissez de le faire vous-même.
étape deux jetez un coup d'oeil @ this lien . Il a un exemple de travail et une question pour la même chose avec les dactogies et sans cela. J'ai utilisé Bootstrap et JQuery avec angular dans ce projet, vous pouvez également vérifier le repo également. Dans votre cas, vous devez ajouter les fichiers JQuery comme celui-ci dans votre puis déclarer dans le composant. Cela devrait fonctionner. Je suis allé créer un modal de bootstrap en utilisant juste jQuery en angulaire en utilisant les étapes que j'ai mentionnées. IT Vérifiez ce lien de page GH - lien . et si vous voulez vérifier Le code source pour le même chèque lien . La réponse que j'ai postée vint de Ce lien est ma page sur angular déclarer var $: tout;
Mais pourquoi dois-je ajouter jssha à mon projet?
C'est une démo pour votre cas, ce sera jQuery, j'ai mentionné ce [en utilisant jssha pour cette démo]
Eh bien, dans ce cas, votre réponse ne résout pas mon problème, j'ai déjà ajouté une dépendance JQuery au tableau des scripts dans le fichier angular.cli.json. Le problème semble être que jQuery expose $ en tant que variable globale et bootstrap-sass attend jQuery pas $ signe.
Vous devez également déclarer cette variable dans le composant comme | déclarer var $: tout;
Declare var $: tout; qui est fourni, je reçois l'erreur dans le composant, mais ce n'est pas le cas. Je reçois 'jQuery n'est pas défini' dans le fichier modal bootstrap.
Avez-vous défini Bootstrap JS dans le fichier de scripts?
Oui. J'ai fait. Sinon, je recevrais une erreur comme vous n'est pas une méthode sur $ modalel lorsque vous essayez d'exécuter ce code ceci. $ Modalel.on ("montré.bs.modal ', () => cela.onopen ());
Je vais essayer d'ajouter un modal et de vous faire savoir
Ne t'inquiète pas pour ça. J'ai utilisé ng-bootstrap et ça marche bien. En enfer avec jQuery et bootstrap-sass.
c'est assez facile que je l'ai utilisé aussi ma page Web et ça marche comme un charme que je déteste à l'aide de modules pour tout
Je sais comment créer modal juste avec angulaire, mais ce n'était pas le point de ma question. Si je vais utiliser Bootstrap pour la mise en page et les différents composants, je peux aussi bien utiliser son mode modal.
Merci, votre application travaille avec Angular-Cli, JQuery et Bootstrap, bien que j'utilisais Bootstrap-Sass. Je me demande si cela fait une différence. Vous avez vraiment mis beaucoup d'efforts pour m'aider. Merci. J'aimerais pouvoir vous donner la prime, mais je l'ai déjà donné à Matthew après avoir mis en œuvre NG-Bootstrap lors de son recommandation.
@CODEPIC Aucun problème que je ne l'ai pas fait pour une génération juste que cela fonctionne nécessaire pour partager les informations
Vous pouvez utiliser la commande Exposez ensuite jQuery comme une variable que vous avez faite auparavant. ng éjecter Pour avoir une CLI angulaire générer le fichier webpack.config.
Pourquoi dites-vous "L'équipe ANGULA-CLI DEV a décidé de ne pas laisser les autres Devs se moquer de fichiers de configuration WebPack"?
@Kscandrett parce que Angular-CLI n'expose pas le fichier de configuration WebPack. Vous configurez l'application via Angular-cli.json. ANGULAR-CLI crée la configuration WebPack basée sur celle-ci, mais il n'y a pas de moyen Straighforward pour éditer le fichier de configuration WebPack sans recourir à des hacks. L'équipe a décidé de la configuration abstraite WebPack car elle est assez difficile à inintituée. Je ne suis pas d'accord avec leur décision, car il est difficile de configurer certaines choses que vous ne pouvez pas définir dans le fichier angular-cli.json.
Pourquoi ne pas simplement l'éjecter
ng éjecter et le modifier?C'est un point juste. github.com/angular/angular-cli/wiki/eject Pouvez-vous toujours Utilisez des générateurs de CLI angulaires après avoir éjecté l'application?
Je n'ai pas essayé. Si les générateurs ne fonctionnent pas, vous pourriez être capable de faire Github.com/aspnet / JavasCriptservices / Problèmes / ... .