search

tinymce / tinymce-angular

Official TinyMCE Angular Component
MIT License
320 stars 92 forks source link

Example app for tinymce-angular doesn't compile #320

Closed rvwilliams88 closed 1 year ago

rvwilliams88 commented 1 year ago

I'm just starting with tinymce-angular. I have angular 14.2.6. The full details are Angular CLI: 14.2.6 Node: 16.14.2 Package Manager: npm 8.1.4 OS: win32 x64

Angular: 14.2.7 ... animations, common, compiler, compiler-cli, core, forms ... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1402.6 @angular-devkit/build-angular 14.2.6 @angular-devkit/core 14.2.6 @angular-devkit/schematics 14.2.6 @angular/cli 14.2.6 @schematics/angular 14.2.6 rxjs 6.6.7 typescript 4.8.4 My package.json is { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "cli": { "analytics": "a9276310-7ecc-47c9-9bf1-5de646d4a73b" }, "version": 1, "newProjectRoot": "projects", "projects": { "tinymce-angular-demo": { "projectType": "application", "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/tinymce-angular-demo", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "tinymce-angular-demo:build:production" }, "development": { "browserTarget": "tinymce-angular-demo:build:development" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "tinymce-angular-demo:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } } } } }, "defaultProject": "tinymce-angular-demo" } I've tried the example given in the TinyMCE Docs as shown at https://www.tiny.cloud/docs/tinymce/6/angular-cloud/

When I try to compile the app using 'ng serve' I see the errors: Error: node_modules/tinymce/tinymce.d.ts:702:63 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

702 declare type DialogActionHandler = (api: DialogInstanceApi, details: DialogActionDetails) => void; ~

node_modules/tinymce/tinymce.d.ts:702:34 702 declare type DialogActionHandler = (api: DialogInstanceApi, details: DialogActionDetails) => void; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:703:63 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

703 declare type DialogChangeHandler = (api: DialogInstanceApi, details: DialogChangeDetails) => void; ~

node_modules/tinymce/tinymce.d.ts:703:34 703 declare type DialogChangeHandler = (api: DialogInstanceApi, details: DialogChangeDetails) => void; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:704:63 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

704 declare type DialogSubmitHandler = (api: DialogInstanceApi) => void; ~

node_modules/tinymce/tinymce.d.ts:704:34 704 declare type DialogSubmitHandler = (api: DialogInstanceApi) => void; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:706:63 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

706 declare type DialogCancelHandler = (api: DialogInstanceApi) => void; ~

node_modules/tinymce/tinymce.d.ts:706:34 706 declare type DialogCancelHandler = (api: DialogInstanceApi) => void; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:707:66 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

707 declare type DialogTabChangeHandler = (api: DialogInstanceApi, details: DialogTabChangeDetails) => void; ~

node_modules/tinymce/tinymce.d.ts:707:37 707 declare type DialogTabChangeHandler = (api: DialogInstanceApi, details: DialogTabChangeDetails) => void; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:981:49 - error TS2344: Type '_0' does not satisfy the constraint 'DialogData'.

981 type PublicDialog_d_DialogSpec<_0> = DialogSpec<_0>; ~~

node_modules/tinymce/tinymce.d.ts:981:32 981 type PublicDialog_d_DialogSpec<_0> = DialogSpec<_0>; ~~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:982:63 - error TS2344: Type '_0' does not satisfy the constraint 'DialogData'.

982 type PublicDialog_d_DialogInstanceApi<_0> = DialogInstanceApi<_0>; ~~

node_modules/tinymce/tinymce.d.ts:982:39 982 type PublicDialog_d_DialogInstanceApi<_0> = DialogInstanceApi<_0>; ~~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1332:72 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1332 declare type InstanceApi = UrlDialogInstanceApi | DialogInstanceApi; ~

node_modules/tinymce/tinymce.d.ts:1332:26 1332 declare type InstanceApi = UrlDialogInstanceApi | DialogInstanceApi; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1334:34 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi; ~

node_modules/tinymce/tinymce.d.ts:1334:12 1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1334:112 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi;

              ~

node_modules/tinymce/tinymce.d.ts:1334:12 1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1334:146 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi;

                                                ~

node_modules/tinymce/tinymce.d.ts:1334:12 1334 open: (config: DialogSpec, params: WindowParams | undefined, closeWindow: (dialog: DialogInstanceApi) => void) => DialogInstanceApi; ~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1341:34 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1341 open: (config: DialogSpec, params?: WindowParams) => DialogInstanceApi; ~

node_modules/tinymce/tinymce.d.ts:1341:12 1341 open: (config: DialogSpec, params?: WindowParams) => DialogInstanceApi;
~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1341:82 - error TS2344: Type 'T' does not satisfy the constraint 'DialogData'.

1341 open: (config: DialogSpec, params?: WindowParams) => DialogInstanceApi; ~

node_modules/tinymce/tinymce.d.ts:1341:12 1341 open: (config: DialogSpec, params?: WindowParams) => DialogInstanceApi;
~ This type parameter might need an extends DialogData constraint.

Error: node_modules/tinymce/tinymce.d.ts:1594:49 - error TS2344: Type '_0' does not satisfy the constraint 'DialogData'.

1594 type EventTypes_d_WindowEvent<_0> = WindowEvent<_0>; ~~

node_modules/tinymce/tinymce.d.ts:1594:31 1594 type EventTypes_d_WindowEvent<_0> = WindowEvent<_0>; ~~ This type parameter might need an extends DialogData constraint.

Is there a fix for this or a new version?

Richard Williams

exalate-issue-sync[bot] commented 1 year ago

Ref: INT-3035

rvwilliams88 commented 1 year ago

I have fixed the problem for me by changing to whenever the error Type 'T' does not satisfy the constraint 'DialogData'. or similar occurs. For example line 702 becomes declare type DialogActionHandler<T extends DialogData> = (api: DialogInstanceApi<T>, details: DialogActionDetails) => void;

jscasca commented 1 year ago

That doesn't seem normal. What version of tinymce and tinymce-angular are you using? Also can you share a small replication of your case (a github repo should be fine) to help better understand the issue?

rvwilliams88 commented 1 year ago

Hi

I've repeated the exercise again today, setting up the example from the documentation from scratch. On further examination I found that there is a difference between the versions of typescript that were installed. Yesterday, @. had been installed but on repeating the exercise @. has been installed. I can confirm that the demo compiles correctly with @. but fails with the errors I described with @.

I am at a loss to say why the installed versions of typescript were different on the two days as, as far as I know, the installations of Angular 14.2.7 and tinymce-angular were identical. .

Regards

Richard Williams.

Richard Williams

email: @.**@.>

mobile: 07981 734697

From: jscasca @.> Sent: 21 October 2022 04:06 To: tinymce/tinymce-angular @.> Cc: rvwilliams88 @.>; Author @.> Subject: Re: [tinymce/tinymce-angular] Example app for tinymce-angular doesn't compile (Issue #320)

That doesn't seem normal. What version of tinymce and tinymce-angular are you using? Also can you share a small replication of your case (a github repo should be fine) to help better understand the issue?

— Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ftinymce%2Ftinymce-angular%2Fissues%2F320%23issuecomment-1286398683&data=05%7C01%7C%7Ce4ab915f2f714fd25a6308dab3114e91%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638019184161764965%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=oCgcpmJ8El5%2F4Y1DQFKtIalsXxl%2FY0i7i4v%2FWNHW8PA%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FA2YPRSSR32ZTOLCKYKOIMALWEICE3ANCNFSM6AAAAAARKEIV7Q&data=05%7C01%7C%7Ce4ab915f2f714fd25a6308dab3114e91%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638019184161764965%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=5%2BMDNLsBpKtMK8cabFYiszZV5dbgNdB4k0KyeIrHqlE%3D&reserved=0. You are receiving this because you authored the thread.Message ID: @.***>

jscasca commented 1 year ago

I think the email censored a lot of content. I guess they are npm packages but can't distinguish which one is which

rvwilliams88 commented 1 year ago

Hi

I've created two repos for you to look at. First is https://github.com/rvwilliams88/tinymce_1 which is the original example I tried and which does not compile. The second is tinymce_2 which is the version created on my second attempt and which does compile. The main difference as far as I can tell is the version of typescript. As I said before I have no idea why the two examples ended up with this difference.

Regards

Richard Williams.

Richard Williams email: @.**@.> mobile: 07981 734697

From: jscasca @.> Sent: 22 October 2022 04:25 To: tinymce/tinymce-angular @.> Cc: rvwilliams88 @.>; Author @.> Subject: Re: [tinymce/tinymce-angular] Example app for tinymce-angular doesn't compile (Issue #320)

I think the email censored a lot of content. I guess they are npm packages but can't distinguish which one is which

- Reply to this email directly, view it on GitHubhttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Ftinymce%2Ftinymce-angular%2Fissues%2F320%23issuecomment-1287598294&data=05%7C01%7C%7C9566cf26ce364e89302f08dab3dcf3f8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638020058811164884%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=6FFJRH6a6GxAa8dLhKph0MdfgxagjOSbvf5cTHz6LZI%3D&reserved=0, or unsubscribehttps://nam12.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FA2YPRSRR2XPQ22FKWJHWYO3WENM7PANCNFSM6AAAAAARKEIV7Q&data=05%7C01%7C%7C9566cf26ce364e89302f08dab3dcf3f8%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C638020058811164884%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000%7C%7C%7C&sdata=QdUB7NENxhZFs02E5WhU6xan6kI09xRCP%2BbJg5HrGUo%3D&reserved=0. You are receiving this because you authored the thread.Message ID: @.**@.>>

lnewson commented 1 year ago

Hi @rvwilliams88,

This is a known issue with the core TinyMCE types and TypeScript 4.8 or higher, see https://github.com/tinymce/tinymce/issues/8090. It has been fixed in TinyMCE 6.3.0 but has not been released yet, so for now the best option would be to stay on TypeScript 4.7 or lower as you've done in tinymce_2.