We Keep Coding

Bootstrap 5 Popover Error - Cannot find name 'bootstrap'

I am trying to create a popover in the Javascript of my Angular 12 project. I am using Boostrap v5.0.1. I can't seem to get rid of a name error when I am trying to create the popover:
var exampleEl = document.getElementById(item.name + index);
var tooltip = new bootstrap.Popover(exampleEl, {
container: 'body',
animation: true
});
Typescript is telling me "Can't find name bootstrap".
I have added bootrap.js to my angular.json file:
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
According to the docs, popper.js is included in the bundle file. I am not using jQuery and do not want to include it. I have not seen another post with a similar issue so I must be just overlooking something small. Any ideas?

Posting this declaration at the top of the file worked:
declare var bootstrap: any;

How to incorporate custom theme js files into Nuxt

I am attempting to use a purchased Bootstrap theme (because I am design challenged) into a Nuxt site. I have managed to get all of the scss/css files included, but I'm having problems finding a way to get the custom .js files to be added as well. The theme itself uses jQuery, and the two files are all jQuery functions. I've added bootstrap-vue and jQuery from npm, and I've tried adding the files in the script item in the head section in nuxt.config.js like so using theassets` directory;
head{
script: [
{ src: '~assets/js/min/plugins.min.js' },
{ src: '~assets/js/min/custom.min.js' },
{ src: '~assets/js/min/modernizr.min.js' },
],
}
and like so using the static directory
head{
script: [
{ src: 'js/min/plugins.min.js' },
{ src: 'js/min/custom.min.js' },
{ src: 'js/min/modernizr.min.js' },
],
}
but either way, I keep getting a jQuery is not defined error.
Is there another way to load these files so that they have access to jQuery? Search results seem to indicate that maybe I should use a plugin, but I'm not sure how to do that just to add a local js file.

Maybe you have just a / missing?
Assuming you have this folder sturcture:
/static/js/modernizr-custom.js
You could include it:
head: {
...
script: [
{ src: '/js/modernizr-custom.js' }
]
}
Does this solve your problem?
Also it is of course mandatory that if your plugin.js is using jQuery that you actually load jQuery.
To do that, just include jQuery in the same way to your scripts in nuxt.config.js:
head: {
...
script: [
{ src: '/js/jquery.min.js' },
{ src: '/js/plugin.js' }
]
}
This means you have to download jquery and put it into your static directory.
Alternatively you could use a CND to load jquery from. (This makes sense, because other pages might have loaded jquery from the same cdn and you have it already cached).
{ src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js }

How to add jQuery into a VuePress file

I have a project that I want to document with VuePress, and I have a small code that requires jQuery to run. I know you can add inline script tags and put code in them, but I can't seem to be able to add jQuery. Here is the folder structure and what I've tried:
docs
.vuepress
-- dist
-- public
-- css
-- js
-- jquery-3.3.1.min.js
-- scripts.js
-- config.js
components.md
and in components.md I added the following at the end:
<script src="/js/jquery-3.3.1.min.js"></script>
Here's the error when adding jquery in the script tag:
Module not found: Error: Can't resolve '../../../../../../js/jquery-3.3.1.min.js?vue&type=script&lang=js&' in C:/Users/../docs
# ./node_modules/vuepress/lib/app/.temp/routes.js
# ./node_modules/vuepress/lib/app/app.js
# ./node_modules/vuepress/lib/app/clientEntry.js
# multi ./node_modules/vuepress/lib/app/clientEntry.js
Adding the css in config.js in module.exports.head works, but for some reason adding javascript doesn't work (jquery gets added, but sometimes it works and most of the time it doesn't). Here's what I tried in config.js
head: [
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap reboot.css" } ],
["link",{ rel: "stylesheet", href: "/css/bootstrap-4.1.3/bootstrap-grid.css"}],
["link", { rel: "stylesheet", href: "/css/bootstrap-custom.css" }],
["link", { rel: "stylesheet", href: "/css/style.css" }],
["script", { src: "/js/jquery-3.3.1.min.js" }],
["script", { src: "/js/scripts.js" }]
]
EDIT: I tested a bit more and apparently, even though the scripts are imported, I can't select the element I want to select. For example $('.my-elements') returns an empty selector. On the other hand document.getElementsByClassName('my-elements') works and shows the element I want as the first array element, but if I want to select that first array element with [0] at the end it returns undefined.
I tried selecting elements in the console using the 2 functions above. The same functions work in the console but don't work in the script, this is weird.

In
.vuepress/config.js
add script
module.exports = {
head: [
['script', {src: 'https://code.jquery.com/jquery-3.4.1.min.js'}]
]
}
Further docs about head config
https://vuepress.vuejs.org/config/#head
jQuery CDN
https://code.jquery.com/

just to add, for vitepress if anyone is using, (the newer 1.0.0-alpha45) has now changed for defining .vitepress/config.js
export default {
head: [
['script', {src: 'https://code.jquery.com/jquery-3.6.3.slim.min.js'}]
]
}

How to properly use JQuery and Bootstrap in latest Angular versions

Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?

mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!

You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.

I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }

How to import dojo javascript file into worklight application?

When creating a new project, I have selected to include the dojo toolkit. I can import dojo.js using src="dojo/dojo.js". However when I try importing some other modules such as dijit.js using
require(["dijit/dijit"], function(){})
...I always get an error in the web console (ie the resource is not found). The problem is not applied when I import dojo modules. How can I fix this?

Make sure, you have configured Dojo correctly, kindly find the Dojo configuration which I have been using in my Hybrid App.
<script>
var dojoConfig = {
baseUrl: "js",
packages: [
{ name: "dojo", location: "dojo/dojo"},
{ name: "dijit", location: "dojo/dijit"},
{ name: "dojox", location: "dojo/dojox"}
],
isDebug: false,
async: true,
parseOnLoad: true,
deps:['app/main']
}
</script>
If you still not able to resolve it, try to make a sample use case or jsfiddle, would look into it further.

You made simple mistake of syntax:-
To require js file instead of require[("dojo/parser")]
you have use require(["dojo/parser"],function(parser){})