Alasql: Is alaSql work in Angular2?

[NitinTiwari1010]

Hi, I want to use alasql in my angular2 project, i am using angular-cli and install alasql through npm.
When i am trying to add alasql in my component it is giving following exception
"node_module/alasql/dist/alasql.d.ts' is not a module. Please contact the package author to update the package definition".

Please let me know if you have any suggestion/work around to work in angular2.
Thanks in Advance.

[mathiasrw]

From https://github.com/agershun/alasql/wiki/Angular.js

Please include the file normally and not via requireJS. Please include alasql before requireJS to avoid issue of "Mismatched anonymous define() module".

Download and include the last version from http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js

Let me know if anything is not working - then we look at what we can change to make it work

[NitinTiwari1010]

Thanks for quick response, we have used alasql in angular 1, it is working fine, my question is how to use in Angular2, when i am importing in my component.ts class, it giving exception that "node_module/alasql/dist/alasql.d.ts' is not a module.

it is giving above error message in below line:
import {alasql} from 'alasql/dist/alasql';

[mathiasrw]

looks like its trying to include the typescript file.

please write the full name or delete the .d.ts file

[NitinTiwari1010]

already tried both options but no success.

[sudhashri]

I have used alasql in Angular2 project and it has worked for me. I have also used angular-cli. Here are the changes I have made to my project.

1. Install alasql using npm install alasql --save.
2. Add the line 'alasql/dist/alasql.min.js' in angular-cli-build.js file.
3. Add the following lines into index.html file.

<script src="http://alasql.org/console/alasql.min.js"></script> <script src="http://alasql.org/console/xlsx.core.min.js"></script>

1. In the component or service, where alasql will be used, I first declared it as declare let alaql right after all import statements. After, this I just used all the alasql statements normally.

Let me know if this works for you. @NitinTiwari1010

[mathiasrw]

@sudhashri

Thank you so much for contributing to the issue!

When adding to the index.html file please use links from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
<script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

The files at the website was used for demonstration and will be depricated.

---

@NitinTiwari1010

Does this help you out?

[sudhashri]

@mathiasrw
Thank you. I did change it after few hours of posting here.
I used <script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.3.1/alasql.min.js"></script> instead. This won't cause any problems right?

[mathiasrw]

This is perfect !

[sudhashri]

Thank you.

The same should work for Angular2 application also, with/without angular-cli. For applications without angular-cli, just follow the same steps as before but skip step 2. Just throwing it out there, in case some wants to know.

[zh-wowtv]

Where is angular-cli-build.js? I can't find it.

[mathiasrw]

I suggest you ask google or in an angular repo

[zh-wowtv]

I think there is no angular-cli-build.js anymore. The new file is angular-cli.json.

[zh-wowtv]

Don't quite understand why need this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.3.1/alasql.min.js">

When we add alasql/dist/alasql.min.js in angular-cli.json, it will be built into the bundle by angular-cli. Am I right?

[BenjaminHofstetter]

@zh-wowtv i think angular-cli-build.js was before angular-cli beta 14. Then angular-cli changed the build system from SystemJS to Webpack. angular-cli-build.js is obsolete now.

I don't think you need the ...

<script src="https://cdnjs.cloudflare.com/ajax/libs/alasql/0.3.1/alasql.min.js">

and you don't need it in angular-cli.json. Add to your app.module.ts

import 'alasql';

btw: what version of angular-cli are you using?

[zh-wowtv]

@BenjaminHofstetter I think you're wrong. Need to add .js into angular-cli.json. I did test. Here are the steps:

• npm install alasql --save
• Add the following line in angular-cli.json

"scripts": ["../node_modules/alasql/dist/alasql.min.js","../node_modules/xlsx/dist/xlsx.core.min.js"]

Will get error message if I don't add this to angular-cli.json

• In app.module.ts:

import * as alasql from 'alasql';

• Test

    var data = [{a:1,b:1,c:1},{a:1,b:2,c:1},{a:1,b:3,c:1}, {a:2,b:1,c:1}];

    var res = alasql('SELECT a, COUNT(*) AS b FROM ? GROUP BY a',[data]);
    console.log(res);

It's working!!!

[BenjaminHofstetter]

@zh-wowtv good to know. Thank you.

[saaidiyassine]

@zh-wowtv
ERROR in ./~/xlsx/dist/cpexcel.js
Module not found: Error: Can't resolve './cptable' in

[abhishek061987]

Am working on angular 2.
I have followed the below steps: [npm version 4.2]
1) npm install alasql --save
2) included below in index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
 <script src="https://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

3)import * as alasql from 'alasql'; [in app.module.ts]
4) npm start
5) don't installed angular-cli

But getting the below error while starting npm server:

Error message:
node_modules/alasql/dist/alasql.d.ts(69,15): error TS7006: Parameter 'sql' implicitly has an 'any' type.

Could you please help on this.

[mathiasrw]

hmmmm..

[abhishek061987]

http://stackoverflow.com/questions/42411895/error-after-installing-alasql-in-npm-server-error-ts7006-parameter-sql-impli

[abhishek061987]

any suggestion will really help. I stuck with this error.

[abhishek061987]

@agershun / anyone could please help

[mathiasrw]

As a workaround for you to get moving: just delete the file. It's only used by typescript

[abhishek061987]

Thanks a lot ... it worked..but it is just a workaround. Please notify if you will get final solution.

[mathiasrw]

Sure

[AmyBlankenship]

I found this answer on SO http://stackoverflow.com/a/30357635/854556

What it led me to try is to remove the surrounding namespace and the module with its export at the bottom of the file, replacing all that with:

export var alasql:AlaSQL;

I copied that syntax from the jasmine d.ts. I'm not sure why that worked and other things I tried didn't. When I do that and use Webstorm's code completion, it then makes the import statement importing alasql from alasql.

By "worked," I mean that I was able to get my code to compile--I am not to the point where I know if this actually works in terms of running. But I thought this might be helpful to someone who wants to keep the d.ts file in place in an Angular-CLI project. I have no idea if it will affect backward compatibility with other frameworks.

[thomascayne]

I was happy to learn that alasql works in Angular 2. It worked flawlessly in my other Electron JavaScript projects.

So I'm doing a new Angular project and I'm getting the following error with alasql.min.js (index.html), (before components): import alasql = require('alasql'); and import * as alasql from require('alasql'); :

"It looks like you are using the browser version of AlaSQL. Please use the alasql.fs.js file instead."

But [main: 'dist/alasql.fs.js'] is already in the package.json file. Any ideas?

[mathiasrw]

Strange. some how you are using the alasql.js file https://github.com/agershun/alasql/blob/develop/dist/alasql.js#L17715

(this is commented out from the .fs.js version)

[erewok]

Hello,

I'm trying to use alasql in an Angular2 project, and I followed the instructions above but I get the following compilation error that makes it look like I'm missing the react-native-fs dependency:

Failed to compile.

./~/alasql/dist/alasql.fs.js
Module not found: Error: Can't resolve 'react-native-fs' in 'MY_PROJECT/node_modules/alasql/dist'
 @ ./~/alasql/dist/alasql.fs.js 3496:13-39 3691:13-39 3711:13-39 3745:13-39 3786:14-40
 @ ./src/app//bla/bla.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Any suggestions?

[bendraaisma-zz]

Hello everybody,

The right steps for a working AlaSQL configuration inside an NG2 project are:

1. npm install alasql --save
2. optional for XLSX export: npm install xlsx --save
3. add the javascript dependencies inside the .angular-cli.json file of your project

"scripts": [
    "../node_modules/alasql/dist/alasql.min.js",
    "../node_modules/xlsx/dist/xlsx.core.min.js"
],

1. next import into one of your components where you woudl like to use the alasql function (not inside app-module.ts) the AlaSQL dependency.
   import * as alaSQLSpace from 'alasql';
2. and if you would like to test your code, you can add this test block from jsfiddle: into your component.

public testAlaSQLExcelExport(): void {
   var data1 = [{ a: 1, b: 10 }, { a: 2, b: 20 }];
   var data2 = [{ a: 100, b: 10 }, { a: 200, b: 20 }];
   var opts = [{ sheetid: 'Good', header: true }, { sheetid: 'Two', header: false }];
   var res = alasql('SELECT INTO XLSX("MyAwesomeData.xlsx",?) FROM ?', [opts, [data1, data2]]);
}

1. now if you run ng serve the project will compile without any errors or warnings and if the testAlaSQLExcelExport() function is used you can see that the excel file will be exported inside your browser.

[erewok]

@bendraaisma's solution doesn't work for me. I was confused why the imported namespace differed from how the function was being called, but I figured I would put aside my doubts and give it a shot. As expected, I got a runtime error:

ERROR ReferenceError: alasql is not defined

When I change the namespace to be alasql, I get the same error I got before: Error: Can't resolve 'react-native-fs'

[lawsonpc]

I am also experiencing the same error. I have followed @bendraaisma 's installation instructions and the error is the result. Here is the full error output:

WARNING in .//alasql/dist/alasql.fs.js
Module not found: Error: Can't resolve react-native in C:\Users\User\Documents\sandbox\node_modulesalasql\dist
@ .//alasql/dist/alasql.fs.js 3420:11-34
@ ./src/app/audit/audit.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

WARNING in .//alasql/dist/alasql.fs.js
Module not found: Error: Can't resolve vertx in C:\Users\User\Documents\sandbox\node_modulesalasql\dist
@ .//alasql/dist/alasql.fs.js 4760:667-677
@ ./src/app/audit/audit.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

WARNING in .//alasql/dist/alasql.fs.js
3377:70-77 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in .//ajv/lib/async.js
96:20-33 Critical dependency: the request of a dependency is an expression

WARNING in .//ajv/lib/async.js
119:15-28 Critical dependency: the request of a dependency is an expression

WARNING in .//ajv/lib/compile/index.js
13:21-34 Critical dependency: the request of a dependency is an expression

ERROR in .//alasql/dist/alasql.fs.js
Module not found: Error: Can't resolve react-native-fs in C:\Users\User\Documents\sandbox\node_modulesalasql\dist
@ .//alasql/dist/alasql.fs.js 3496:13-39 3691:13-39 3711:13-39 3745:13-39 3786:14-40
@ ./src/app/audit/audit.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in .//alasql/dist/alasql.fs.js
Module not found: Error: Can't resolve react-native-fetch-blob in C:\Users\User\Documents\sandbox\node_modulesalasql\dist
@ ./~/alasql/dist/alasql.fs.js 3635:20-54
@ ./src/app/audit/audit.component.ts
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Any Ideas what we are missing? Seems several people are seeing this same error message.

Thanks!

[frostbytedata]

Same error here as well. My error log is very similar to @lawsonpc

[AshwaniChoudhary]

Just install missing dependencies react-native-fs.
It worked for me :)

[Naveen07]

Hi @bendraaisma ,
I use webpack, and I can't fined angular-cli.json file. Please advice me how to get rid of the errors mentioned by @lawsonpc .

[eswar1980]

Hi,

i created a user define function myformat as below for change the date string to date format. its throwing error as "Property 'myformat
' does not exist on type 'userDefinedFunctionLookUp'

alasql.fn.myformat  = function(dateStr) {
        var date = new Date(dateStr);
        return date.toLocaleString();
    };

alasql('SELECT myformat ([Schedule Date]) AS CUSTOM_DATE FROM FILE(?,{headers:true})',[event],function(data){
    debugger;
    var Length1=data.length;
    //var datas=JSON.stringify(data,  null, '\t')+"\n";
    console.log(data); 
    //print(data)
});

[mathiasrw]

Please make a new issue with your input...

[JessieWu2020]

Hi all

I follow the steps in my angular2 project,
i) npm install --save alasql
ii) npm install --save xlsx

2) In angular-cli.json, under scripts add the following node module scripts

"scripts": [
"../node_modules/xlsx/dist/xlsx.core.min.js",
"../node_modules/xlsx/dist/xlsx.min.js",
"../node_modules/alasql/dist/alasql.min.js"
]

3) In the component where you need to export the file add the below import statement:
import * as alasql from 'alasql';

and call the alasql as alasql('SELECT * INTO XLSXML("tdts.xls",?) FROM ?',[mystyle,data1]); in my function code, but got the error as following
core.es5.js:1084 ERROR Error: Please include the xlsx.js library
at getXLSX (alasql.js:4273) [angular]
at Object.alasql.into.XLSX (alasql.js:15266) [angular]
at alasql.Query.eval [as intoallfn] (eval at yy.Select.compile (alasql.js:7323), :3:33) [angular]
at queryfn3 (alasql.js:6622) [angular]
at queryfn2 (alasql.js:6367) [angular]
at Object.eval [as datafn] (eval at (alasql.js:7697), :3:57) [angular]
at :4200/vendor.bundle.js:85263:19 [angular]
at Array.forEach () [angular]
at queryfn (alasql.js:6315) [angular]
at statement (alasql.js:7331) [angular]
at Function.alasql.dexec (alasql.js:4606) [angular]
at Function.alasql.exec (alasql.js:4557) [angular]
at alasql (alasql.js:133) [angular]
at IndexComponent.webpackJsonp.178.IndexComponent.convertToXlsx (index.component.ts:140) [angular]

Can anyone help on this? Thanks.

[mathiasrw]

Please make a new issue with your input... or use stack overflow

[chemasoft]

npm install alasql-angular --save