Require not working ( SystemJS) [closed] - systemjs

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am very new to systemJS and trying to explore it.
Cant we call require as shown in the below inside HTML. When i call require() function inside JS files it loads JS file properly but inside HTML file it does not work..
Below is the SystemJS code on my HTML
System.config({ map: { Customerx: 'Customer.js' } });
SystemJS.import('Customerx').then(function (m) {
var x = require("Customerx"); //<-- this works inside JS files but not here why });

Closing this issue. Require() is not available on the windows its scoped in each file.
https://github.com/systemjs/systemjs/issues/1442

Related

How to import custom css and js in Ionic 4 [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am using a custom theme for my app in ionic. But it has some css and javascript dependencies except bootstrap.
Could you help me how can I import these libraries to my app?
Regards
It sounds like you are probably missing some Angular usage theory if you are trying to import Bootstrap into your project.
It uses a specific set of classes and they aren't out-of-the-box compatible with Angular / Ionic.
Ionic will give you a cross-device baseline set of styles so you should really work with Ionic to build upon their styles rather trying to fight it with another system.
However, to answer your questions:
Importing CSS
You can edit app.scss and reference files in your imported packages like this:
#import '~#swimlane/ngx-datatable/release/assets/icons';
Notice the ~ at the start and then the package name, then the path to the file. You don't need to put the .css or .scss on the end but you can if you want to.
Importing JS
I'm not sure the best way to do this, but you can include scripts in the <head> tag by editing the index.html.
It's not something that's really done though and sounds like you are misunderstanding the way Angular / Ionic works.
It's based around building web components and you let Angular manage the actual live html. Your code that you write is TypeScript and its to interact with various API's that set the data model and then you let Angular generate the actual script.
There is library for loading asynchronous JavaScript files. https://www.npmjs.com/package/scriptjs
Install the package:
npm i scriptjs
Then use it anywhere like below:
import { get } from 'scriptjs';
ngOnInit() {
get("assets/js/searchEmp.js", () => {
getSerchInspContext = this;
loadSearchEmp();
});}`
OR
You can simply use the jquery method to append or remove the script tag in your header.
To add .js file, call below line under ngOnInit():
$('head').append('<script async src="assets/js/search.js"></script>');
Remove .js file:
document.querySelector('script[src="assets/js/search.js"]').remove();

Leaflet.draw does not find marker icon [duplicate]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I using leaflet map in angular project.
use of leaflet to show map with marker.
this work correctly in ng server and ng build.
but when use of --prod in build not show marker icon.
marker image path is wrong.
http://127.0.0.1:8080/marker-icon.2273e3d8ad9264b7daa5.png%22)marker-icon-2x.png
how to resolve this problem ?
You surely have a different Angular configuration for production build, which fingerprints resources used in CSS. High chance that is the default Angular configuration.
In that case, you are hitting the compatibility bug of Leaflet with webpack (which is the build engine under the hood of Angular CLI) that modifies resources URL, as described in Leaflet issue #4698.
You have 2 easy solutions for your case:
use leaflet-defaulticon-compatibility plugin (I am the author). Simply import the plugin CSS and JS after Leaflet ones.
import 'leaflet/dist/leaflet.css';
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
import * as L from 'leaflet';
import 'leaflet-defaulticon-compatibility';
explicitly specify the default icon images resource, so that Leaflet no longer needs URL guessing and is no longer messed up by webpack's URL rewriting:
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

How to use built-in Javascript extension to automatically find symbols in a JS file when developing a custom extension? [duplicate]

This question already has an answer here:
Execute "go to Symbol in File" programmatically in vscode?
(1 answer)
Closed 3 years ago.
I'm writing a custom VSCode extension. I need to grab symbols (e.g. variables, functions, etc.) from a Javascript file that the user is currently on to find their definitions and do something with them when the user hovers over. Does VSCode / the JS extension expose an API to find these symbols and their definitions without doing so manually?
None of the API (https://code.visualstudio.com/api/references/vscode-api) seems to expose this functionality.
I've tried looking at the built in JS/TS extension to see what kind of API it exposes but found nothing.
async function getSymbols(document: vscode.TextDocument): Promise<vscode.DocumentSymbol[]> {
return await commands.executeCommand<vscode.DocumentSymbol[]>('vscode.executeDocumentSymbolProvider', document.uri) || [];
}
https://code.visualstudio.com/api/references/commands

Profile picture URL using http://graph.facebook.com/{social network id}/picture?type=large not returning profile pic actual profile picture [duplicate]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have an issue now, suddenly all url image from facebook graph API in my database return a default image look likes this:
Example url :
http://graph.facebook.com/{user-id}/picture?type=large
It is a known bug (which could also mean that it will not be possible anymore in the future):
https://developers.facebook.com/bugs/2054375031451090/
You should subscribe to the bugs and wait.
Update: You can make it work by adding an access_token to the API call, but you should only do that server side, of course. An App Access Token should be good enough:
https://graph.facebook.com/<userId>/?fields=picture&type=large&access_token=...
Update 20.04.2018: It seems like picture URLs are working without an Access Token again: <img src="https://graph.facebook.com/[app-scoped-id]/picture" />
Please add access token parameter in the url
https://graph.facebook.com/id/picture?type=large&access_token=faskfjsld
This will work for sure.
There is an update here:
https://developers.facebook.com/bugs/2054375031451090/
I just tried and it works, by simply appending your access token to the URL link.
So this:
https://graph.facebook.com/<userId>/?fields=picture&type=large
Should become like this:
https://graph.facebook.com/<userId>/?fields=picture&type=large&access_token=...
Hope it helps!

Soundcloud custom player bug [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Soundcloud fails to acknowledge their bug with the custom players. Many sites are being affected. Here's a link to my previous question
https://stackoverflow.com/questions/16993681/soundcloud-custom-player-skin-not-playing-next-tracks
I can confirm that the bug exists as well. I created an issue about it on their github page, and i have also emailed support. I've spent the last two days trying to see if i could solve it by modifying their code somehow, but i'm pretty sure the bug exists in the actual flash payload that is being delivered via their API, and not on the javascript end of things.
EDIT: ok, i came up with a temporary solution to circumvent soundcloud's bug.
In sc-player.js around line 209 you should see:
load: function(track) {
var url = track.uri;
if(player){
player.api_load(url);
}else{
// create a container for the flash engine (IE needs this to operate properly)
$('<div class="sc-player-engine-container"></div>').appendTo(document.body).html(flashHtml(url));
}
This is the call that injects the new track into the flash player using the api_load call. Problem is that is totally not working right now. so instead of using that api, we just destroy the existing audio engine and replace it with a new one like so:
load: function(track) {
var url = track.uri;
if(player){
// player.api_load(url);
$('.sc-player-engine-container').html(flashHtml(url));
}else{
// create a container for the flash engine (IE needs this to operate properly)
$('<div class="sc-player-engine-container"></div>').appendTo(document.body).html(flashHtml(url));
}
Now it will play tracks after the first track finishes, or when the user switches tracks. This is not optimal because we have to keep loading an extra resource from soundcloud, but soundcloud has left us i a stick situation, and i see no other viable solution at the moment.
Indeed, i noticed that custom player doesn't work properly since few days.
I've found a solution for webkit browsers who support html5 audio only :
you have to include scripts as following (copied from sources):
widget js api: https://w.soundcloud.com/player/api.js
soundcloud.player.api.js (grab from github soundclound custom player)
sc-player.js (grab from github soundclound custom player)
It should solve problems only on html5 audio supported browsers, but it still don't work with the flashplayer fallback. Firefox 21 Mac version doesn't support mp3 yet, and use flash for stream audio...
I'm waiting for an answer from soundcloud dev support about this point.
Cheers.
I was able to fix the problem in Safari and Chrome by following the Soundcloud Github page updates from jQuery 1.4.2 to 1.9.0. https://github.com/soundcloud/soundcloud-custom-player
I also had to replace $.browser.msie with navigator.userAgent.match(/msie [6]/i) as described here: Fancybox doesn't work with jQuery v1.9.0 [ f.browser is undefined / Cannot read property 'msie' ]
I contacted the Soundcloud developer who suggested it could be a Firefox/Flash issue. Updating Flash did nothing for me, and the problem initially occurred simultaneously in all browsers. I applied deweydb's workaround and everything works well.