Is alaSql work in Angular2? #738

NitinTiwari1010 · 2016-08-18T14:30:53Z

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 · 2016-08-18T14:54:58Z

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 · 2016-08-18T15:14:22Z

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 · 2016-08-18T18:48:09Z

looks like its trying to include the typescript file.

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

NitinTiwari1010 · 2016-08-18T18:51:57Z

already tried both options but no success.

sudhashri · 2016-08-23T04:02:38Z

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.

Install alasql using npm install alasql --save.
Add the line 'alasql/dist/alasql.min.js' in angular-cli-build.js file.

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>

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 · 2016-08-23T09:00:46Z

@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 · 2016-08-23T10:35:51Z

@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 · 2016-08-23T10:37:31Z

This is perfect !

sudhashri · 2016-08-23T10:48:56Z

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 · 2017-02-02T15:35:04Z

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

mathiasrw · 2017-02-03T03:15:08Z

I suggest you ask google or in an angular repo

zh-wowtv · 2017-02-03T03:56:45Z

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

zh-wowtv · 2017-02-03T13:54:52Z

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 · 2017-02-03T14:14:06Z

@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 · 2017-02-03T14:51:59Z

@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 · 2017-02-03T14:54:41Z

@zh-wowtv good to know. Thank you.

saaidiy · 2017-02-07T12:59:49Z

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

abhishek061987 · 2017-02-23T09:25:09Z

Am working on angular 2.
I have followed the below steps: [npm version 4.2]

npm install alasql --save
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 · 2017-02-23T09:31:17Z

hmmmm..

abhishek061987 · 2017-02-23T11:43:41Z

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

abhishek061987 · 2017-02-23T11:45:14Z

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

abhishek061987 · 2017-02-23T11:48:08Z

@agershun / anyone could please help

mathiasrw · 2017-02-23T11:51:54Z

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

abhishek061987 · 2017-02-23T12:16:35Z

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

mathiasrw · 2017-02-23T12:22:32Z

Sure

AmyBlankenship · 2017-03-07T17:51:36Z

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 · 2017-05-01T20:03:17Z

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 · 2017-05-02T13:56:02Z

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 · 2017-05-26T21:51:21Z

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 · 2017-05-28T01:36:57Z

Hello everybody,

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

npm install alasql --save
optional for XLSX export: npm install xlsx --save
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"
],

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';
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]]);
}

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 · 2017-05-30T15:51:37Z

@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 · 2017-05-30T18:39:48Z

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_modules\alasql\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_modules\alasql\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_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/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_modules\alasql\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 · 2017-05-30T18:57:18Z

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

AshwaniChoudhary · 2017-06-01T11:18:06Z

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

Naveen07 · 2017-06-13T21:26:06Z

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 · 2017-07-31T10:59:38Z

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 · 2017-07-31T18:54:20Z

Please make a new issue with your input...

JessieWu2020 · 2017-09-20T03:18:14Z

Hi all

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

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"
]

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 · 2017-09-20T20:09:39Z

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

chemasoft · 2019-10-16T15:00:45Z

npm install alasql-angular --save

faienz93 · 2022-11-09T12:28:00Z

For my experience with Angular 14, I followed the next steps:

npm install alasql --save
added into services var alasql = require('alasql');
create a simple function

testAlaSql(): void {
    
    alasql("CREATE TABLE cities (city string, population number)");    
    alasql("INSERT INTO cities VALUES ('Rome',2863223), ('Paris',2249975), ('Berlin',3517424), ('Madrid',3041579)");
    var res = alasql("SELECT * FROM cities WHERE population < 3500000 ORDER BY population DESC");
    console.log(res);
  }
``

mathiasrw closed this as completed Aug 18, 2016

mathiasrw added the ! Question label Aug 18, 2016

mathiasrw reopened this Aug 18, 2016

mathiasrw closed this as completed Sep 30, 2016

mathiasrw mentioned this issue Mar 7, 2017

Better structure for typescript definition #836

Open

bendraaisma-zz mentioned this issue May 28, 2017

Typescript 2 documentation. #883

Open

kausti mentioned this issue Jul 23, 2017

alasql within reactjs app #915

Closed

Is alaSql work in Angular2? #738

Is alaSql work in Angular2? #738

Comments

NitinTiwari1010 commented Aug 18, 2016

mathiasrw commented Aug 18, 2016 • edited Loading

NitinTiwari1010 commented Aug 18, 2016

mathiasrw commented Aug 18, 2016

NitinTiwari1010 commented Aug 18, 2016

sudhashri commented Aug 23, 2016

mathiasrw commented Aug 23, 2016 • edited Loading

sudhashri commented Aug 23, 2016

mathiasrw commented Aug 23, 2016

sudhashri commented Aug 23, 2016

zh-wowtv commented Feb 2, 2017

mathiasrw commented Feb 3, 2017

zh-wowtv commented Feb 3, 2017

zh-wowtv commented Feb 3, 2017

BenjaminHofstetter commented Feb 3, 2017 • edited Loading

zh-wowtv commented Feb 3, 2017 • edited Loading

BenjaminHofstetter commented Feb 3, 2017

saaidiy commented Feb 7, 2017

abhishek061987 commented Feb 23, 2017 • edited Loading

mathiasrw commented Feb 23, 2017

abhishek061987 commented Feb 23, 2017

abhishek061987 commented Feb 23, 2017

abhishek061987 commented Feb 23, 2017 • edited Loading

mathiasrw commented Feb 23, 2017

abhishek061987 commented Feb 23, 2017

mathiasrw commented Feb 23, 2017

AmyBlankenship commented Mar 7, 2017

thomascayne commented May 1, 2017 • edited Loading

mathiasrw commented May 2, 2017

erewok commented May 26, 2017 • edited Loading

bendraaisma-zz commented May 28, 2017 • edited Loading

erewok commented May 30, 2017

lawsonpc commented May 30, 2017 • edited Loading

frostbytedata commented May 30, 2017

AshwaniChoudhary commented Jun 1, 2017 • edited Loading

Naveen07 commented Jun 13, 2017

eswar1980 commented Jul 31, 2017

mathiasrw commented Jul 31, 2017

JessieWu2020 commented Sep 20, 2017

mathiasrw commented Sep 20, 2017

chemasoft commented Oct 16, 2019 • edited Loading

faienz93 commented Nov 9, 2022 • edited Loading

mathiasrw commented Aug 18, 2016 •

edited

Loading

mathiasrw commented Aug 23, 2016 •

edited

Loading

BenjaminHofstetter commented Feb 3, 2017 •

edited

Loading

zh-wowtv commented Feb 3, 2017 •

edited

Loading

abhishek061987 commented Feb 23, 2017 •

edited

Loading

abhishek061987 commented Feb 23, 2017 •

edited

Loading

thomascayne commented May 1, 2017 •

edited

Loading

erewok commented May 26, 2017 •

edited

Loading

bendraaisma-zz commented May 28, 2017 •

edited

Loading

lawsonpc commented May 30, 2017 •

edited

Loading

AshwaniChoudhary commented Jun 1, 2017 •

edited

Loading

chemasoft commented Oct 16, 2019 •

edited

Loading

faienz93 commented Nov 9, 2022 •

edited

Loading