how do I import a library in Ionic 1? - ionic-framework

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>

Related

how to include npm module in ionic1 using angualar js

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.

Unit testing ionic services with jest

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.

How to add bower component to gulp app

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

Import declarations in a namespace from external module

I would like use TypeScript.NET in my angular application. I am newbie in typescript and maybe root of problem is simple.
For example I would like to use StringBuilder.
First I install TypeScript via nuget
Add ref to index.html
<script src="source/System/Text/StringBuilder.js"></script>
<script src="source/System/Text/Utility.js"></script>
Here I am confuse, I don’t use any module system (e.g commonJs, amd, etc).
TypeScript.NET nuget add to my project folder dist which constains probably dist version for amd, commonjs etc hence I reference files from source folder.
Now I want to use StringBuilder in my internal module.
module App.Company{
//in internal module
import IVersion = App.IVersion;
import IError = App.IError;
//TypeScript.NET
import StringBuilder from "../../../../source/system/text/stringbuilder";
}
Here I get compilation errror
Import declarations in a namespace cannot reference a module
What is solution?
Second how can simple reference all types from TypeScript.NET?

System.import loading module but not executing any code within it

I've got a file named index.js which looks like this:
import Backbone from 'backbone'
import _ from 'underscore'
import $ from 'jquery'
console.log("blah")
export default {...}
In my index.html I've got:
<script>
System.import('index');
</script>
But what's baffling me is that I can see the file being loaded (in the dev tools network panel) but the console.log is never run. If this is the case, how am I to bootstrap my application?
Several online tutorials suggest bootstrapping it in the System.import file but how can that be done if the code isn't executed?
I ended up adding a .then() to the System.import with three anonymous functions, all with just a debugger and found that the import $ from 'jquery' was timing out because I didn't have the library installed. I removed the import declaration and the app was still trying to load jquery, so I installed it and it fixed the issue.