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;

Why does requireing the text plugin work one way but not another?

When I try to load the text plugin of requirejs using the full path, "Scripts/text", it throws a script error.
requirejs.config({
waitSeconds: 30,
paths: {
}
});
var libs = ["Scripts/knockout-3.3.0", "Scripts/Application", "Scripts/text"];
define(libs, function (ko, application) {
//implementation
}
But when the text plugin path is defined in path in the config, it works.
requirejs.config({
waitSeconds: 30,
paths: {
text: "Scripts/text"
}
});
var libs = ["Scripts/knockout-3.3.0", "Scripts/Application", "text"];
define(libs, function (ko, application) {
//implementation
}
Why is that? Shouldn't it be completely irrelevant where the path to the text plugin is defined?

The code in your first snippet which you say is failing refers to the text plugin as Scripts/text. However, your error message mentions a failure to load the module named text. When I try replicating the error you say you are having, the error message reported by RequireJS is not that it cannot load text but that it cannot load Scripts/text. In other words, if you were having the error you think you are having, the error message would be different from the one you show in the question. I deduce that the problem is not where you think it is.
Most likely, another module in your code base refers to the text plugin as text. In your first configuration, you do not have a paths definition for it, so the loading fails. In your second configuration, you do have a paths definition, so the loading works.

ExtJS does not recognize a new folder

I working on a ExtJS project. This is how my folder structure looks like. I have no problem with all folders but 'util' folder is not recognized by extjs.
This is what I have in AjaxManager.js
Ext.define('FBT.util.AjaxManager', {
alternateClassName: 'AjaxManager',
singleton: true,
test: function() {
alert('test it!');
}
});
When I try to do
FBT.util.AjaxManager.test();
it does not work and this is what I got in the console.
Uncaught TypeError: Cannot read property 'AjaxManager' of undefined
As I said, I have no problems with classes that are placed in the view or controller folder. Any idea what's going on?
Thanks,
Angelo

ExtJS 5 requests file with empty name /.js

I've made a fresh workspace with the latest sencha cmd 5.0.2.270 and latest ExtJS 5.0.1. Generated an app into in. Wrote a little bit of code.
I generate production build with sencha app build.
The development loads well, but the production build tries to load file with no name and gets a 404
GET http://yassa-built.dev/.js?_dc=1410352524548 404 (Not Found)
After that error it doesn't load at all.
I can't understand what it is searching for. Development is not complaining at all.
I made an archive with it https://mega.co.nz/#!Dk0gDRJD!dNITsq1fGFs5T4d-4yYFnA6_K6EcAhFkxoeEjaJu7MY (~600kb). It includes the sources and the production build.
UPD
I've found the place where it starts to break. In file RadioAdminController.js.
case 'menu_referals':
return app.setSubView('redmed-radioapp-referals', {
store: Ext.create('RedmedAdmin.store.Referals')
});
If I do not create a store - it works. The production build is ok. The store is nothing special:
Ext.define('RedmedAdmin.store.Referals', {
extend: 'Ext.data.Store',
model: 'RedmedAdmin.model.Referal',
autoLoad: false,
autoSync: true
});

On the fourth day of struggling a simple answer revealed.
I've missed one dependency. The chain: RedmedAdmin.store.Referals -> RedmedAdmin.model.Referal -> RedmedAdmin.model.redmed.RadioAppBase.
As I provided the archive, I will list class RedmedAdmin.model.redmed.RadioAppBase here (working version):
Ext.define 'RedmedAdmin.model.redmed.RadioAppBase',
extend: 'Ext.data.Model'
requires: ['Ext.data.identifier.Uuid', 'Ext.data.proxy.Rest']
identifier: 'uuid'
fields: [{
name: 'id'
type: 'string'
}]
schema:
namespace: 'RedmedAdmin.model.redmed.radioapp'
proxy:
type: 'rest'
url: 'http://10.0.29.140:6543/api/rest/{entityName:lowercase}'
reader:
type: 'json'
rootProperty: '{entityName:lowercase}'
listeners:
'exception': (request, operation, eOpts ) ->
Ext.log {level: 'error'}, "Data request to #{request.url} failed. Reply: #{operation.responseText}"
It defines a schema for all children. The schema uses rest proxy (type: 'rest'). It wasn't included in the broken version. Only Ext.data.identifier.Uuid was listed in requires.

Run the app from build/testing/ to see which dependency is missing.

I had the same problem before and the fix was to add required Ext.layout.container.Border' & 'Ext.layout.container.Center'. I had to manually comment out codes & run the production build to check (since it works fine in developement mode). In some cases, it would point out the the missing dependencies like widget/...js

This problem is related to classes need to be added in the requires array. I ran the build using Sencha app build testing then in the debug I cam to know which class was loading empty. To resolve my problem I have added Ext.layout.container.Column but it can be any class, so its better to run the build in testing then identify the problem.

In order to get these configuration properties to work properly, you need to add this 'Ext.data.identifier.Uuid' class as project level.
Include Ext.data.identifier.Uuid as requires in the Ex.Application app.js file
Ext.application({
requires: [
'Ext.data.identifier.Uuid' // Include it
],
models: [
'UsersModel',
'RolesModel',
'LoginModel'
]
.
.
.
.
});

Simple Dojo i18n implementation

I just recently started learning dojo for personnal use and for experience. So far, I have been doing the tutorials on various dojo stuff (on their website and over the web) and I have been "struggling" with implementing a concrete infrastructure for more complex application (or good practice). I have find one interesting project (https://github.com/csnover/dojo-boilerplate) and article (http://www.sitepen.com/blog/2011/05/04/what-is-the-best-way-to-start-a-dojo-project/). With that, I think my first problem is resolved. Correct me, if I'm wrong.
I feel like the tutorial on i18n is missing concrete implementation. For example, I would like to add i18n on the dialog box from the boilerplate project.
define([ 'dojo/_base/declare', 'dijit/Dialog' ], function (declare, Dialog) {
return declare(Dialog, {
title: 'Hello World',
content: 'Loaded successfully!'
});
});
Here, My project hierarchy is:
AS you can see, I create my own nls folder for my application and store for different (lang-locale) my "strings". Now, how do I specify the locale content on title or content for my dialog code above. I have done recently i18n on ruby on rails (with the concept of MVC) and depending on my view I had to create for this specific view a file for localization (.yml). I know that RoR and Dojo are really not the same thing, but does a widget (could be compared to my view) and so each widget needs to have their own localization... I have come accross 2 tutorials, first and second. Maybe, I'm reading it all wrong.
I have something like this right now, but it doesn't work.. What am I missing?
dojo.requireLocalization("app", "dialog");
define([ 'dojo/_base/declare', 'dijit/i18n' 'dijit/Dialog' ], function (declare, Dialog) {
i18n: dojo.i18n.getLocalization("app", "dialog"),
return declare(Dialog, {
title: i18n.title,
content: i18n.content
});
});
Thank you.
EDIT:
define([ 'dojo/_base/declare', 'dojo/i18n!app/nls/labels', 'dijit/Dialog' ], function (declare, labels, Dialog) {
return declare(Dialog, {
title: labels.title,
content: labels.content
});
});
I have no error now, but my labels.title is empty...?
EDIT(1): I forgot to add the root on the default nls folder.

Here's an example of how I have built some dialogs with localization.
directory structure
myApp\
dialog\
myDialog.js
nls\
dialog.js
fr-ca\
dialog.js
myDialog.js
define("myApp/dialog/myDialog", [
"dojo", "dijit/Dialog", "dojo/i18n",
"dojo/i18n!./nls/dialog" // this is a relative path to the
// dialog.js from myDialog.js
], function(dojo, Dialog) {
var i18n = dojo.i18n.getLocalization(
"myApp.dialog", // this is the directory path to the nls folder
"dialog" // this is the file
);
return declare(Dialog, {
title: i18n.title,
content: i18n.content
});
});