angular-cli生成的angular18.X项目绘制3D饼环产生构建错误

[Desuma]

angular-cli生成的angular18.X项目，项目引入了echarts@5.5.1与echarts-gl@2.0.9绘制3D饼环。按照官方提供的绘制3D图形示例，本地开发能正常运行（ng serve），但使用ng build会产生构建错误。这里复制了部分错误信息：

ng build

Application bundle generation failed. [9.100 seconds]

X [ERROR] Could not resolve "zrender/lib/core/matrix"

node_modules/echarts-gl/lib/chart/common/GLViewHelper.js:1:24:
  1 │ import * as matrix from 'zrender/lib/core/matrix';
    ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~

The module "./lib/core/matrix" was not found on the file system:

node_modules/zrender/package.json:87:11:
  87 │     "./*": "./*"
     ╵            ~~~~~

Import from "zrender/lib/core/matrix.js" to get the file "node_modules/zrender/lib/core/matrix.js":

node_modules/echarts-gl/lib/chart/common/GLViewHelper.js:1:48:
  1 │ import * as matrix from 'zrender/lib/core/matrix';
    │                                                 ^
    ╵                                                 .js

You can mark the path "zrender/lib/core/matrix" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

X [ERROR] Could not resolve "echarts/lib/util/layout"

node_modules/echarts-gl/lib/chart/graphGL/GraphGLView.js:2:30:
  2 │ import { getLayoutRect } from 'echarts/lib/util/layout';
    ╵                               ~~~~~~~~~~~~~~~~~~~~~~~~~

The module "./lib/util/layout" was not found on the file system:

node_modules/echarts/package.json:223:11:
  223 │     "./*": "./*"
      ╵            ~~~~~

Import from "echarts/lib/util/layout.js" to get the file "node_modules/echarts/lib/util/layout.js":

node_modules/echarts-gl/lib/chart/graphGL/GraphGLView.js:2:54:
  2 │ import { getLayoutRect } from 'echarts/lib/util/layout';
    │                                                       ^
    ╵                                                       .js

You can mark the path "echarts/lib/util/layout" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

X [ERROR] Could not resolve "zrender/lib/animation/requestAnimationFrame"

node_modules/echarts-gl/lib/chart/graphGL/GraphGLView.js:9:34:
  9 │ ...tAnimationFrame from 'zrender/lib/animation/requestAnimationFrame';
    ╵                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The module "./lib/animation/requestAnimationFrame" was not found on the file system:

node_modules/zrender/package.json:87:11:
  87 │     "./*": "./*"
     ╵            ~~~~~

Import from "zrender/lib/animation/requestAnimationFrame.js" to get the file "node_modules/zrender/lib/animation/requestAnimationFrame.js":

node_modules/echarts-gl/lib/chart/graphGL/GraphGLView.js:9:78:
  9 │ ...tAnimationFrame from 'zrender/lib/animation/requestAnimationFrame';
    │                                                                     ^
    ╵                                                                     .js

You can mark the path "zrender/lib/animation/requestAnimationFrame" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

[shalltears]

I also have this question

[iminguez]

Same problem

[lauritziu]

Same here. Running Angular 17.3.9, MacOS.

ng serve --hmr
works, but
npm run build -- --base-href / --output-path=./dist/out --configuration production
works not and produces the errors above.

Any idea?

Thanks!