Watchdog is not defined in prod build

[martaduch]

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.

[martaduch]

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

{
  "$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