Kendo-angular: @progress/kendo-angular-excel-export and specially @progress/kendo-ooxml breaks my build

[EricSch]

By using jszip, this breaks our AOT build. jszip has dependencies to nodejs modules, like buffer and streams.

In jszip there was an issue for webpack support. https://github.com/Stuk/jszip/pull/333.

I don't know how your build process is working, but could you make sure this configuration is applied?

Thank you

[tsvetomir]

What project template are you using?

I've tried this with Angular CLI and AoT seems to work. See the test project in this repo.

[EricSch]

We are using Rollup for AoT, not webpack. Could be a problem, how rollup is handling those node modules.

But like i said, problem seems to be that jszip is using internal nodes modules. And I have to be sure that you have configured jszip with those options mentioned in the jszip issue. I'm not sure if I can change that in our build config.
I downgraded the grid version (without Excel support), and our build works again.

[tsvetomir]

I've managed to get this working by aliasing JSZip in the Rollup configuration:

const alias = require('rollup-plugin-alias');
const path = require('path');
const process = require('process');

const config = {
...
  plugins: [
    alias({
      jszip: path.join(process.cwd(), './node_modules/jszip/dist/jszip.min.js')
    })
  ]
}

Will investigate if there's something else we can do.

[EricSch]

Thank you, I will try it with our build too.

[tsvetomir]

I've set-up a project with Angular Seed to test this.
You can check it out in the telerik/kendo-angular-quickstart-seed repo.

Tested by running the application with npm run serve.prod.rollup.aot

[EricSch]

Yes, our app is running again, thank you. but didn't test the Excel export.

And why did the aliasing help? That I don't get :)

[tsvetomir]

The main entry in the JSZip package points to its Node.js version. What we need is to take the browser-friendly version from dist. This is solved with the alias.

[rohit-b]

i tried the aliasing step but not working

[tsvetomir]

We fixed this in the latest release of the kendo-ooxml package. Note that the alias must be removed.

See telerik/kendo-angular-quickstart-seed@c3c59db3ce56494d9078b4752311b3af09ce1b58 and telerik/kendo-angular-quickstart-seed@70ec11d74e42367abf88907875b198d96a4c37a2

[rohit-b]

still aot build gives this error
node_modules\@progress\kendo-ooxml\dist\es\ooxml.js (1:7)
1: import JSZip from 'jszip/dist/jszip';
^
2: import map from './utils/map';

anything missing?

[tsvetomir]

I've tested this in the test-489 branch of our Angular CLI sample.
Running ng serve --aot=true seems to work fine.

Can you please compare with your project?

[EricSch]

i have no errors, it works for me

[tsvetomir]

Closing this, but feel free to reopen if more details become available.

[plcart]

what is the purpose to this change?
0.1.0
import JSZip from "jszip"; <-Working
0.1.1 and 1.00
import JSZip from 'jszip/dist/jszip';

i'm using browserify with ts plugin to generate my bundle file so this still breaks the build for not founding the JSZip files

so why not leave packages Json in charge of the entry point

please let me know if you need any more info to reproduce the error

[tsvetomir]

Are you using any specific project template?

We only test against Webpack 1/2, Rollup and SystemJS based project at the moment.

[plcart]

I'm not using any of your templates

i was able to do a workaround with this line of code for who is using browserify to do the bundle

var browserify = require("browserify");
var nodeResolve = require('resolve');
let browserifyProcesor = browserify({...});
browserifyProcesor.require(nodeResolve.sync('jszip'), { expose: 'jszip/dist/jszip' })

and this can be done also at karma with karma-browserify

browserify: { configure: function (bundle) { bundle.once('prebundle', function () { bundle.require(nodeResolve.sync('jszip'), { expose: 'jszip/dist/jszip' }); }); }, plugin: ['tsify'] }

[tsvetomir]

@plcart you might need the same mapping for the Pako library (used for PDF compression) in the latest version of the Grid:

bundle.require(nodeResolve.sync('pako'), { expose: 'pako/dist/pako_deflate' });