升级Angular至8.x.x后Syncfusion ej2-diagram触发运行时异常

Great question—this issue boils down to key differences between ES5 and ES2015 (ES6) variable handling rules, paired with an older version of the Syncfusion library not fully adhering to ES6 standards.

The Root Cause #

ES2015 introduced Temporal Dead Zones (TDZ) for let and const declarations. Unlike var (the default in ES5), let/const variables can’t be accessed at all before they’re properly initialized.

Your error trace points directly to the Syncfusion ej2-diagrams v17.2.41 library’s ES2015 build (ej2-diagrams.es2015.js:8677). In this version, the library contains code that tries to reference the Node class/variable before it’s been initialized.

• When targeting ES5: TypeScript transpiles all let/const declarations to var, which doesn’t have a TDZ. This hides the initialization order flaw, so the code runs without errors.
• When targeting ES2015: The original let/const syntax is preserved, and the TDZ kicks in when the library tries to access Node too early—hence the runtime error.

Angular 8 also has stricter ES2015 compatibility checks than older Angular versions, which makes this issue surface where it might have been hidden before.

Fixes to Resolve the Issue #

1. Upgrade the Syncfusion Diagram Library (Recommended) #

Syncfusion has almost certainly fixed this initialization order bug in newer releases. Upgrading to a version compatible with Angular 8 will resolve the problem. Run this command to update:

npm install @syncfusion/ej2-angular-diagrams@latest --save

If you need to stick to a specific version range, releases v18.0.0 and above are known to have robust Angular 8 ES2015 support.

2. Stay on ES5 Target (Temporary Workaround) #

If upgrading isn’t feasible right now, keep your tsconfig.json set to target: "es5". This will transpile all ES6+ code to ES5, bypassing the TDZ error. Note that this means you won’t get the performance benefits of native ES2015 features in modern browsers.

3. Check for Circular Dependencies (Edge Case) #

While less likely, circular dependencies in your own code that reference the Syncfusion Diagram component could worsen initialization issues. Use a tool like madge to scan for circular imports:

npx madge --circular src/

If any are found, refactor the code to break the cycle.

内容的提问来源于stack exchange，提问作者marco birchler