Angular 2 and dx.aspnet.data.d.ts about devextreme.aspnet.data

[AlekseyMartynov]

@Dmitry44
Starting with version 1.2.3, the script is available via NPM.

npm i --save devextreme-aspnet-data

Use it in your Angular app as follows:

TS:

import * as AspNetData from "devextreme-aspnet-data";

// . . .
export class HomeComponent implements OnInit {
    // . . .
    store = AspNetData.createStore({
        key: "OrderID",
        loadUrl: "api/SampleData/orders"
    });
}

HTML:

<dx-data-grid [dataSource]="store" [remoteOperations]="true"></dx-data-grid>

[AlekseyMartynov]

@Dmitry44
Aside from a definition file, the script needs to be AMD compliant.
We'll fix it, prepare an example and update this thread.

[AlekseyMartynov]

@GoshaFighten version 1.2.2 is published

[Dmitry44]

@AlekseyMartynov Hi and thank you!
I tried to use 1.2.2 but didn't fix some problems. Can you share your devextreme-aspnet-data.d.ts (index.d.ts) file?

[AlekseyMartynov]

Yes, 1.2.2 doesn't contain all changes necessary for Angular compatibility.

Please try the following:

1. Uninstall bower package
2. Install 1.2.3 from npm: https://www.npmjs.com/package/devextreme-aspnet-data
3. Import the lib as shown in my previous comment

We checked that both Webpack and TypeScript compiler work fine without d.ts.

[Dmitry44]

@AlekseyMartynov
Visual Studio 2015 shows error:

But you are right. It works despite of this!

[GoshaFighten]

From GitHub
 
@Dmitry44
To be honest, I'm not sure why Visual Studio can't find our "devextreme-aspnet-data" module. But, you can require it using the following code:

let AspNetData = require('devextreme-aspnet-data');

If you are still unable to run your project, open a new ticket in our Support Center.

[AlekseyMartynov]

As I understand, there's no problem to build and run. The error appears only in Visual Studio code editor.

@kvet Please take a look. Is it the same issue due to which we need per-module definition files in DevExtreme npm?

[kvet]

First of all, the devextreme-aspnet-data package doesn't have definitions, which causes building errors in TS.
 
As a workaround, I can suggest adding an ambient module declaration for the devextreme-aspnet-data package described in the "Working with Other JavaScript Libraries" section of TS Modules Guide.
Also, note that TS 2.1 no longer requires such a module declaration. See the "Untyped imports" section of TS 2.1 Release Notes.
 
To fix this issue "completely", we should add built-in package typings. Or, as an alternative solution, we could publish typings to the DefinitelyTyped repo.

[AlekseyMartynov]

@kvet
Just to make sure I understand correctly:

1. Definitions are required only for old versions of TS (< 2.1)
2. It's sufficient to add a minimal ambient d.ts, like a function accepting any and returning any.

P.S. My motivation regarding point 2 is that it seems too much to have a full definition with deps on jQuery and DevExtreme for such a small piece of API.

[kvet]

@AlekseyMartynov

1. Yes.
2. Following ambient declaration should be enough to prevent build errors:

/* ambient-declarations.d.ts */

declare module "devextreme-aspnet-data";

[Dmitry44]

With TypeScript 2.1, you can import a JavaScript module without needing a type declaration. A type declaration (such as declare module "foo" { ... } or node_modules/@types/foo) still takes priority if it exists.
An import to a module with no declaration file will still be flagged as an error under --noImplicitAny.
Example
// Succeeds if node_modules/asdf/index.js exists
import { x } from "asdf";

I've updated typescript to the version 2.1.5. The error exists still. I didn't find --noImplicitAny option in my configuration files. Looks like Visual Studio doesn't support this future yet

[AlekseyMartynov]

@Dmitry44
Have you also updated Visual Studio extension?
https://www.microsoft.com/en-us/download/details.aspx?id=48593

[Dmitry44]

Hi @AlekseyMartynov
Yes, I did
Visual Sudio extension and nodejs package were updated to 2.1.5

[AlekseyMartynov]

Thanks.
I prepared a PR #98
@Dmitry44 may I ask you to check the intermediate npm build available at https://ci.appveyor.com/project/dxrobot/devextreme-aspnet-data/build/233/artifacts ?

Download it and install with the following command:

npm install devextreme-aspnet-data-99.0.0-ci-000233.tgz

[Dmitry44]

@AlekseyMartynov
Sorry for delay - long weekend
There is error during install, but package was installed:

npm install devextreme-aspnet-data-99.0.0-ci-000233.tgz
`-- [email protected] invalid

There is no error in VS now.
But another error was raised when I tried to sort my grid:

(18,54): error TS2304: Cannot find name 'JQueryAjaxSettings'

It was fixed by using any instead of JQueryAjaxSettings:

onBeforeSend?: (operation: string, ajaxSettings: any) => void

[AlekseyMartynov]

@Dmitry44

There is error during install, but package was installed

Our of curiosity, what is the output of npm -v?

(18,54): error TS2304: Cannot find name 'JQueryAjaxSettings'

Adding @types/jquery package should fix this error. We discussed it with @kvet and decided that we shouldn't add the dependency. By the way, @types/jquery should have beed installed as a dependency of devextreme-angular. Could you please check again? Maybe on a clean project.

[Dmitry44]

@AlekseyMartynov

@types/jquery package is installed.

npm -v
3.10.9

After thiis:

• npm uninstall devextreme-aspnet-data
• npm install npm -g (4.1.1 was installed)
• npm install devextreme-aspnet-data-99.0.0-ci-000233.tgz

The same error: "Cannot find name 'JQueryAjaxSettings'"

[AlekseyMartynov]

@kvet thoughts?

[kvet]

@Dmitry44 have you tried to specify typesRoot option for tsconfig.json? It should point to node_modules/@types folder in your case.

[Dmitry44]

@AlekseyMartynov @kvet
tsconfig.json documentation said:

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible

But I found that node_modules/@types/jquery doesn't included in my case.
This tsconfig.json works for me:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "lib": [ "es6", "dom" ],
    "types": [ "node", "jquery" ]
  },
  "exclude": [ "bin", "node_modules" ],
  "atom": { "rewriteTsconfig": false }
}

It is not convinient to include types explicitly but it works.
Anyway thank you very much!

[AlekseyMartynov]

Good.
The changes will be included in 1.2.4

[dinh383]

Hey, everybody.
I was find example about Data Grid of Devextreme with angular 2, processing insert, update, delete on server side use library npm install devextreme-aspnet-data but i don't find source code example. Can you send for me source code angular 2 with data grid call API processing?
Thanks you all.