Incubator-echarts: Angular 6 cannot compile with `ng serve --prod`

Created on 8 Jun 2018 · 9Comments · Source: apache/incubator-echarts

One-line summary [问题简述]

Angular 6 cannot compile with --prod

It worked well with Angular 4 and Angular 5

Version & Environment [版本及环境]

ECharts version [ECharts 版本]:
"echarts": "^4.0.2",
"echarts-gl": "^1.0.1",
"echarts-wordcloud": "^1.1.3",
OS Version [操作系统类型和版本]: Win10

Other comments [其他信息]

Error in cmd:

ng serve --prod

ERROR in ./node_modules/echarts-gl/dist/echarts-gl.js
Module build failed: TypeError: Cannot read property 'kind' of undefined
    at isObjectOrObjectArrayTypeReference (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20709:34)
    at parseNestedTypeLiteral (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20748:43)
    at parseParameterOrPropertyTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20733:85)
    at parseTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20572:40)
    at D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20447:44
    at Object.scanRange (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:8611:26)
    at parseJSDocCommentWorker (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20419:25)
    at Object.parseJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20373:31)
    at addJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15579:68)
    at createNodeWithJSDoc (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15906:17)
    at parseObjectLiteralElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18930:24)
    at parseListElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16289:20)
    at parseDelimitedList (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16574:31)
    at parseObjectLiteralExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18979:31)
    at parsePrimaryExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18872:28)
    at parseMemberExpressionOrHigher (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18445:30)
ERROR in ./node_modules/echarts/lib/coord/geo/Region.js
Module build failed: TypeError: Cannot read property 'kind' of undefined
    at isObjectOrObjectArrayTypeReference (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20709:34)
    at parseNestedTypeLiteral (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20748:43)
    at parseParameterOrPropertyTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20733:85)
    at parseTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20572:40)
    at D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20447:44
    at Object.scanRange (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:8611:26)
    at parseJSDocCommentWorker (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20419:25)
    at Object.parseJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20373:31)
    at addJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15579:68)
    at createNodeWithJSDoc (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15906:17)
    at parseObjectLiteralElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18930:24)
    at parseListElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16289:20)
    at parseDelimitedList (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16574:31)
    at parseObjectLiteralExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18979:31)
    at parsePrimaryExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18872:28)
    at parseMemberExpressionOrHigher (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18445:30)
ERROR in ./node_modules/zrender/lib/core/BoundingRect.js
Module build failed: TypeError: Cannot read property 'kind' of undefined
    at isObjectOrObjectArrayTypeReference (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20709:34)
    at parseNestedTypeLiteral (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20748:43)
    at parseParameterOrPropertyTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20733:85)
    at parseTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20572:40)
    at D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20447:44
    at Object.scanRange (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:8611:26)
    at parseJSDocCommentWorker (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20419:25)
    at Object.parseJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20373:31)
    at addJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15579:68)
    at createNodeWithJSDoc (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15906:17)
    at parseObjectLiteralElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18930:24)
    at parseListElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16289:20)
    at parseDelimitedList (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16574:31)
    at parseObjectLiteralExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18979:31)
    at parsePrimaryExpression (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18872:28)
    at parseMemberExpressionOrHigher (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:18445:30)
ERROR in ./node_modules/echarts/lib/data/Tree.js
Module build failed: TypeError: Cannot read property 'kind' of undefined
    at isObjectOrObjectArrayTypeReference (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20709:34)
    at parseNestedTypeLiteral (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20748:43)
    at parseParameterOrPropertyTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20733:85)
    at parseTag (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20572:40)
    at D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20447:44
    at Object.scanRange (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:8611:26)
    at parseJSDocCommentWorker (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20419:25)
    at Object.parseJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:20373:31)
    at addJSDocComment (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15579:68)
    at createNodeWithJSDoc (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15906:17)
    at parseStatement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:19455:53)
    at parseListElement (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16289:20)
    at parseList (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:16273:35)
    at parseSourceFileWorker (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15558:37)
    at Object.parseSourceFile (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15429:26)
    at Object.createSourceFile (D:\GitFolders\test3\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:15260:29)

pending

Source

monkeycon

👍6

Most helpful comment

I have the exact same issue,

Angular 6 will use the echarts using the "@ types/echarts" typings

The issue comes from webpack optimization so as a temporary fix you can run ng build --prod --build-optimizer=false and the project will compile (though this is not ideal).

Upon further research, I discovered that the issue seems to stem from the version of webpack being used by the angular cli (with cli version 6.0 + uses webpack 4.8.3)

"Whenever you see Cannot read property 'afterCompile' of undefined it probably means ts-loader is dealing with webpack 3 not webpack 4." - johnnyreilly (https://github.com/TypeStrong/ts-loader/issues/729)

I'm still looking into the issue and trying to find a permanent fix but this is as far as I got so far.

dragonman117 on 8 Jun 2018

👍4

All 9 comments

Angular 6 uses typescript. Unless echarts have exposed type definition (like .h header for C program), you will have compilation problem.

chfw on 8 Jun 2018

👎3

I have the exact same issue,

Angular 6 will use the echarts using the "@ types/echarts" typings

The issue comes from webpack optimization so as a temporary fix you can run ng build --prod --build-optimizer=false and the project will compile (though this is not ideal).

Upon further research, I discovered that the issue seems to stem from the version of webpack being used by the angular cli (with cli version 6.0 + uses webpack 4.8.3)

"Whenever you see Cannot read property 'afterCompile' of undefined it probably means ts-loader is dealing with webpack 3 not webpack 4." - johnnyreilly (https://github.com/TypeStrong/ts-loader/issues/729)

I'm still looking into the issue and trying to find a permanent fix but this is as far as I got so far.

dragonman117 on 8 Jun 2018

👍4

@pissang I'm unsure why this is marked as closed, is there a patch that is not mentioned here?

dragonman117 on 11 Jun 2018

@dragonman117 I just referenced another similar issue and closed that one. This issue will still be open and followed.

pissang on 15 Jun 2018

For those seeking for a quick fix, removing @types/echarts allows to not remove the build optimizer.

wartab on 26 Jun 2018

I found the fix for me as for now. Still it is a workaround, I cannot explain it, I cannot say it is very stable and the best solution forever but it is better than nothing.

All you need is to remap the path of the echarts to use the minified version of it. See example of the root tsconfig file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "paths": {
      "echarts": ["node_modules/echarts/dist/echarts.min.js"]
    },
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

With this you can still use the typings and enjoy the AOT build. Actually the build became a bit faster (IMO)

smnbbrv on 2 Jul 2018

I got this error after updating ngx-echarts to version 4.0.0. Downgrading to 3.2.0 solved the issue for me.

It's working fine when using this combination of packages:

"@angular-devkit/build-angular": "^0.6.8",
"@types/echarts": "0.0.13",
"echarts": "^4.1.0",
"ngx-echarts": "^3.2.0"

Update

After updating all packages to @latest, it's working fine too:

"@angular-devkit/build-angular": "^0.7.4",
"@types/echarts": "^4.1.0",
"echarts": "^4.1.0",
"ngx-echarts": "^4.0.0"

JeffreyRoosendaal on 22 Aug 2018

Not work after angular7

hijamoya on 10 Nov 2018

works for me with this:

"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "^7.3.9",
"@types/echarts": "^4.1.0",
"echarts": "^4.8.0",
"ngx-echarts": "^4.2.2", (5.0.0 not work)