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

DGolverdingen · 2018-05-18T12:06:34Z

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/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- UNMET PEER DEPENDENCY @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angularclass/[email protected]
+-- @bahmutov/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @progress/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY jasmine@>=3
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- UNMET PEER DEPENDENCY popper.js@^1.14.3
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! peer dep missing: @angular/[email protected], required by [email protected]
npm ERR! peer dep missing: [email protected], required by @progress/[email protected]
npm ERR! peer dep missing: popper.js@^1.14.3, required by [email protected]
npm ERR! peer dep missing: jasmine@>=3, required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! peer dep missing: webpack@2 || 3, required by [email protected]

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"]
}

The text was updated successfully, but these errors were encountered:

tsvetomir · 2018-05-21T06:21:10Z

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

LarsVonQualen · 2018-05-25T07:20:25Z

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 · 2018-05-25T07:49:04Z

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 · 2018-05-25T15:34:52Z

same issue here

thaoula · 2018-05-28T04:31:54Z

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 · 2018-05-28T08:14:30Z

@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 · 2018-05-28T08:17:42Z

@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 · 2018-05-28T08:20:34Z

Do you encounter this problem with buildOptimizer false??

LarsVonQualen · 2018-05-28T08:23:36Z

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 · 2018-05-28T11:37:47Z

The error appeared after enabling source maps.

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

LarsVonQualen · 2018-05-28T12:30:30Z

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 · 2018-05-28T12:46:11Z

@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 · 2018-05-28T13:10:33Z

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: angular/devkit#937 or angular/devkit#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 · 2018-05-28T15:59:50Z

@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 · 2018-05-29T06:10:04Z

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

DGolverdingen · 2018-05-29T06:14:30Z

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

tsvetomir · 2018-05-29T06:23:01Z

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

LarsVonQualen · 2018-05-29T09:00:17Z

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

Thank you 👍

tsvetomir · 2018-06-04T07:48:21Z

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.

tsvetomir mentioned this issue May 29, 2018

Module resolution fails with build optimizer and source maps angular/angular-cli#11055

Closed

DGolverdingen mentioned this issue May 30, 2018

Angular optimization causes problem because of the use of constructor.name progress/JSDO#178

Open

tsvetomir closed this as completed Jun 4, 2018

tsvetomir added Bug pkg:drawing labels Jun 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

DGolverdingen commented May 18, 2018

tsvetomir commented May 21, 2018

LarsVonQualen commented May 25, 2018

tsvetomir commented May 25, 2018

billdwhite commented May 25, 2018

thaoula commented May 28, 2018

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 •

edited

Loading

DGolverdingen commented May 28, 2018

LarsVonQualen commented May 28, 2018 •

edited

Loading

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 •

edited

Loading

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 •

edited

Loading

tsvetomir commented May 28, 2018

tsvetomir commented May 29, 2018

DGolverdingen commented May 29, 2018 •

edited

Loading

tsvetomir commented May 29, 2018

LarsVonQualen commented May 29, 2018

tsvetomir commented Jun 4, 2018

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

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

Comments

DGolverdingen commented May 18, 2018

I'm submitting a...

Current behavior

Expected behavior

Minimal reproduction of the problem with instructions

Environment

tsvetomir commented May 21, 2018

LarsVonQualen commented May 25, 2018

tsvetomir commented May 25, 2018

billdwhite commented May 25, 2018

thaoula commented May 28, 2018

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 • edited Loading

DGolverdingen commented May 28, 2018

LarsVonQualen commented May 28, 2018 • edited Loading

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 • edited Loading

tsvetomir commented May 28, 2018

LarsVonQualen commented May 28, 2018 • edited Loading

tsvetomir commented May 28, 2018

tsvetomir commented May 29, 2018

DGolverdingen commented May 29, 2018 • edited Loading

tsvetomir commented May 29, 2018

LarsVonQualen commented May 29, 2018

tsvetomir commented Jun 4, 2018

LarsVonQualen commented May 28, 2018 •

edited

Loading

LarsVonQualen commented May 28, 2018 •

edited

Loading

LarsVonQualen commented May 28, 2018 •

edited

Loading

LarsVonQualen commented May 28, 2018 •

edited

Loading

DGolverdingen commented May 29, 2018 •

edited

Loading