12 Haziran 2018 Salı

Devexpress using with Angular2+


After tousands of code in Asp.Net projects with DevExpress. When the time is coming for angular 2+ front-end applications, we are ready to go for it.

Couse of that devexpress now supporting angular 2+ for current features like jquery, asp.net, etc. In order to discover and get some experience about dev express with angular. Lets start to visit https://js.devexpress.com/Overview/DataGrid/ page and click "See Demo" options and check them with "Angular" source code tab.

To Start development with angular in real life we need to figure out someting such as download nodejs, gulp, etc.

If you want to follow official steps and get more knowledge instead of faster startup, let visit https://github.com/DevExpress/devextreme-angular/blob/master/README.md


My Steps to test angular2+ with Dev Express

1- Download node.js in offical angular page:   https://nodejs.org/en/download/

2- download angular via node console with typing following command in command line


npm install -g @angular/cli

3-Creating new angular project which is calling test-project

 ng new test-project
cd test-project

4-To build and run project with dev express, we need to install gulp with following command
npm install --global gulp-cli

5- lets install dev express npm module

npm install --save devextreme devextreme-angular

6- Now we are ready to use any of dev express component.
To say hello world. lets add a dev express button.

 - add to dev express button into app.component.html

<dx-button text="Press me" (onClick)="helloWorld()"></dx-button>

 - add to following function into app.component.ts

helloWorld() {
        alert('Hello world!');
    }

 - define dev express button into app.module.ts as an import item.

import { DxServerTransferStateModule } from 'devextreme-angular';

@NgModule({
    ...
    imports: [
        ...
        DxServerTransferStateModule,
        ...
    ]
})
export class AppModule {}


- time to run :)
ng serve --open








Yunus Emre Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.

Angular 2+ Failed to build project with JSZip library Issue Solving


While installing some of node packages you may have an issue as follow;


ERROR in ./node_modules/jszip/lib/readable-stream-browser.js
Module not found: Error: Can't resolve 'stream' in 'C:\Users\username\angularprojectname\node_modules\jszip\lib'


just need to follow file path road to reach readable-stream-browser.js file and change content as below to solve issue like a charm :)


Before :

module.exports = require("stream");

After :

module.exports = require("readable-stream");
Yunus Emre Web Developer

Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi aucto.