TypeScript error: A class member cannot be declared optional

[todorpr]

Hi Ledzz, I'm trying to set up angular2-tinymce into my project, but as soon as I executed webpack --watch command I got:

ERROR in C:\path\to\project\node_modules\angular2-tinymce\src\angular2-tinymce.config.interface.ts (124,17): error TS1112: A class member cannot be declared optional.

and this error appears for each of the optional props in angular2-tinymce.config.interface.ts.

What can I do?

[Ledzz]

Hi @todorpr ! Can you please show the code you're using when initializing the module? Seems to be an invalid config object.

[todorpr]

It's basically what it's suggested in the README:

npm install --save angular2-tinymce

then:

import { TinymceModule } from 'angular2-tinymce';

@NgModule({
    imports: [
        ...
        TinymceModule
    ],
    ...
})
export class BlogModule { }

and in my component:

<app-tinymce [(ngModel)]='post.description'></app-tinymce>

By the way I'm using "webpack": "1.12.9" and "typescript": "1.9.0-dev.20160409" if that is relevant.

[Ledzz]

Can you please update package to the latest version? It should been fixed now.

[todorpr]

Now those errors are fixed. Thanks for that!

There is just one error left that I haven't noticed before.

ERROR in C:\path\to\project\node_modules\angular2-tinymce\src\angular2-tinymce.component.ts
    (6,21): error TS2307: Cannot find module 'tinymce/tinymce.js'.

ERROR in C:\path\to\project\node_modules\angular2-tinymce\src\angular2-tinymce.module.ts
    (7,21): error TS2307: Cannot find module 'tinymce/tinymce.js'.

[Ledzz]

@todorpr weird, can you please try npm i --save tinymce?

[todorpr]

@Ledzz I have "tinymce@4.5.3" installed in the main node_modules and don't have tinymce in angular2-tinymce -> node_modules

I saw in a closed issue, you suggest declaring declare module 'tinymce';. Should I do this?

[Ledzz]

@todorpr you can try this, but I think I have fixed this.

[todorpr]

@Ledzz I suppose this error has something to do with typings, because when in .ts file is imported .js - there must be /// <reference path="tinymce.d.ts" />, but I can't still figure it out yet.

[krhknoxpo]

@Ledzz I'm using angular2-tinymce npm package and have followed the instructions given in your github readme.md but still getting the errors mentioned by @todorpr in his previous comments. I even installed tinymce npm package but didnt help.

[todorpr]

@krhknoxpo Would you share your webpack.config.js loaders part? I suspect something that may be the reason for the errors.

[mohitook]

hello, I have the same errors as @todorpr : ERROR in D:/BME VIK MSC/Dipterv02/diplomamunka/node_modules/angular2-tinymce/src/angular2-tinymce.module.ts (7,21): Cannot find module 'tinymce/tinymce.js'.)

ERROR in D:/BME VIK MSC/Dipterv02/diplomamunka/node_modules/angular2-tinymce/src/angular2-tinymce.component.ts (6,21): Cannot find module 'tinymce/tinymce.js'.)

Please, could you provide a quick fix or workaround?

[Ledzz]

@todorpr @krhknoxpo @mohitook I'm very sorry for delay. I have made big changes to build process so it should work now (tested with Angular 2.4.0 and Angular 4.0.0). Please note that you need to use TinymceModule.withConfig() when importing module, even if you don't need config.

[krhknoxpo]

@Ledzz I tried ng2-tinymce-alt package which worked well. I'll definitely try the updates that you've pushed for angular2-tinymce and would shift to it. Could you also let me know as how we could customize the tools that we need to display on tinymce editor and add custom tools?

[Ledzz]

@krhknoxpo when calling .withConfig() you can optionally pass an object with Tinymce config. As I understand, you need to specify option toolbar.

[krhknoxpo]

@Ledzz Thanks, this works fine!

[todorpr]

I had to copy/paste the four files into my project and modify some of them in order to setup the project:

angular2-tinymce.component.ts angular2-tinymce.config.interface.ts angular2-tinymce.default.ts angular2-tinymce.module.ts

I want to share what I did, so it may be in help in similar situations:

When you deal with node_modules such as tinymce that is not actually module, instead of importing it like that:

import tinymce from 'tinymce/tinymce';

you can do:

import 'tinymce/tinymce';
declare var tinymce: any;

thus the TS compiler will stop complaining that you import non-module as a module.

Also, to reduce bundle file size, you better import tinymce.min:

import 'tinymce/tinymce.min';

this reduced my bundle file size from 2400 KB to 1200 KB

To import the tinymce skin, I had to call require.context somewhere in angular2-tinymce.component.ts. I chose to do it in ngAfterViewInit:

ngAfterViewInit() {
    // this line copies all the files/folders in node_modules/tinymce/skins into your dist folder
    require.context('file?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins', true, /.*/);

    if (this.options.baseURL) {
    tinymce.baseURL = this.options.baseURL;
    }
    tinymce.init(this.options);
}

Also in your webpack.config.js, if in your typescript loaders line, you have node_modules excluded:

resolve: {
      extensions: ["", ".js", ".ts", ".json", ".css"],      
},
module: {
      loaders: [     
        { test: /\.ts$/, loaders: ['ts', 'angular-router-loader'], exclude: [ /test/, /node_modules/ ]},       
      ]
    }

make sure that in resolve => extensions, ".js" is before ".ts" in order to avoid "You may need an appropriate loader to handle this file type." type of error I had here

[Ledzz]

@todorpr Thank you, I didn't know that! I'll fix importing tinymce in next release. About importing skin: I wanted module to be compatible with angular-cli generated code, but again, thank you a lot.

[maphi88]

Installation - npm install --save angular2-tinymce In Module - import { TinymceModule } from 'angular2-tinymce/dist'; @NgModule({ imports: [ TinymceModule.withConfig({ plugins: ['emoticons'], toolbar: 'emoticons'}); ] });

In HTML - <app-tinymce [(ngModel)]='content'>

Then I had to add CSS files in assets folder