We Keep Coding

AceEditor:Uncaught Error: couldn't load module ace/theme/

I use AceEditor in my code. When I try to save my changes, I get this error
Uncaught Error: couldn't load module ace/theme/ or it didn't call define
at afterLoad (ace.js:18798:1)
at ace.js:3776:1
at Array.forEach (<anonymous>)
at ace.js:3775:1
at _require (ace.js:88:1)
at req (ace.js:138:1)
at afterLoad (ace.js:3771:1)
at HTMLScriptElement.s.onload.s.onreadystatechange (ace.js:3397:1)
As I understand it, to fix the error, i need to set basepath.However, adding the line this.editor.set('basePath', 'https://unpkg.com/ace-builds#1.4.6/node-modules/react-ace/src') in the ace.tsx file does not help.

The basePath is the folder where ace.js is located. for unpkg it would be
ace.config.set('basePath', "https://unpkg.com/ace-builds#1.4.6/src-noconflict")
note that the method is on config object not on editor instance.
Depending on what packager you use there may be better ways to configure this.

Uncaught Error: Module name "https" has not been loaded yet for context: _. Use require([])

This is the error that I'm getting-
Uncaught Error: Module name "https" has not been loaded yet for context: _. Use require([])
http://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:168)
at Object.localRequire [as require] (require.js:1436)
at requirejs (require.js:1797)
at Dataverse_API_node.js:1
I have an explore.html page which calls the script Dataverse_API_node.js, which is itself dependent on the require.js file. My Dataverse_API_node.js script is supposed to display its output data on the explore.html page. However, I face the above error when I load the explore.html page.
Note that my Dataverse_API_node.js script runs independently without errors and displays the data in the command prompt when run through the Node.js command prompt.
There are the first few lines of the Dataverse_API_node.js script-
const https = require("https");
var parseString = require('xml2js').parseString;
const demo_url = "https://demo.dataverse.org"
const actual_url = "https://demo.dataverse.org/dataverse/hbstest"
const search_uri = "/api/search"
const options = "?q=*&subtree=COSgak"
This is the part of explore.html where I'm calling the Dataverse_API_node.js script and supposed to display the data-
<p>
<script src="Dataverse_API_node.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js">
document.write(search_for_all("https://demo.dataverse.org", 0, 'file'));
</script>
</p>
I'm new to Javascript and would really appreciate some help with this error. Please don't send me to requirejs.org as it doesn't really help.
Thank you for your time.

Solution found. Just use browserify. Install browserify and then run the following command-
> browserify Dataverse_API_node.js > bundle.js
Browserify goes through all the 'require' in your script and wraps it up in bundle.js and helps to run the node.js modules in the browser.
Just add the following script in your .html file-
<script type=text/javascript src="scripts/bundle.js"></script>

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) { });
}); }

ng-bind-html - with angular-sanitize - throws error in console

I am trying to add html to a div as follows:
$scope.thehtml = $sce.trustAsHtml("<b>hello</b>")
<div ng-bind-html="thehtml">
</div>
I see following error in console:
TypeError: undefined is not a function
at htmlParser (js/angular/angular-sanitize.js:205:17)
at $sanitize (js/angular/angular-sanitize.js:119:5)
at Object.ngBindHtmlWatchAction [as fn] (js/angular/angular-sanitize.js:420:15)
at h.$get.h.$digest (js/angular/angular.min-125.js:98:396)
The angular-sanitize.js:205:17 is this:
if ( html.indexOf("<!--") === 0 ) {
index = html.indexOf("-->");
Apparently html is not being treated as a String, therfore the error on indexOf ?
I have included the angular-sanitize.js, and added module 'ngSanitize' to the app.

Please see this plunk.
From what I can see your implementation looks fine! My plunk is working and I am not getting an exception with the same code.
I have not had to add ngSanitize as a dependancy of the module, I have just injected $sce into my controller.
The versions of the libraries I have used are as follows:
https://code.angularjs.org/1.2.28/angular.js
https://code.angularjs.org/1.2.0-rc.3/angular-sanitize.js
Please try replacing your script references with these versions to see if it the libs that are at fault.
Let me know how you get on! Good luck :)

Include angular first, then angular-sanitize:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.y.z/angular-sanitize.js"></script>

Uncaught Error: No module: ui.directives

I'm learning AngularJS and trying do like on video but I found problem. I've got this 2 errors:
Uncaught Error: No module: ui.directives
Uncaught Error: No module: ui.directives.sortable
In my app.js I have like they said on github:
angular.module('507917App', ['ui.directives.sortable'])
And also I've added this line to code:
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
Looking into path and there is definition for ui.directives:
angular.module('ui.directives').directive('uiSortable', [...
Question
Is there anything what I missed or do wrong? Why I've got this errors?

Try changing it to angular.module('507917App', ['ui.sortable']). It worked for me. If you look in the actual sortable.js file, that's the name of the module. I believe the developer just forgot to update that on the documentations.

Ok I found solution. Before including this script (or other component from angular-ui):
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
you need also include this:
<script type="text/javascript" src="components/angular-ui/build/angular-ui.js"></script>
also first line of app should looks like here:
angular.module('507917App', ['ui'])