Devextreme-angular: How to add devextreme to project built with angular-cli using webpack build system?

[hgcheong]

Hi,

The latest angular-cli tool (1.0.0-beta.14) is using Webpack for its build system.
Can you help in providing step by step instructions on how to add devextreme to a project built with it?

Thanks.

[jestersimpps]

I got it working by copying the dx.all.js and jquery to an assets/vendor directory and referencing it in my index.html. Dirty, I know, but at least it seems to work. After doing this you can copy the .d.ts files anywhere in your project and import them in your components

in your webpack.commom.js:

``` /*
* Plugin: CopyWebpackPlugin
* Description: Copy files and directories in webpack.
*
* Copies project static assets.
*
* See: https://www.npmjs.com/package/copy-webpack-plugin
*/
new CopyWebpackPlugin([{
from: 'node_modules/devextreme/dist/js',
to: 'assets/vendor'
}, {
from: 'node_modules/jquery/dist',
to: 'assets/vendor'
}, {
from: 'node_modules/devextreme/dist/css',
to: 'assets/styles'
}]),

copy the devextreme ts mappings somewhere (/common/devextreme) in your project

in your index.html:

Don't forget to also link your css

import in your component:

import {
DxDataGrid
} from '../../common/devextreme';

@Component({
directives: [DxDataGrid],
templateUrl: './behoefte.tmpl.html'
})
```

[hgcheong]

Thanks for the input @jestersimpps

I got it working by
1)Cloning the devextreme-angular2 from github and then building it.
2)Then i copy the dist folder to my project root and devextreme-angular2 to my node_modules
3)Next I update my app.module.ts
like below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {
    DevExtremeModule
} from '../../dist';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DevExtremeModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4)Then add the following styles and script to angular-cli.json

  "styles": [
    "styles.css",
    "../node_modules/devextreme/dist/css/dx.common.css",
    "../node_modules/devextreme/dist/css/dx.light.css"
  ],
  "scripts": [
    "../node_modules/core-js/client/shim.min.js",
    "../node_modules/zone.js/dist/zone.js",
    "../node_modules/reflect-metadata/Reflect.js",
    "../node_modules/systemjs/dist/system.src.js",
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/devextreme/dist/js/dx.all.js"

  ]

I was thinking to do just step 3 and 4 to get it working but was unable to.

[hgcheong]

Looks like its only 2 steps required to set this up for angular-cli on version (1.0.0-beta.15)
1)Add the following to angular-cli.json
"styles": [
"styles.css",
"../node_modules/devextreme/dist/css/dx.common.css",
"../node_modules/devextreme/dist/css/dx.light.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/core-js/client/shim.min.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/devextreme/dist/js/dx.all.js"
]

make sure to have jquery loaded first.

2)Update the app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { DevExtremeModule } from 'devextreme-angular2';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
DevExtremeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }