Import jquery-ui to angular project with ES6 - javascript

I wanted to use angular-ui-sortable in my project and so I tried to import jquery-ui for that matter but with no luck so far. Of course before all that I add the package by
meteor npm install --save jquery-ui
I have tried importing the library using the following:
import 'jquery-ui';
and then adding it as a dependency in my module
angular.module('myModule', ['jquery-ui']);
but that gives the following error:
Error: [$injector:modulerr] Failed to instantiate module jquery-ui due to:
Error: [$injector:nomod] Module 'jquery-ui' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I have also tried importing it this way
import jqueryui from 'jquery-ui';
but this did not work too. I am not sure how to do that.

Related

Using eth-crypto npm module with lots of errors

I'm trying to use some of the functions in eth-crypto npm module (https://github.com/pubkey/eth-crypto) by #pubkey , I create an empty react project install it via npm install eth-crypto --save and import it via import EthCrypto from 'eth-crypto'. And as soon as I import it I get all kinds of errors most notably:
"Error in ./node_modules/eccrypto/browser.js<br/>
Module not found: Error: Can't resolve 'crypto' in
'.......node_modules/eccrypto'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
-add a fallback 'resolve.fallback: {"crypto": require.resolve("crypto-browserify")}'
-install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: {"crypto":false}
And I get this error for 'crypto', 'assert', 'stream' and 'buffer'. I tried to solve it by installing each package, and also changing package.json and also webpack.config.js, all the things mentioned here:
https://bobbyhadz.com/blog/module-not-found-cant-resolve-crypto
But unfortunately if I try to force it and solve every problem, still the 'crypto' error is still there. I was curious if anyone has had any similar experience and a solution for this. Thanks

Error while adding dependency for angular-materialize

I want to use materialize for my angular project from https://github.com/krescruz/angular-materialize but I get the error
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module F1FeederApp due to: Error: [$injector:modulerr]
Failed to instantiate module ui.materialize due to: Error:
[$injector:nomod] Module 'ui.materialize' is not available! You either
misspelled the module name or forgot to load it. If registering a
module ensure that you specify the dependencies as the second
argument.
In my app.js:
angular.module('F1FeederApp', [
'ui.materialize',
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
What am I doing wrong? According to the link above these declarations should have been enough..
Try running this in root of your project if you are using bower.
bower install angular-materialize --save
and add the source file angular-materialize/src/angular-materialize.js into your index.html
OR
If you are not using bower or node download this file in your project and add it in your index.html
Hope this helps

exception while importing module in ember js

I need to remove diacritics from string in emberjs app.
I found a plugin for this: fold-to-ascii
but I don't know how to use it in my app.
I added this plugin via npm and it is visible under node_modules folder in my app
In docs usage of this plugin is:
var foldToAscii = require("fold-to-ascii");
foldToAscii.fold("★Lorém ïpsum dölor.")
but i get an exception:
Uncaught Error: Could not find module fold-to-ascii
also tried importing it like #Kori John Roys suggested:
import foldToAscii from 'fold-to-ascii'
but it gives me only new exception:
Error while processing route: transports.index
Could not find module fold-to-ascii imported from test-ember/pods/transport/model
What am I doing wrong ?
Assuming you are using ember-cli:
npm install --save-dev ember-browserify
then you can import like this:
import foldToAscii from "npm:fold-to-ascii"

Module 'flow' not available in angularjs app

in my app.js I have included the dependency for flow
var myApp = angular.module('myApp',['ui.router', 'ngResource', 'flow']);
I have included the javascript in my index file to load as follows
<script type="text/javascript" src="//cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>
I am getting the error Module 'flow' is not available!
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module flow due to:
Error: [$injector:nomod] Module 'flow' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.23/$injector/nomod?p0=flow
This is probably because if you want to use the ['flow'] module in angularJs you have to include both:flow.js and ng-flow.
If you are using bower and it is configured to place the libraries on the js/vendor you would have to do something like this.
bower install "ng-flow#~2" --save
{{ HTML::script('js/vendor/flow.js/dist/flow.min.js') }}
{{ HTML::script('js/vendor/ng-flow/dist/ng-flow.min.js') }}
If you are not, just look for a ng-flow CDN.
Best regards!
you need to include http: before your cdn:
change your script to this and it should work:
<script type="text/javascript" src="http://cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>

Grunt build failing after adding angular-leaflet-directive

I've just added angular-leaflet-directive to my project and when I come to build it with Grunt, it's now failing. The dependency was added using bower. This project was built using the Yeoman angular-generator.
Here I'm including the leaflet-directive in my app.js
angular
.module('statsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'leaflet-directive'
])
And then for now, I simply have <leaflet></leaflet> in my view just to get things started.
When the Grunt build fails, I get this error message
Error: [$injector:modulerr] Failed to instantiate module statsApp due to:
Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to:
Error: [$injector:nomod] Module 'leaflet-directive' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This SO post solved my problem. It's not specific to the module I'm adding, but specific to Karma tests failing because they didn't know about the leaflet-directive module.
AngularJS Error: Module ngAnimate is not available

Categories

Resources