Using @progress kendo angular CDN bundles from a webpack client with externals

[stepet80]

We have a client application build with webpack and we want to use the @progress Kendo Angular UI cdn files. The reason for using CDN is that we have more than 50 applications running as one big application and we use CDN with webpack externals for vendor stuff.

Here is an example of such one file:

https://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress/kendo-angular-buttons/dist/cdn/js/kendo-angular-buttons.js

But when including any bundle we get following error per bundle:

kendo-angular-buttons.js:1 Uncaught TypeError: Cannot read property '__decorate' of undefined

How can we include those files? Is there an example of such a mechanism? Most examples use systemjs.

A side question is what global variable to define in externals to glue the stuff together?

[tsvetomir]

The CDN bundle is only meant to be used on our demo site. It is not really fit for other purposes as it also includes other components (long story).

For Webpack 2+ you should use the "modules" entry point - "dist/es/main.js". Webpack 1.x projects can only reference "dist/npm/main.js".

[stepet80]

Ok as a workaround we will build our own CDN bundles with webpack with one entry per bundle. We will put the stuff in a global variable named progress (e.g. window.progress.ng.buttons, window.progress.ng.grid) so that we can define it as an external dependency in webpack.

e.g. file kendo.angular.buttons.ts
`import * as kendoAngularButtons from '@progress/kendo-angular-buttons';

// global glue variable for externals
if (window['progress'] == null) window['progress'] = {};
if (window['progress'].ng == null) window['progress'].ng = {};
window['progress'].ng.buttons = kendoAngularButtons;

export { kendoAngularButtons };`

In webpack we exclude this bundle in the consumer:

`externals:
{

        '@angular/core': 'ng.core',

        '@angular/common': 'ng.common',

        '@angular/platform-browser': 'ng.platformBrowser',

        '@angular/animations': 'ng.animations',

        '@angular/animations/browser': 'ng.animations.browser',

        '@progress/kendo-angular-buttons': 'progress.ng.buttons',
        ...
    }
`

And of course we need to set the script tags ourselves directly (in html) or indirectly (through webpack).

[tsvetomir]

The issue with the UMD bundle imports was fixed and they're now usable, see #3607.

We've also added an example with Webpack externals in examples-standalone/umd-bundles