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'),
});
Related
I integrated CucumberJS with Protractor to write E2E tests for an Angular (not AngularJS) application.
Is there any easy way (maybe an already existing package) to take screenshots after each step (Given, When, Then) and compare them with some reference images? If reference images are not present, then to register the screenshot as a reference image.
The step should fail if the images are too different.
Before asking this question I read CucumberJS: Take screenshot after each step, but that question is about taking a screenshot, not comparing.
unfortunately the npm modules that claim to do this seem abandoned (e.g. https://www.npmjs.com/package/protractor-image-comparison/v/1.7.0)
https://github.com/SAP/ui5-uiveri5 has a similar image comparison which could serve as an example (see docs/usage/visual testing). basically you need a custom jasmine matcher an an image comparison module such as resemblejs
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();
I've got the standard Angular 5 build and I'm trying to include a Leaflet map. The documentation gives me an error when I follow it. I'm trying to import Leaflet through NPM and include it but I can't find documentation.
I know I need the CSS, ID tag, and imports...
I've downloaded "leaflet" into my "node_modules folder".
Now what? What is the import code for the Leaflet module that I need to put into my "app.module.ts" file?
Firstly, for better development, install through npm #types/leaflet to get leaflet types in application. After that, you need to create component with Map property (imported from leaflet) and use factory function map (also imported from leaflet). The most of examples show configuration using id, but you can pass HTMLElement.
constructor(private element: ElementRef) {}
ngAfterViewInit() {
this.map = map(this.element.nativeElement, {...options})
}
At this moment, I develop library to integrated leaflet with Angular 5 using components. First stable will be released in next week, but I have first beta release on npm here.
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
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.