I am using ionic 1 with angular js but not able to use any npm module because it says "Error: Cannot find module 'bip39'"
index.html
<script src="node_modules/lib/bip38.js"></script>
Now not needed require("bip32"). You can use directly method and property.
Related
I'm building an ionic app and would like to add unit tests for a couple of services. I'm trying to get jest working with typescript but it doesn't seem to play well.
I'm getting this error:
/myuser/project/node_modules/#ionic/storage/dist/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { NgModule } from '#angular/core';
^^^^^^
SyntaxError: Unexpected token import
Now I have read that you have to add the babel-plugin-transform-es2015-modules-commonjs and use that in the test env of babel. However I am using babel 7 and this plugin is not available for babel 7. Is there a different solution?
I will also provide my package.json and .babelrc below.
gist
You just need to add #ionic/storage to your transformIgnorePatterns in jest config. For example, here's mine, take note of the #ionic/storage part:
"transformIgnorePatterns": [
"node_modules/(?!#ngrx|moment|#ionic/storage|#ionic-native)"
]
Additionally, make sure in your tsconfig compiler options you have module: 'commonjs'
Also, if you need localstorage mocks, you can just use the following npm module:
npm install --save-dev jest-localstorage-mock
and then (in your setupJest.ts file)
import 'jest-localstorage-mock
Lastly, I recommend taking a look at:
https://github.com/thymikee/jest-preset-angular
for more help with jest + ionic configurations.
I'm learning Ionic to build an app that requires some linear algebra. It seems that I have to somehow import mathjs into my project.
So far, I've done this in my project's folder:
npm install mathjs --save
But now what? Where do I actually import it? I've tried writing
import math from 'math'
in app.js, inside angular.module() { ... }. When I do this, I get:
SyntaxError: import declarations may only appear at top level of a module
I've also tried adding
<script src="js/math.js"></script>
in index.html, but that doesn't work either. I've spent all afternoon trying to find documentation or examples, but to no avail. What am I missing?
For ionic v1, You just need to include the mathjs library in index.html page, and mathjs exposes the global math object , so you don't need to inject anything, you can call it whenever you want in your app.
if you use bower, just install the lib by,
bower install mathjs --save
then
<script src="path/to/bower_components/mathjs/dist/math.min.js" type="text/javascript"></script>
or you can use a cdn
add this in index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.9.1/math.min.js"></script>
I am not sure the title is correct but i am new with Bower, Gulp, Strongloop and even AngularJS.
I am updating an existing app, using bower, gulp and Strongloop, and i would like to add a bower componenent to the app (this one : https://github.com/fraywing/textAngular).
i did bower install textAngular as explained in the readme file, but now i should add those lines to my app :
<link rel='stylesheet' href='/bower_components/textAngular/dist/textAngular.css'>
<script src='/bower_components/textAngular/dist/textAngular-rangy.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular-sanitize.min.js'></script>
<script src='/bower_components/textAngular/dist/textAngular.min.js'></script>
But my app is using Strongloop, gulp and coffee script, so there is lot of file, not looking like classic html file and i am totally lost.
Can you help me find the next step to make this works ?
Thanks alot :)
I finally found my mistake, i need to add --saved at the end of bower command line.
So real line is : bower install textAngular --saved
Plus i should add textAngular in my angular module definition :
angular.module "starter", [
...
"textAngular"
...
]
Note that you should install too font-awesome and rangy to make it works completly
I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.
I installed blueimp-file-upload and jquery.ui.widget from NPM
npm install --save blueimp-file-upload
npm install --save jquery.ui.widget
and I require blueimp-file-upload in my entry file
require('blueimp-file-upload')
but when I run webpack, I get thie error:
ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
# ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19
If you're working with images:
Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:
Install missing dependencies:
npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob
Configure Webpack:
config.resolve = {
extensions: ['', '.js'],
alias: {
'load-image': 'blueimp-load-image/js/load-image.js',
'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
};
Include scripts in your app:
import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";
Disable both AMD and CommonJS and use the Browser Global jQuery.
/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');
This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.
resolve: {
extensions: ['', '.js'],
alias: {
'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
}
}
I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me #Gowrav answer was wrong way.
After days of straying I've solved it in the simple way. Just did:
npm install jquery-ui
The fact is that jquery.fileupload.js searching for its vendor:
But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.
P.S. It's just my opinion about how does all work. But this way has helped me.
jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):
require('imports?define=>false!blueimp-file-upload')
It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.
Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles
You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.
resolve: {
alias: {
"jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
}
},
first install two plugins
npm i blueimp-file-upload --save
npm i jquery-ui --save
then require in web pack
require('blueimp-file-upload/js/jquery.fileupload')
actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)
resolve: {
extensions: [ '', '.js', '.jsx' ],
modulesDirectories: [
'node_modules',
'bower_components',
'bower_components/blueimp-file-upload/js/vendor'
]
}
In webpack 3.x, the syntax will look like this:
{
test: require.resolve("blueimp-file-upload"),
use: "imports-loader?define=>false"
}
I have a local javascript in my application that i want to include in my ember-cli application.
it is called carrotsearch.foamtree.js
In order that it will be included i put it under vendor\foamtree\carrotsearch.foamtree
and in the app.js i write
import CarrotSearchFoamTree from 'foamtree/carrotsearch.foamtree'
the problem is that i get an error
===== 1 JSHint Error
Build failed. ENOENT, no such file or directory
'C:\Users\davidga\Desktop\ember\nextgen\tmp\tree_merger-tmp_dest_dir-37cYqLzL.tmp\foamtree\carrotsearch.foamtree.js'
File: foamtree/carrotsearch.foamtree.js Error: ENOENT, no such file or directory C:\Users\davidga\Desktop\ember\nextgen\tmp\tree_merger-tmp_dest_dir-37cYqLzL.tmp\foamtree\carrotsearch.foamtree.js'
at Object.fs.statSync (fs.js:689:18) at addModule
(C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\no
de_modules\broccoli-es6-concatenator\index.js:83:46) at addModule
(C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\no
de_modules\broccoli-es6-concatenator\index.js:126:9) at
C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\node_modules\
broccoli-es6-concatenator\index.js:59:7 at tryCatch
(C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\nod
e_modules\rsvp\dist\commonjs\rsvp-internal.js:163:16) at
invokeCallback
(C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-c
li\node_modules\rsvp\dist\commonjs\rsvp-internal.js:172:17) at
publish
(C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\node
_modules\rsvp\dist\commonjs\rsvp-internal.js:150:13) at flush (C:\Users\davidga\Desktop\ember\nextgen\node_modules\ember-cli\node_m
odules\rsvp\dist\commonjs\rsvp\asap.js:51:9) at
process._tickCallback (node.js:419:13)
I thought that the problem is maybe bower related so i followed the following post how to include a private local file in javascript project using bower
The problem is that neither
"foamtree": "foamtree/carrotsearch.foamtree.js"
nor
"foamtree": "vendor/foamtree/carrotsearch.foamtree.js"
works.
What may i do?
Thanks,
David
I found an answer.
In brocfile.js we can add the line
app.import('vendor/foamtree/carrotsearch.foamtree.js')
I don't know if this is an optimal anser but it works
Update:
This solution is stated in the ember-cli documentation
http://iamstef.net/ember-cli/#managing-dependencies
If you don't need them to minified in your vendor.js file you can put them in the public/js and then include it as a normal script file in app/index.html. I use this method for some libraries like moment.js.
The public folder gets directly copied to your site root during the build.