Devextreme-angular: DevExtreme in ASP.Net Core project with Angular 2

[SidorovX86]

I'm trying to use DevExtreme in asp.net core project with angular 2.

I've got the following error when I add "dx-button" tag:

TypeError: $element[this.widgetClassName] is not a function
at DxButtonComponent.DxComponent._createInstance (http://localhost:49882/node_modules/devextreme-angular2/core/dx.component.js:54:39)

at DxButtonComponent.DxComponent._createWidget (http://localhost:49882/node_modules/devextreme-angular2/core/dx.component.js:59:14)

at DxButtonComponent.DxComponent.ngAfterViewInit (http://localhost:49882/node_modules/devextreme-angular2/core/dx.component.js:82:14)

at DebugAppView._View_SellComponent0.detectChangesInternal (SellComponent.ngfactory.js:208:69)

[strpipe]

For me it was a jquery related problem.
I needed to install a different version, although the devextreme package comes with the right version.

Just type in: npm unistall jquery
after that: npm install jquery@^2.2.3

Maybe this will work out for you too.

[toralux]

I have the very same problem, can easily be reproduced by generating a dotnet-core project using this generator:

yo aspnetcore-spa

For full instructions follow this blogpost: http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/

We need support for webpack, as people are quickly moving from systemjs to webpack

[Angelminster]

Hi,

I'm using these components in a dotnet-core project using systemjs for development and webpack 2 for production without problems.

IDE: Visual Studio 2015.

[toralux]

It should also be possible using just webpack in development also? @Angelminster So it works in production without systemjs included at all?

Webpack is preferred framework and used in all templates by the https://github.com/aspnet/JavaScriptServices -team. Webpack gives advantages over systemjs - especially in development - with features such as server-side prerendering, development middleware for module replacement (HMR), etc.

[Angelminster]

Yes, you can use webpack in development with another configuration.
Yes, works without systemjs. The way you load the scripts is not a requirement.
And yes, webpack is far better than systemjs in every way.

[Angelminster]

I don't use any view of mvc. Just controllers webapi (restfull api) and staticfiles( the client).

[toralux]

If you reproduce it working with yo aspnetcore-spa I pay you $100 :):) Clone it and add a dx-button doing the counting..

[toralux]

Or just share a github repo based on "yo aspnetcore-spa" where it's working - even better

[Angelminster]

Sorry,

I can't spend time in a new configuration from 0, but the error comes from:

"private _createInstance() {
let $element = $(this.element.nativeElement);
$elementthis.widgetClassName;
this.instance = $elementthis.widgetClassName;
}"

And that's because JQuery $ is not working. Try to add jquery, globalize (cldr-data and cldr-core) and dx.all.js in your index.html.

[SidorovX86]

Finally I solved the error. I've added script src="~/lib/devextreme/dist/js/dx.all.js" in index.html and it works now. Thanks, @Angelminster.

Also make sure you are using jquery <= 2.2.4. It does not work with v3.

[Angelminster]

That's great!

Yes JQuery > 2.2.4 does not work #113. Remember to check the guides with the requirements (JQuery 2.1/2.2, Globalize 1.+, etc ): Required Libraries

[viktorbk]

@SidorovX86 which index.html are you talking about. Can only see index.cshtml in the Home View?

[SidorovX86]

@viktorbk Yes, it's index.cshtml int the Home View.

[viktorbk]

@SidorovX86 Ok I see. Could you post somewhere the solution that works?

[swollaert]

I have a working situation when adding the following in my vendor.ts file
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
import 'devextreme/dist/js/dx.all';
import 'devextreme-angular2';

[timvandesteeg]

Finally got it working as well with the dx-button.
First i got the "Unexpected value 'DevExtremeModule' imported by the module 'AppModule'" error, which I solved by copying the dist folder of the devextreme-angular2 project to a local asset folder.

Then I got "$element[this.widgetClassName] is not a function", that was causes by my polyfills.ts file (probably similar to swollaert's vendor.ts). In that polyfills.ts window['$'] and window['jQuery'] were overwritten, so that js/dx.all that were included in index.html were negated.

Finally, using js/dx.all.debug.all.js instead of js/dx.all.js removed the error altogether :)
Hope it helps :)!

[iloshkakartochka]

still having same issue, none of the solutions proposed is working. Using webpack, issue is happening in vendor.js in the
DxComponent.prototype._createInstance = function () {
var $element = $(this.element.nativeElement);
$elementthis.widgetClassName;
this.instance = $elementthis.widgetClassName;
};

Also i am using VS 2015 .netcore with angular2 template based on this http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/

[dxbykov]

@iloshkakartochka I've prepared a small guide of how to add DevExtreme Angular 2 components to the ASP.Net Core Angular 2 Visual Studio template.

Create an app

Follow the original tutorial.

Add a reference to the devextreme-angular npm package

Go to package.json and add DevExtreme dependencies:

"dependencies": {
  ...
  "devextreme-angular": "16.2.2-beta.1",
  ...
}

Save the changes and wait until VS has downloaded the dependencies.

Configure webpack

Go to webpack.config.vendor.js and add DevExtreme dependencies to the vendor section:

    entry: { 
        vendor: [ 
            ...
            'devextreme/dist/css/dx.common.css', 
            'devextreme/dist/css/dx.light.css'
        ] 
    }, 

Run webpack --config webpack.config.vendor.js on the command line to update the vendor bundle. If you need, install the Webpack command-line tool first by running npm install -g webpack

Add DevExtreme modules to an Angular 2 application

Go to ClientApp/app/app.module.ts and import the required modules to your app.

...
import { DevExtremeModule } from 'devextreme-angular'; 

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

Switch off server-side rendering

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

Go to Views/Home/Index.cshtml and replace this line:

html <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

with this one:

html <app>Loading...</app>

Add a DevExtreme component to a view

Go to ClientApp/app/components/fetchdata/fetchdata.component.html and replace the existing table with DevExtreme data grid:

html <dx-data-grid [dataSource]="forecasts"></dx-data-grid>

That's it. Run the app and navigate to the 'fetch data' section to see the grid working.

[iloshkakartochka]

thank you @dxbykov, actualy i figured out the issue on my own, in my case i had to re-install devex