with buildOptimizer: true -> Uncaught ReferenceError: Animation is not defined in kendo-drawing

[DGolverdingen]

I'm submitting a...

• Regression report

Current behavior

Running a production build (Latest Angular 6 & Kendo packages) with buildOptimizer: true results in: an Uncaught ReferenceError: Animation is not defined.

With buildOptimizer: false there are no problems.

I really don't know how to solve this, anyone any idea?

console output:

Uncaught ReferenceError: Animation is not defined
    at Object.LiwG (animation-factory.js.pre-build-optimizer.js:46)
    at i (bootstrap:81)
    at Object.XBGS (focus-group.js.pre-build-optimizer.js:6)
    at i (bootstrap:81)
    at Object.Ss9G (app.component.ts:8)
    at i (bootstrap:81)
    at Object.<anonymous> (shared.module.ts:51)
    at Object.zUnb (main.ts:24)
    at i (bootstrap:81)
    at Object.2 (modal-dialog.service.ts:4)
    at i (bootstrap:81)
    at t (bootstrap:43)
    at Array.n [as push] (bootstrap:30)
    at main.js:1

This error is found in location: node_modules\@progress\kendo-drawing\dist\es\animations\animation-factory.js

Expected behavior

no uncaught error from any @progress/x package

Minimal reproduction of the problem with instructions

I fail to reproduce this in a small demo project.

Environment

Package versions:

+-- @angular-devkit/build-angular@0.6.3
+-- @angular/animations@6.0.2
+-- @angular/cli@6.0.3
+-- @angular/common@6.0.2
+-- @angular/compiler@6.0.2
+-- @angular/compiler-cli@6.0.2
+-- @angular/core@6.0.2
+-- UNMET PEER DEPENDENCY @angular/forms@6.0.2
+-- @angular/http@6.0.2
+-- @angular/language-service@6.0.2
+-- @angular/platform-browser@6.0.2
+-- @angular/platform-browser-dynamic@6.0.2
+-- @angular/pwa@0.6.3
+-- @angular/router@6.0.2
+-- @angular/service-worker@6.0.2
+-- @angularclass/hmr@2.1.3
+-- @bahmutov/add-typescript-to-cypress@2.0.0
+-- @progress/kendo-angular-buttons@4.1.0
+-- @progress/kendo-angular-dateinputs@3.3.0
+-- @progress/kendo-angular-dialog@3.6.1
+-- @progress/kendo-angular-dropdowns@3.0.0
+-- @progress/kendo-angular-excel-export@2.0.0
+-- @progress/kendo-angular-grid@3.3.0
+-- @progress/kendo-angular-inputs@3.1.1
+-- @progress/kendo-angular-intl@1.4.1
+-- @progress/kendo-angular-l10n@1.2.0
+-- @progress/kendo-angular-layout@3.1.0
+-- @progress/kendo-angular-popup@2.3.0
+-- @progress/kendo-angular-sortable@1.1.0
+-- @progress/kendo-angular-upload@4.1.1
+-- @progress/kendo-data-query@1.3.1
+-- @progress/kendo-drawing@1.5.5
+-- @progress/kendo-file-saver@1.0.5
+-- @progress/kendo-theme-bootstrap@2.13.4
+-- @types/file-saver@1.3.0
+-- @types/jasmine@2.8.7
+-- @types/jasminewd2@2.0.3
+-- @types/node@10.1.1
+-- @types/selenium-webdriver@3.0.8
+-- @types/webpack-env@1.13.6
+-- angular2-notifications@1.0.2
+-- angular2-prettyjson@3.0.1
+-- UNMET PEER DEPENDENCY bootstrap@4.1.1
+-- codelyzer@4.3.0
+-- core-js@2.5.6
+-- cypress@2.1.0
+-- deepmerge@2.1.0
+-- file-saver@1.3.8
+-- firebase-tools@3.18.4
+-- font-awesome@4.7.0
+-- UNMET PEER DEPENDENCY jasmine@>=3
+-- jasmine-core@3.1.0
+-- jasmine-spec-reporter@4.2.1
+-- jquery@3.3.1
+-- karma@2.0.2
+-- karma-chrome-launcher@2.2.0
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@2.0.0
+-- karma-jasmine@1.1.2
+-- karma-jasmine-html-reporter@1.1.0
+-- ngx-bootstrap@3.0.0
+-- UNMET PEER DEPENDENCY popper.js@^1.14.3
+-- prettier@1.12.1
+-- protractor@5.3.2
+-- rimraf@2.6.2
+-- rxjs@6.1.0
+-- rxjs-compat@6.1.0
+-- sass-lint@1.12.1
+-- start-server-and-test@1.4.1
+-- ts-node@6.0.3
+-- tslint@5.10.0
+-- tslint-angular@1.1.2
+-- tslint-config-prettier@1.12.0
+-- typescript@2.7.2
+-- web-animations-js@2.3.1
`-- zone.js@0.8.26

npm ERR! peer dep missing: @angular/forms@6.0.1, required by ngx-bootstrap@3.0.0
npm ERR! peer dep missing: bootstrap@4.0.0, required by @progress/kendo-theme-bootstrap@2.13.4
npm ERR! peer dep missing: popper.js@^1.14.3, required by bootstrap@4.1.1
npm ERR! peer dep missing: jasmine@>=3, required by karma-jasmine-html-reporter@1.1.0
npm ERR! missing: mkdirp@0.5.1, required by node-pre-gyp@0.10.0
npm ERR! missing: minimist@0.0.8, required by mkdirp@0.5.1
npm ERR! missing: minimatch@3.0.4, required by ignore-walk@3.0.1
npm ERR! missing: brace-expansion@1.1.11, required by minimatch@3.0.4
npm ERR! missing: balanced-match@1.0.0, required by brace-expansion@1.1.11
npm ERR! missing: concat-map@0.0.1, required by brace-expansion@1.1.11
npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
npm ERR! missing: inherits@2.0.3, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by readable-stream@2.3.6
npm ERR! missing: safe-buffer@5.1.1, required by string_decoder@1.1.1
npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.2
npm ERR! missing: inherits@2.0.3, required by glob@7.1.2
npm ERR! missing: minimatch@3.0.4, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by glob@7.1.2
npm ERR! missing: once@1.4.0, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
npm ERR! missing: minipass@2.2.4, required by tar@4.4.1
npm ERR! missing: mkdirp@0.5.1, required by tar@4.4.1
npm ERR! missing: safe-buffer@5.1.1, required by tar@4.4.1
npm ERR! missing: yallist@3.0.2, required by tar@4.4.1
npm ERR! missing: minipass@2.2.4, required by fs-minipass@1.2.5
npm ERR! missing: safe-buffer@5.1.1, required by minipass@2.2.4
npm ERR! missing: yallist@3.0.2, required by minipass@2.2.4
npm ERR! missing: minipass@2.2.4, required by minizlib@1.1.0
npm ERR! peer dep missing: webpack@2 || 3, required by babel-loader@7.1.2

Browser:

• Chrome (desktop) version latest

System:

Angular CLI: 6.0.3
Node: 9.4.0
OS: win32 x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@angular/pwa                      0.6.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "strict": true,
    "strictNullChecks": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "pretty": true
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false,
    "enableIvy": false
  }
}

tsconfig.app.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": []
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}

[tsvetomir]

Can anyone share a code sample that triggers this error? Our attempts at producing one didn't work out.

[LarsVonQualen]

I'm having the same issue with a client using the Grid component. Would really like to see a fix for this soon, or we will be forced to use another Grid framework, updating Angular is more important for them than sticking with Kendo.

[tsvetomir]

Please, note that you can share a sample project under an NDA in a support ticket. A trimmed-down version would do, as long as it experiences the problem in question.

[billdwhite]

same issue here

[thaoula]

Hi @tsvetomir,

I am having this issue on a larger project which cannot be shared.

In response to your initial post, i tried to create a small project to but was also unable to reproduce the problem.

I tried creating a small project with a lazy loaded module that used the grid (all modules using the grid have this problem)

Do you know which features of the grid require the Animation library? A simple binding the grid to an object did not work.

[tsvetomir]

@thaoula I've created a sample project with the PDF Export module - this is where the drawing is used. I don't get any errors in a production build.

[LarsVonQualen]

@tsvetomir Hi, my production configuration looks a bit different, maybe it's a combination of the settings. Could you try with the following config:

{
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": true,
    "extractCss": true,
    "namedChunks": true,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": true,
    "buildOptimizer": true,
    "commonChunk": true,
    "baseHref": " ",
    "statsJson": true,
    "forkTypeChecker": true,
    "subresourceIntegrity": true,
    "verbose": false,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

[DGolverdingen]

Do you encounter this problem with buildOptimizer false??

[LarsVonQualen]

Ah, my bad, i've disabled it to get it to work, sorry. It's should be true ofc. I Have updated the comment to reflect this.

[tsvetomir]

The error appeared after enabling source maps.

@LarsVonQualen can you confirm if "sourceMap": false clears the error in your project?

[LarsVonQualen]

After doing the following updates, it seems to work. Even with sourceMaps set to true.. @angular-devkit/build-angular 0.6.3 -> 0.6.5 @angular-devkit/build-optimizer 0.6.3 -> 0.6.5 @angular/cli 6.0.3 -> 6.0.5

May have been a problem with the new cli build system?

[tsvetomir]

@LarsVonQualen I still get the error with the latest versions.

There seems to be some caching involved, as changing "sourceMap" only has an effect if I clean-up "node_modules" and re-install. Otherwise, it stays in the working/non-working initial state.

[LarsVonQualen]

So i tried to verify your result, and im not sure if it's related to caching, though it could seem like it. This may be related: https://github.com/angular/devkit/issues/937 or https://github.com/angular/devkit/issues/816 "buildOptimizer": true and "sourceMap": true -> Produces the error "buildOptimizer": true and "sourceMap": false -> Produces the error "buildOptimizer": false and "sourceMap": true -> Works Then without cleaning running: "buildOptimizer": true and "sourceMap": true -> Produces the error

[tsvetomir]

@LarsVonQualen thanks for your assistance

The development version of the package should be now free of this problem, try it with: npm install --save @progress/kendo-drawing@dev

[tsvetomir]

Released officially as @progress/kendo-drawing v1.5.6

[DGolverdingen]

Ok thnx, so the problem is fixed in the build process of kendo-drawing?

[tsvetomir]

Yes, the fix is in kendo-drawing - two imports had side-effects that apparently confused the build optimizer. For example:

[LarsVonQualen]

@tsvetomir Thank you very much, everything seems to be working after updating the kendo-drawing package.

Thank you :+1:

[tsvetomir]

I'll close this issue, as we managed to work around it in the kendo-drawing package. Hopefully angular/angular-cli#11055 will be resolved so we don't get the same problem elsewhere.