Error when loading DevExtreme components: Webpack, Angular 2, TypeScript

[hegelstad]

home.component.ts

import { Component } from '@angular/core';
import { DxButton } from "devextreme-angular2";

@Component({
  template: require('./home.component.html'),
  styles: [String(require('./home.component.less'))],
  directives: [ DxButton ]
})

export class HomeComponent{ }

home.component.html

<div class="container body-content">
    <dx-button text="Test"></dx-button>
</div>

main.ts

import 'core-js';
import 'reflect-metadata';
import 'zone.js/dist/zone';
import './bootswatch.less';
import 'devextreme/dist/js/dx.all';
import 'devextreme-angular2';

... 

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

  entry: [
    './src/main.ts',
    ],
  output: {
    path: './dist',
    filename: 'bundle.js'
  },

  module: {
    loaders: [
      { test: /\.ts$/, loader: 'ts-loader'},
      { test: /\.html$/, loader: 'raw-loader'},
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
            { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" },

    ]
  },

  resolve: {
    extensions: ['', '.js', '.ts', '.html', '.css', '.less', '.eot', '.woff', '.woff2', '.tff', '.svg']
  },

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
      }
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
    })
  ]

};

Error message
[Error] ORIGINAL EXCEPTION: TypeError: $element[this.widgetClassName] is not a function. (In '$elementthis.widgetClassName', '$element[this.widgetClassName]' is undefined)
logError (bundle.js:104433)
call (bundle.js:46435)
(anonymous function) (bundle.js:49541)
(anonymous function) (bundle.js:49830)
__tryOrUnsub (bundle.js:50510)
next (bundle.js:50459)
_next (bundle.js:50409)
next (bundle.js:50373)
_finalNext (bundle.js:49991)
_next (bundle.js:49983)
next (bundle.js:49940)
emit (bundle.js:49818:82)
onError (bundle.js:54146)
onHandleError (bundle.js:54358)
handleError (bundle.js:20263)
runTask (bundle.js:20195)
drainMicroTaskQueue (bundle.js:20410)
invoke (bundle.js:20362)

[mterwoord]

You had any luck fixing this?

[FriOne]

Have the same error but with new version with Angular Final

[mterwoord]

Somehow I got it working with final... Not sure what I did to make it work. Lots of swearing involved...

[FriOne]

Do you import in angular module only one specific component module? E.g. DxSelectBoxModule
What module is it?

[sidorov-alex]

Have same error:
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)

[Angelminster]

See #135

Try to add jquery <=2.2.4, globalize >1.0 (cldr-data and cldr-core) and dx.all.js in your index.html.

[dxbykov]

Due to the fix of #16, this issue seems to be outdated.