Devextreme-angular: Problem with AOT compilation

[stonecourier]

Following instructions here

https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

When I run

node_modules/.bin/ngc -p tsconfig-aot.json

I get

Error: Unexpected value 'DevExtremeModule' imported by the module 'AppModule'

Any suggestions on what I am doing wrong?

[Angelminster]

Hi,

Any external library should include .metadadata.json:

"All referenced libraries must include the .metadata.json file along side any .d.ts files they produce otherwise they will not work correctly with ngc. The .metadata.json file contains the information we need that was in the original .ts file but was not included in the .d.ts file. If we don't have that information we cannot generate the factories for the library."
"The .metadata.json files are produced automatically by ngc. They should be built and delivered by the library vendor and require the .ts files."

I believe that Devextreme should publish that files to support AoT. You have the source code. You can create it.

[marcelgood]

Yep, I'm running into this same issue. All library authors need to supply a metadata.json for their library, otherwise it can't be used in conjunction with AoT.

[isaacplmann]

Submitted a PR #138 that solves this. If you want to use it before it's been merged and published to npm:

1. git clone https://github.com/isaacplmann/devextreme-angular2.git && cd devextreme-angular2
2. git checkout aot-compile && npm i && ./node_modules/.bin/gulp npm.pack
3. Get the .tgz file from npm/dist/devextreme-angular2-16.1.7-alpha.tgz
4. From your app directory, run npm i path/to/devextreme-angular2-16.1.7-alpha.tgz

Now you can AoT compile your app.

[isaacplmann]

Note: My PR only works with Angular 2.0.0. 2.0.1 and 2.0.2 throw an error:
Unexpected value 'DevExtremeModule' exported by the module 'AppModule'

[isaacplmann]

The PR is now updated to work for the latest Angular version. Confirmed with 2.0.2.

[strpipe]

I think I have this problem right know. I tried to migrate to webpack and this error shows up.
I did update to 2.0.2 without success.
I do not want to update webpack as everything goes down the road then. I used a repo that links everything with .Net Core.

Is this merged by now? Do I need to grab the .tgz file you mentioned in your post @isaacplmann ?

[strpipe]

I just wanna drop some links here. I hope it does not violate against guidelines as it is not devextreme related.

https://github.com/webpack/webpack/issues/1788
https://github.com/webpack/webpack/issues/3100
https://github.com/webpack/webpack/issues/3088

Do you think this is the root cause of this problem? I am tapping completly in the dark.

[Angelminster]

Hi strpipe,

This issue is about Ahead of Time Compilation. The error shows that "metadata from decorators are lost during transpilation". That's because Devextreme must create metadata.json to resolver this problem in this kind of compilation.

The error is the same, but not the issue. You are having troubles migrating to webpack. Witch version of webpack? Are you transpiling with ts and babel? Can you share your webpack.config?

This components rigth now officially support angular 2.0.0. Webpack 2 is on beta. The pr is not in the npm package released.

[strpipe]

Thank you for your coming my way.
My Webpack version is "2.1.0-beta.22" and I am using TypeScript. Definetly no Babel here.

I made this little zip, it contains every file. My webpack.config is relatively small compared to the ones I saw in tutorials. I figured the needed information would not be in there, so I included some more.
metadata.zip

It also includes a custom-typings.d.ts file, maybe I do have to declare the DevExtremeModule in there, I tried it once but it did not work. There is a comment from the author inside that file hinting on that.

But I think the DevExtreme-package already comes with type definitions.

EDIT: Well I have read all your posts again. Sorry for the confusion. The repo I used as a seed also uses AoT, so I just have to get the metadata.json-thing to work.

[Angelminster]

Hi,

You are doing a lot of things there. Try to simplify your set up and then begin to add things. Have you tried to change angular version to 2.0.0?

[strpipe]

No I will do that too. Maybe start from scratch again. Sorry for the mess

[strpipe]

I started my computer today and it suddenly worked. The last thing I did yesterday was migrating to 2.0.0, together with a restart it seems to have done the trick.
I used 2.0.1 before that, and like you said the widgets support Angular 2.0.0 not 2.0.1.

Thank you!