Angular Build Fails Due to Unresolved Imports in ECharts, ECharts-GL and ZRender

[kaizerpwn]

When using echarts, echarts-gl, zrender in an Angular project, the build fails due to unresolved module imports. The errors indicate missing dependencies within echarts and zrender, such as:

"echarts/lib/util/layout"
"echarts/lib/coord/cartesian/Cartesian"
"zrender/lib/animation/requestAnimationFrame"

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

    node_modules/echarts-gl/lib/coord/geo3DCreator.js:3:30:
      3 │ 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/coord/geo3DCreator.js:3:54:
      3 │ 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 "echarts/lib/util/layout"

    node_modules/echarts-gl/lib/coord/globeCreator.js:3:30:
      3 │ 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/coord/globeCreator.js:3:54:
      3 │ 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 "echarts/lib/coord/cartesian/Cartesian"

    node_modules/echarts-gl/lib/coord/grid3D/Cartesian3D.js:2:22:
      2 │ import Cartesian from 'echarts/lib/coord/cartesian/Cartesian';
        ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./lib/coord/cartesian/Cartesian" was not found on the file system:

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

  Import from "echarts/lib/coord/cartesian/Cartesian.js" to get the file "node_modules/echarts/lib/coord/cartesian/Cartesian.js":

    node_modules/echarts-gl/lib/coord/grid3D/Cartesian3D.js:2:60:
      2 │ import Cartesian from 'echarts/lib/coord/cartesian/Cartesian';
        │                                                             ^
        ╵                                                             .js

  You can mark the path "echarts/lib/coord/cartesian/Cartesian" 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/coord/grid3DCreator.js:4:30:
      4 │ 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/coord/grid3DCreator.js:4:54:
      4 │ 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/core/LayerGL.js:20:34:
      20 │ ...AnimationFrame 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/core/LayerGL.js:20:78:
      20 │ ...AnimationFrame 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.


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

    node_modules/echarts-gl/lib/util/animatableMixin.js:1:21:
      1 │ import Animator from 'zrender/lib/animation/Animator';
        ╵                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

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

    node_modules/echarts-gl/lib/util/animatableMixin.js:1:52:
      1 │ import Animator from 'zrender/lib/animation/Animator';
        │                                                     ^
        ╵                                                     .js

  You can mark the path "zrender/lib/animation/Animator" 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/core/LRU"

    node_modules/echarts-gl/lib/util/graphicGL.js:11:21:
      11 │ import LRUCache from 'zrender/lib/core/LRU';
         ╵                      ~~~~~~~~~~~~~~~~~~~~~~

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

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

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

    node_modules/echarts-gl/lib/util/graphicGL.js:11:42:
      11 │ import LRUCache from 'zrender/lib/core/LRU';
         │                                           ^
         ╵                                           .js

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

Even though echarts, echarts-gl, and zrender are installed, the Angular build process cannot resolve these imports. The error suggests marking the missing paths as external, but this approach leaves unresolved imports in the bundle, which is not a viable solution.

The provided package.json and angular.json files define a minimal reproducible setup that demonstrates the issue.

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "projects": {
    "minimal-angular-echarts": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/minimal-angular-echarts",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "assets": ["src/assets"],
            "styles": ["src/styles.css"],
            "scripts": [],
            "allowedCommonJsDependencies": ["echarts", "zrender", "echarts-gl"]
          }
        }
      }
    }
  }
}

package.json

{
  "name": "minimal-angular-echarts",
  "version": "0.0.1",
  "scripts": {
    "start": "ng serve",
    "build": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/core": "^19.1.6",
    "@angular/common": "^19.1.6",
    "@angular/compiler": "^19.1.6",
    "@angular/platform-browser": "^19.1.6",
    "@angular/platform-browser-dynamic": "^19.1.6",
    "@angular/router": "^19.1.6",
    "ngx-echarts": "^19.0.0",
    "echarts": "^5.6.0",
    "echarts-gl": "^2.0.9",
    "zrender": "^5.6.1"
  },
  "devDependencies": {
    "@angular/cli": "^19.1.7",
    "@angular/compiler-cli": "^19.1.6",
    "typescript": "~5.5.4"
  }
}

tsconfig.json

{
  "compileOnSave": false,
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
  ],
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "echarts": [
        "node_modules/echarts"
      ],
      "echarts/lib/util/layout": [
        "node_modules/echarts/lib/util/layout.js"
      ],
      "echarts/lib/coord/cartesian/Cartesian": [
        "node_modules/echarts/lib/coord/cartesian/Cartesian.js"
      ],
      "zrender/lib/animation/requestAnimationFrame": [
        "node_modules/zrender/lib/animation/requestAnimationFrame.js"
      ],
      "zrender/lib/animation/Animator": [
        "node_modules/zrender/lib/animation/Animator.js"
      ],
      "zrender/lib/core/LRU": [
        "node_modules/zrender/lib/core/LRU.js"
      ],
      "echarts/*": [
        "node_modules/echarts/*"
      ],
      "zrender": [
        "node_modules/zrender"
      ],
      "zrender/*": [
        "node_modules/zrender/*"
      ],
      "echarts-gl": [
        "node_modules/echarts-gl"
      ],
      "echarts-gl/*": [
        "node_modules/echarts-gl/*"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@analysis/*": [
        "src/app/analysis/*"
      ],
      "@monitoring/*": [
        "src/app/monitoring/*"
      ],
      "@datasource/*": [
        "src/app/datasource/*"
      ],
      "@shared/*": [
        "src/app/shared/*"
      ],
      "@core/*": [
        "src/app/core/*"
      ],
      "@root/*": [
        "src/app/*"
      ]
    },
    "outDir": "./dist/out-tsc",
    "allowJs": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "es2020",
    "lib": [
      "es2019",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}