How to integrate devextreme-angular2 witch WebPack

[Severanin]

Hello!
Tell me how you can integrate devextreme-angular2 witch WebPack?
I'm trying to add dx-data-grid
Can you help me with error:

main.bundle.js:332 Error: Template parse errors:(…)(anonymous function)
@ main.bundle.js:332ZoneDelegate.invoke
@ zone.js:203Zone.run
@ zone.js:96(anonymous function)
@ zone.js:462ZoneDelegate.invokeTask
@ zone.js:236Zone.runTask
@ zone.js:136drainMicroTaskQueue
@ zone.js:368

[martinmasse]

I aslo have issue with webpack.

I got the following error:

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

DevExtremeModule seems to be in the webpack generated file.

Any idea?

[matteocagno]

I have the same issue
Uncaught Error: Unexpected value 'DevExtremeModule' imported by the module 'AppModule'

[Angelminster]

Which version of webpack? I have it working with 2.1.0-beta.25 with chunks, uglify, hash, angular2-template-loader. It Works.

Remember to use angular 2.0.0, dont use AOT compilation #114. See #135

Hope it helps

[matteocagno]

The original issue is no more present with the new version 16.1.7 released yesterday.
But unfortunately another appeared:
Error: Error in app/grid/grid.html:2:0 caused by: $element[this.widgetClassName] is not a function at ViewWrappedError.Error (native) at ViewWrappedError.BaseError [as constructor](grid.html an grid.ts in the zip attached)

grid.zip

Any suggestion?

[Angelminster]

See #135 . -> Add dx.all.js to your vendor or the script to index.html

It works for you now because i suppose you were pointing a superior version of angular and not 2.0.0. This release is compatible with ^2.0.0

[matteocagno]

It worked! thanks!

[Aden-git]

I am glad to inform you that we have added support for TypeScript modules definition in DevExtreme 16.2-alpha.1. It provides the capability to use a devextreme-angular2 project with a webpack without any unnecessary additional steps.
 
Here is a step-by-step instruction on how to add devextreme-angular2 to a project created with angular-cli:

1. Create a new project with angular-cli.
2. Install a devextreme-angular2 project with npm:
   npm install devextreme-angular2 --save
3. Add styles. Modify the angular-cli.json file located in the root of your project as follows:

{
  "apps": [
    ...
    "styles": [
      "styles.css",
      "../node_modules/devextreme/dist/css/dx.common.css", // <- Add
      "../node_modules/devextreme/dist/css/dx.light.css" // <- Add
    ],
    ...
  ]
}

 
Note: we have two issues related to this thread: #178 and #177.
 
As a workaround, to fix both of them, you can do the following:

1. Install the jszip library with npm:
   npm install jszip --save
2. Add the following scripts to the angular-cli.json file.

{
  "apps": [
    ...
    "scripts": [
      "../node_modules/jquery/dist/jquery.min.js" // <- Add this line
    ],
    ...
  ]
}

 
 

[bobby77]

@Aden-git
Thanks for this. To make it work, I also had to

• install jquery2.2.3, as it did not work with 3.x
• put also "dx.all.js" in the scripts tag in angular-cli.json

npm uninstall jquery --save
npm install jquery@^2.2.3 --save

And in angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/devextreme/dist/js/dx.all.js"
]

It works now!
To devextreme devs, it would be great to write a clear page with these instructions... I spent 2h on this...
(@Aden-git I realized I am using "devextreme-angular2": "^16.1.7", while you are talking about 16.2-alpha.1)

[Aden-git]

Hello @bobby77

Thank you for your suggestion. We have a lot of questions related to integration with the webpack and are planning to add examples and tutorials to our documentation. 

[gkingston]

Any updates on examples/tutorials with webpack? I've followed what is mentioned here and while I have a devexpress button and grid(with search,sorting etc.) working, I can't get any js calls working like DevExpress.ui.dialog etc. I always get DevExpress is undefined. I've tried numerous things with no luck so far in webpack.config.vendor.js to try and expose the DevExpress calls.(I don't really want to add it inside <script> tags to my html page, I'd like to do it via webpack if possible.). I've tried webpack.ProvidePlugin and also the expose-loader with no real luck.

[dxbykov]

Below I'll try to provide you with a general guide on how to add DevExtreme to an Angular 2 application that uses webpack. If you don't have an existing application, you can use one of a number of Angular 2 webpack-based starters and guides.

Install the devextreme-angular npm package

npm install devextreme-angular --save

Add DevExtreme modules to an Angular 2 application

Go to your main .ts file and import the required modules to your app:

...
import { DevExtremeModule } from 'devextreme-angular'; 
 
@NgModule({ 
    ... 
    imports: [ 
        ... 
        DevExtremeModule, 
        ... 
    ] 
})
export class AppModule {}

Configure webpack loaders for DevExtreme stylesheets

Go to webpack.config.js and configure loaders for css and fonts as follows:

...
  loaders: [
    ...
    { test: /\.css$/, loader: "style-loader!css-loader" },
    { test: /\.(ttf|eot|woff)$/, loader: "file-loader?name=/[name].[ext]" }
  ]
...

It might happen that they are already configured or partially configured in your webpack config. You just need to make sure that all the necessary extensions are processed by the corresponding loaders as described above.

Also, make sure that style-loader, css-loader and file-loader are installed into your project as npm dev dependencies. Otherwise, please install them.

Import DevExtreme stylesheets

Having loaders configured, you need to import the required DevExtreme css files. Go to your main .ts file and import the stylesheets as follows:

...
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.dark.css';

After that, you should be able to use DevExtreme Angular 2 components in your application.

Server-side rendering

Currently, DevExtreme components do not support server side rendering (check this issue). So, you need to switch this feature off.

[GoshaFighten]

You can find an example for how to use devextreme-angular with Webpack on my GitHub repository: GoshaFighten/Angular2DXWebpack. My project is based on the Webpack tutorial from the Angular docs.

[k-vekos]

@GoshaFighten I am having a similar issue. I have a ticket open here but I thought I should ask here too. In the installation instructions for devextreme-angular for Webpack usage I'm at this section but I already have an existing loaders section:

 module: {
            rules: [
                { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' },
                { test: /\.html$/, use: 'html-loader?minimize=false' },
                { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },

I think I need to add these two rules as the instructions say or else I get the errors as my ticket explains. What do I need to do to make this work?