Ckeditor5-angular: Watchdog is not defined in prod build

[martajedrecka]

There is an error: Watchdog is not defined when the app is build (both build with --prod flag and without). The problem doesn't exists on local (ng serve)

"@ckeditor/ckeditor5-angular": "^1.2.3",
"@ckeditor/ckeditor5-build-classic": "^18.0.0",
"@ckeditor/ckeditor5-watchdog": "^18.0.0",
"@angular/core": "8.2.2",

I've added package for watchdog, but in my code I'm not using Watchdog. Simple reconstruction of the example provided in docs is implemented: that is editor with onChange function.

[ma2ciek]

Hi @martajedrecka,

Thanks for the issue, I'll try to reproduce it soon.

[martajedrecka]

hello, when can we expect some feedback about that issue? We were looking for some production ready solution and we don't have much time for waiting. It's a pity that everything what was implemented locally and what works like a charm will have to go to trash

[ma2ciek]

Hi, sorry for the lack of response.

I've just run an app with ng build --prod which includes the ckeditor5-angular component and had no issues.

Maybe you have something specified differently? I'll post a configuration with which I'm testing this component.

It's a pity that everything what was implemented locally and what works like a charm will have to go to trash

That's unfortunately pretty common for frameworks like Angular where the dev and prod environments diff much :/

That import where the app breaks is internal - the EditorWatchdog imports the Watchdog class, but it's hard to tell why it breaks in your app.

Edit:  I'm testing in this repo: https://github.com/ma2ciek/ckeditor5-angular-test.

[pmacn]

Have the same issue here. The issue goes away if you install and import the module from ng2-ckeditor. This I obviously not ideal or even a workable solution in most cases but it might give some insight into the problem

[ma2ciek]

Hi!

Is it possible for you to create a repository with steps to reproduce the error? I tried it once but I failed to reproduce it. Also, could you share your tsconfig.json file? I guess that this error might occur because of some kind of incorrect TypeScript transpilation.

[jbgtmartin]

Hi @pmacn, can you explain a bit more what you mean by "import the module from ng2-ckeditor"? Where exactly do you import the module? Thanks!

[jbgtmartin]

I have the exact same issue, except that I'm able to build without --prod (ng build). I only see the error whith ng build --prod.

[ma2ciek]

@jbgtmartin, could you share your TS / Angular configuration? You can pin an older version (https://github.com/ckeditor/ckeditor5-angular/releases/tag/v1.1.2) that doesn't import the ckeditor5-watchdog package. 

I guess that this has to be somehow connected with a different TS resolution system.

[jbgtmartin]

Hi, thanks for your answer! As expected, it's working fine with v1.1.2.

Here is my config:

package.json

{
  ...
  "dependencies": {
    "@angular/animations": "^8.0.0",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.0.0",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "@ckeditor/ckeditor5-angular": "^1.2.3",
    "@ckeditor/ckeditor5-build-classic": "...", // Our custom build, that does not depend on ckeditor5-angular
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    ...
    "ts-node": "~7.0.0",
    "typescript": "~3.4.3"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5", // I had es2015 previously - same error
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

angular.json

```js
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"v1": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/v1",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"preserveSymlinks": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/assets/styles/globals.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/styles"
]
},
"scripts": [
"node_modules/phaser-ce/build/custom/pixi.js",
"node_modules/phaser-ce/build/custom/p2.js",
"node_modules/phaser-ce/build/custom/phaser-split.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": {
"scripts": true,
"styles": true,
"hidden": true
},
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "5mb",
"maximumError": "10mb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "v1:build"
},
"configurations": {
"production": {
"browserTarget": "v1:build:production"
},
"dev-server": {
"browserTarget": "v1:build:dev-server"
}
}
},

    ...
  }
}}

}

[ma2ciek]

Thanks! I'll try to investigate it soon.

My blind guess is the allowSyntheticDefaultImports config option.

[Kashspike]

Hi @ma2ciek, I could reproduce this issue.. by changing the "sourceMap" in production configuration to this:
"sourceMap": { "hidden": true, "scripts": true }

and run 'ng build --prod

Tested in this repo: https://github.com/ma2ciek/ckeditor5-angular-test

[ma2ciek]

Thanks, @Kashspike!

I was able to reproduce the issue and it seems that updating all dependencies together with the ng-packgr library should fix that issue. Though, the fix will work only for Angular>=9.

For those on the lower versions, I can only suggest to turn off all source maps on production.

[ma2ciek]

The recently released https://www.npmjs.com/package/@ckeditor/ckeditor5-angular/v/2.0.1 should fix this issue for Angular 9.1+.

[bevndas]

Was having the same issue for Angular 7, was using ckeditor-angular 2.1.0, ckeditor- classic-27.1.0, - downgraded to the respective versions before they introduced watchdog dependency, ckeditor-angular 1.1.0, ckeditor-classic 27.0.0