Webpack 2 and Angular 2 compability?

When using Unminified TinyMCE with webpack 2 and angular2, error is thrown and the app dies:

Error: Zone.js has detected that ZoneAwarePromise(window|global).Promisehas been overwritten

If I use minified version. that error is not thrown, however

Factory.ui is undefined

Feature request: Make TinyMCE compatible with module bundlers like webpack and work with angular2

[fyrkant]

Hi again @JT-Bruch, @thehashrocket and everyone!

Sorry for the mixup, apparently I was using the nightly build at work and that’s why it didn’t work like expected for you guys… But the good news is I found another way to get it working!

Instead of importing them in the component file, add the paths to the plugins to the scripts in your angular-cli.json just like you already did with tinymce, then it should be working!

See here for my working examples angular-cli.json file, and here for a deployed version.

So sorry for the mess, I will be updating the documentation today!

Edit: The documentation has now been updated!

[fyrkant]

Have you configured Webpack like it says in #2836 to use the imports-loader and exports-loader? Then you shouldn’t have to add it to the head tag.

If you are using angular-cli you can easily, without using any special loaders, use tinymce without having to add it to the head-tag by adding the path to TinyMCE to the angular-cli.json file, like it says in the documentation here.

So you would first install tinymce with npm install --save tinymce, then add "../node_modules/tinymce/tinymce.js" to your angular-cli.json and it should be available globally in your project.

Typescript will however complain that it “cannot fint name ‘tinymce’” so you would have to add something like, either directly in the file or to your typings.d.ts:

declare var tinymce: any;

To get the skins working you could then copy the skins folder from node_modules/tinymce/skins' tosrc/assets/skins` and configure TinyMCE when you initialize it with the url like this:

tinymce.init({
      selector: '#your-selector',
      skin_url: '/assets/skins/lightgray'
});

angular-cli will then be smart enough to copy along the assets both while developing with the dev server using ng serve, but also when you build your project with ng build.