search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
468 stars 216 forks source link

Grid: Runtime errors while creating the grid #1314

Closed EricSch closed 6 years ago

EricSch commented 6 years ago

I'm submitting a...

Current behavior

When using the grid, an error is thrown in the draggable.directive:

console.service.js:133 ERROR TypeError: kendo_draggable_1.default is not a constructor
    at new DraggableDirective (draggable.directive.js:17)

Expected behavior

No error, the kendo draggable object should be created

Minimal reproduction of the problem with instructions

I checked the code. kendo_draggable_1.default isn't an object. @telerik/kendo-draggable exports as default a function.

var Draggable = function Draggable(ref) {
    var this$1 = this;

...

exports.Draggable = Draggable;
exports['default'] = Draggable;

Environment

Package versions:

+-- @angular/animations@5.0.1 deduped
| +-- @angular/common@5.0.1 deduped
| +-- @angular/compiler@5.0.1 deduped
| +-- @angular/compiler-cli@5.0.1 deduped
| +-- @angular/core@5.0.1 deduped
| +-- @angular/forms@5.0.1 deduped
| +-- @angular/http@5.0.1 deduped
| +-- @angular/platform-browser@5.0.1 deduped
| +-- @angular/platform-browser-dynamic@5.0.1 deduped
| +-- @angular/platform-server@5.0.1 deduped
| +-- @angular/router@5.0.1 deduped
| +-- @ngx-translate/core@9.1.1 deduped
| +-- @ngx-translate/http-loader@2.0.1 deduped
| +-- @progress/kendo-angular-buttons@3.0.3
| +-- @progress/kendo-angular-dateinputs@2.1.1
| +-- @progress/kendo-angular-dialog@3.1.2
| +-- @progress/kendo-angular-dropdowns@2.0.2
| +-- @progress/kendo-angular-excel-export@1.0.6
| +-- @progress/kendo-angular-grid@2.1.0
| +-- @progress/kendo-angular-inputs@2.1.1
| +-- @progress/kendo-angular-intl@1.3.1
| +-- @progress/kendo-angular-l10n@1.0.6
| +-- @progress/kendo-angular-label@1.0.6
| +-- @progress/kendo-angular-layout@2.0.1
| +-- @progress/kendo-angular-popup@2.0.1
| +-- @progress/kendo-angular-ripple@0.2.3
| +-- @progress/kendo-angular-scrollview@1.0.8
| +-- @progress/kendo-angular-sortable@1.0.7
| +-- @progress/kendo-angular-treeview@2.1.2
| +-- @progress/kendo-angular-upload@3.0.2
| +-- @progress/kendo-data-query@1.2.0
| +-- @progress/kendo-date-math@1.2.0
| +-- @progress/kendo-drawing@1.5.1
| +-- @progress/kendo-file-saver@1.0.5
| +-- @progress/kendo-theme-bootstrap@2.11.6
| +-- @telerik/kendo-intl@1.4.0
| +-- core-js@2.5.3 deduped
| +-- localforage@1.5.6 deduped
| +-- ng2-toastr@4.1.2 deduped
| +-- reflect-metadata@0.1.12 deduped
| +-- rxjs@5.5.6 deduped
| +-- UNMET PEER DEPENDENCY typescript@>=2.4.2 <2.5
| +-- whatwg-fetch@2.0.3 deduped
| `-- zone.js@0.8.20 deduped

Browser:

System:

tsvetomir commented 6 years ago

I tested this in a new Angular CLI project, but I don't get an error. See tsvetomir/kendo-angular-1314.

Please check the installed version of @telerik/kendo-draggable using npm ls @telerik/kendo-draggable. The output should only list 1.7.0:

> npm ls @telerik/kendo-draggable

grid-draggable@0.0.0
├─┬ @progress/kendo-angular-grid@2.1.0
│ └── @telerik/kendo-draggable@1.7.0 
└─┬ @progress/kendo-angular-inputs@2.1.1
  └── @telerik/kendo-draggable@1.7.0  deduped

Edit: fix link to sample repo

EricSch commented 6 years ago

I'm getting this:

| | `-- @telerik/kendo-draggable@1.7.0  deduped
| +-- @progress/kendo-angular-grid@2.1.0
| | `-- @telerik/kendo-draggable@1.7.0  deduped
| +-- @progress/kendo-angular-inputs@2.1.1
| | `-- @telerik/kendo-draggable@1.7.0  deduped
| +-- @progress/kendo-angular-layout@2.0.1
| | `-- @telerik/kendo-draggable@1.7.0  deduped
| `-- @progress/kendo-angular-scrollview@1.0.8
|   `-- @telerik/kendo-draggable@1.7.0  deduped
`-- @telerik/kendo-draggable@1.7.0

Btw, I'm using it with rollup.

    "rollup": "0.55.5",
    "rollup-plugin-commonjs": "8.3.0",
    "rollup-plugin-node-resolve": "3.0.3",
    "rollup-plugin-uglify": "3.0.0",

Could you post your code, how the kendo-draggable is created? Thanks

EricSch commented 6 years ago

Going back to older versions, the code is different: /@progress/kendo-angular-grid/dist/es/common/draggable.directive.js:


            this.draggable = new Draggable({
                drag: function (e) { return _this.kendo.drag.next(e); },

And in @telerik/kendo-draggable/dist/es/main.js

export var Draggable = function Draggable(ref) {
    var this$1 = this;

...

// Rollup won't output exports['default'] otherwise
export default Draggable;
+-- @progress/kendo-angular-dialog@3.1.1
| `-- @telerik/kendo-draggable@1.7.0
+-- @progress/kendo-angular-grid@2.0.2
| `-- @telerik/kendo-draggable@1.7.0  deduped
+-- @progress/kendo-angular-inputs@2.1.0
| `-- @telerik/kendo-draggable@1.7.0  deduped
+-- @progress/kendo-angular-layout@2.0.0
| `-- @telerik/kendo-draggable@1.7.0  deduped
`-- @progress/kendo-angular-scrollview@1.0.7
  `-- @telerik/kendo-draggable@1.7.0  deduped
tsvetomir commented 6 years ago

I've managed to reproduce the issue in a rollup project. The issue is a regression caused by #1210.

What happens is that the generated ngfactory.js files reference CommonJS modules like this:

import * as i35 from "@progress/kendo-angular-grid/dist/npm/grid.component";

In this version of the compiled code, the Draggable is instantiated through the 'default' export:

new kendo_draggable_1.default({...});

At the same time Rollup is loading the ES Module of kendo-draggable that does not export a "default" member. Previously, the AoT generated code always pointed to the ES Modules, avoiding this problem.

We released a fix in the latest kendo-draggable (v1.7.1). It addresses this issue, but we still need to figure out how to make the AoT compiler use the correct module type for each project.

EricSch commented 6 years ago

Thank you, the app is now running. But if have still big troubles with the latest Kendo versions:

@progress/kendo-angular-buttons 3.0.3
@progress/kendo-angular-dateinputs 2.1.1
@progress/kendo-angular-dialog 3.1.2
@progress/kendo-angular-dropdowns 2.0.2
@progress/kendo-angular-excel-export 1.0.6
@progress/kendo-angular-grid 2.1.0
@progress/kendo-angular-inputs 2.1.1
@progress/kendo-angular-intl 1.3.1
@progress/kendo-angular-l10n 1.0.6
@progress/kendo-angular-label 1.0.6
@progress/kendo-angular-layout 2.0.1
@progress/kendo-angular-popup 2.0.1
@progress/kendo-angular-ripple 0.2.3
@progress/kendo-angular-scrollview 1.0.8
@progress/kendo-angular-sortable 1.0.7
@progress/kendo-angular-treeview 2.1.2
@progress/kendo-angular-upload 3.0.2
@progress/kendo-data-query 1.2.0
@progress/kendo-date-math 1.2.0
@progress/kendo-drawing 1.5.1
@progress/kendo-file-saver 1.0.5
@progress/kendo-theme-bootstrap 2.11.6
@telerik/kendo-draggable ^1.7.1
@telerik/kendo-intl 1.4.0

Those are giving me during the build a new rollup warning/error: 'default' is not exported by 'node_modules\@progress\kendo-angular-intl\dist\es\main.js' and also a Node / Javascript stackoverflow error. So I have to increase the usable memory of Node.

This all didn't happen with those versions:

@progress/kendo-angular-buttons 3.0.3
@progress/kendo-angular-dateinputs 2.0.1
@progress/kendo-angular-dialog 3.1.1
@progress/kendo-angular-dropdowns 2.0.1
@progress/kendo-angular-excel-export 1.0.5
@progress/kendo-angular-grid 2.0.2
@progress/kendo-angular-inputs 2.1.0
@progress/kendo-angular-intl 1.3.0
@progress/kendo-angular-l10n 1.0.5
@progress/kendo-angular-label 1.0.5
@progress/kendo-angular-popup 2.0.0
@progress/kendo-angular-sortable 1.0.6
@progress/kendo-angular-upload 3.0.1
@progress/kendo-angular-layout 2.0.0
@progress/kendo-angular-ripple 0.2.2
@progress/kendo-angular-scrollview 1.0.7
@progress/kendo-angular-treeview 2.1.1
@progress/kendo-data-query 1.1.2
@progress/kendo-date-math 1.1.2
@progress/kendo-drawing 1.5.1
@progress/kendo-file-saver 1.0.4
@progress/kendo-theme-bootstrap 2.11.6
@telerik/kendo-intl 1.3.2

I only see for the grid and dateinputs a bigger version change. Perhaps you could give me a hint, what was the major change?

tsvetomir commented 6 years ago

The reason for the slowdown is that the AoT compiler output now references CommonJS modules. Rollup has to convert them to ES modules, a memory intensive process.

We're working on a fix that will allow the AoT compiler to reference the correct module type for each compilation target. It's a significant change in our bundling and we want to make sure it works properly before releasing it.

You can try it out by referencing the packages with "flatmeta" dist-tag instead of a specific version: (this only applies to @progress/kendo-angular-* packages)

"dependencies": {
  "@progress/kendo-angular-buttons": "flatmeta",
  "@progress/kendo-angular-dateinputs": "flatmeta",
  ...
}

With this build, the AoT compiler should reference the "dist/es" ES modules. Your build performance should be back to normal.

EricSch commented 6 years ago

Thanks for the explanations. Very helpful. I hope the different module situation clears up soon.

EricSch commented 6 years ago

Could you tell me which @progress/kendo-angular-... versions are "safe" to use? I assume it's the AoT compiler on your side, where this changed. Between wich versions of the AoT? and Kendo Angular builds?

tsvetomir commented 6 years ago

Sorry for the delay. We're preparing an update to all packages that fixes the Rollup performance and other module resolution issues related to AoT.

Until then you can use the following versions that work faster with Rollup:

"@progress/kendo-angular-buttons": "3.0.2",
"@progress/kendo-angular-dateinputs": "2.1.0",
"@progress/kendo-angular-dialog": "3.1.1",
"@progress/kendo-angular-dropdowns": "2.0.1",
"@progress/kendo-angular-excel-export": "1.0.5",
"@progress/kendo-angular-grid": "2.0.2",
"@progress/kendo-angular-inputs": "2.1.0",
"@progress/kendo-angular-intl": "1.3.0",
"@progress/kendo-angular-l10n": "1.0.5",
"@progress/kendo-angular-label": "1.0.5",
"@progress/kendo-angular-layout": "2.0.0",
"@progress/kendo-angular-popup": "2.0.0",
"@progress/kendo-angular-ripple": "0.2.2",
"@progress/kendo-angular-scrollview": "1.0.7",
"@progress/kendo-angular-sortable": "1.0.6",
"@progress/kendo-angular-treeview": "2.1.1",
"@progress/kendo-angular-upload": "3.0.1"
tsvetomir commented 6 years ago

We rolled out a new packaging structure that should address this issue.

Feel free to grab the latest versions. There are a few packages (dropdowns, dateinputs) that are still using the old packaging, but that shouldn't slow down Rollup too much.

tsvetomir commented 6 years ago

All of the packages have been updated and should be working fine (and fast) in your Rollup-based project. I'm closing this issue, but feel free to reopen if you still experience problems.

ranjith88 commented 6 years ago

Hi tsvetomir ,

Can you please let me know what are latest and stable dependencies required to be added in Package.json and systemjs.config,js to add Kendo Grid for Angular.

Do you see anything wrong in the below dependencies.

This is my exisiting package.json image