-
Notifications
You must be signed in to change notification settings - Fork 160
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DevExtreme in ASP.Net Core project with Angular 2 #135
Comments
For me it was a jquery related problem. Just type in: Maybe this will work out for you too. |
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 |
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. |
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. |
Yes, you can use webpack in development with another configuration. |
I don't use any view of mvc. Just controllers webapi (restfull api) and staticfiles( the client). |
If you reproduce it working with yo aspnetcore-spa I pay you $100 :):) Clone it and add a dx-button doing the counting.. |
Or just share a github repo based on "yo aspnetcore-spa" where it's working - even better |
Sorry, I can't spend time in a new configuration from 0, but the error comes from: "private _createInstance() { 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. |
Finally I solved the error. I've added Also make sure you are using jquery <= 2.2.4. It does not work with v3. |
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 |
@SidorovX86 which index.html are you talking about. Can only see index.cshtml in the Home View? |
@viktorbk Yes, it's index.cshtml int the Home View. |
@SidorovX86 Ok I see. Could you post somewhere the solution that works? |
I have a working situation when adding the following in my vendor.ts file |
Finally got it working as well with the dx-button. 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 :) |
still having same issue, none of the solutions proposed is working. Using webpack, issue is happening in vendor.js in the 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/ |
@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: <app asp-prerender-module="ClientApp/dist/main-server">Loading...</app> with this one: <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: <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. |
thank you @dxbykov, actualy i figured out the issue on my own, in my case i had to re-install devex |
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)
The text was updated successfully, but these errors were encountered: