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();
Related
I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);
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'),
});
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
I want to use the Ionic UI framework with Trigger.io for my hybrid mobile app, but it isn't clear to me just how to combine the two in my code because it's not like using Jquery where you just add the library to a script tag.
After install, both of these frameworks provide their own "hello world" type of index.html file, their own css and js files as well as framework specific configuration files which I know are important. So which one do I use as a base and how do I call into the other framework from that base? How do I structure the project file tree to combine the two so that when I go to do an app build for distribution, there isn't some crazy error because the frameworks are set up to look for their own files via set paths?
Here is one answer I found in my googling.
What steps do I need to take to use the Ionic Framework with trigger.io?
here is an example project on git hub:
https://github.com/travisrussi/ionic-triggerio
here is the link to the ionic cdn to be used for testing:
https://code.ionicframework.com/#
I have created two separate add ons. One for getting input from the user and storing in simple-storage. In the other one the actual add on function. Both work fine. But when i merge these both main add on code in to a single main code they didn't work. So i wonder whether there can be two js files in "main" add on directory and is communication possible between them?I need one of the js in main directory to be able to access the simple-storage of the other js in the same main directory.
I'm really not sure what your overall goal is, please provide an example for a more specific answer. If you're using the Add-on SDK, only code in main.js will be run, but you can use commonJS modules to implement various features and use require to import them into main.js.
Please see the docs for more information on how the Add-on SDK works:
https://developer.mozilla.org/en-US/Add-ons/SDK