Angular 11集成ArcGIS构建报错：需额外loader处理加载器结果

安全阿岳

2026-8-27

问题描述

同一代码分支下，1名使用Node v12.20.0、Npm 8.13.1版本的开发者执行项目构建无任何错误；另外2名使用完全相同Node、Npm版本的开发者（分别使用Windows、Linux操作系统）却无法构建同一份代码，目前已排除Node、Npm版本差异因素，需要排查其他可能导致构建失败的环境配置差异。

核心报错

报错指向@arcgis/core/core/has.js文件解析失败，出现意外token，文件经过@angular-devkit/build-angular的babel webpack-loader、@ngtools/webpack的ivy加载器处理后仍无法正常解析，提示需额外loader处理加载器输出结果，错误调用链路从ArcGIS核心几何模块延伸至项目业务组件、应用入口文件，部分错误日志如下：

Error: ./node_modules/@arcgis/core/core/has.js 5:101
Module parse failed: Unexpected token (5:101)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
| See https://js.arcgis.com/4.24/esri/copyright.txt for details.
| */
> let e;function a(a){return"function"==typeof e[a]?e[a]=e[a](globalThis):e[a]}e=globalThis.dojoConfig?.has||globalThis.esriConfig?.has?{...globalThis.dojoConfig?.has,...globalThis.esriConfig?.has}:{},a.add=(d,o,r,i)=>((i||void 0===e[d])&&(e[d]=o),r&&a(d)),a.cache=e,a.add("esri-deprecation-warnings",!0),(()=>{a.add("host-webworker",void 0!==globalThis.WorkerGlobalScope&&self instanceof globalThis.WorkerGlobalScope);const e="undefined"!=typeof window&&"undefined"!=typeof location&&"undefined"!=typeof document&&window.location===location&&window.document===document;if(a.add("host-browser",e),a.add("host-node","object"==typeof globalThis.process&&globalThis.process.versions?.node&&globalThis.process.versions.v8),a.add("dom",e),a("host-browser")){const e=navigator,d=e.userAgent,o=e.appVersion,r=parseFloat(o);if(a.add("wp",parseFloat(d.split("Windows Phone")[1])||void 0),a.add("msapp",parseFloat(d.split("MSAppHost/")[1])||void 0),a.add("khtml",o.includes("Konqueror")?r:void 0),a.add("edge",parseFloat(d.split("Edge/")[1])||void 0),a.add("opr",parseFloat(d.split("OPR/")[1])||void 0),a.add("webkit",!a("wp")&&!a("edge")&&parseFloat(d.split("WebKit/")[1])||void 0),a.add("chrome",!a("edge")&&!a("opr")&&parseFloat(d.split("Chrome/")[1])||void 0),a.add("android",!a("wp")&&parseFloat(d.split("Android ")[1])||void 0),a.add("safari",!o.includes("Safari")||a("wp")||a("chrome")||a("android")||a("edge")||a("opr")?void 0:parseFloat(o.split("Version/")[1])),a.add("mac",o.includes("Macintosh")),!a("wp")&&d.match(/(iPhone|iPod|iPad)/)){const e=RegExp.$1.replace(/P/,"p"),o=d.match(/OS ([\d_]+)/)?RegExp.$1:"1",r=parseFloat(o.replace(/_/,".").replace(/_/g,""));a.add(e,r),a.add("ios",r)}a.add("trident",parseFloat(o.split("Trident/")[1])||void 0),a("webkit")||(!d.includes("Gecko")||a("wp")||a("khtml")||a("trident")||a("edge")||a.add("mozilla",r),a("mozilla")&&a.add("ff",parseFloat(d.split("Firefox/")[1]||d.split("Minefield/")[1])||void 0))}})(),(()=>{if(globalThis.navigator){const e=navigator.userAgent,d=/Android|webOS|iPhone|iPad|iPod|BlackBerry|Opera Mini|IEMobile/i.test(e),o=/iPhone/i.test(e);d&&a.add("esri-mobile",d),o&&a.add("esri-iPhone",o),a.add("esri-geolocation",!!navigator.geolocation)}a.add("esri-canvas-svg-support",!a("trident")),a.add("esri-wasm","WebAssembly"in globalThis),a.add("esri-shared-array-buffer",(()=>{const e="SharedArrayBuffer"in globalThis,a=!1===globalThis.crossOriginIsolated;return e&&!a})),a.add("wasm-simd",(()=>{const e=[0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11];return WebAssembly.validate(new Uint8Array(e))})),a.add("esri-atomics","Atomics"in globalThis),a.add("esri-workers","Worker"in globalThis),a.add("web-feat:cache","caches"in globalThis),a.add("esri-workers-arraybuffer-transfer",!a("safari")||Number(a("safari"))>=12),a.add("featurelayer-simplify-thresholds",[.5,.5,.5,.5]),a.add("featurelayer-simplify-payload-size-factors",[1,1,4]),a.add("featurelayer-snapshot-enabled",!0),a.add("featurelayer-snapshot-point-min-threshold",8e4),a.add("featurelayer-snapshot-point-max-threshold",4e5),a.add("featurelayer-snapshot-point-coverage",.1),a.add("featurelayer-advanced-symbols",!1),a.add("featurelayer-pbf",!0),a.add("featurelayer-pbf-statistics",!1),a.add("feature-layers-workers",!0),a.add("feature-polyline-generalization-factor",1),a.add("mapview-transitions-duration",200),a.add("mapview-srswitch-adjust-rotation-scale-threshold",24e6),a.add("mapserver-pbf-enabled",!1),a.add("mapimagelayer-popup-identify-max-tolerance",20),a.add("heatmap-allow-raster-fallback",!0),a.add("heatmap-force-raster",!1),a("host-webworker")||a("host-browser")&&(a.add("esri-csp-restrictions",(()=>{try{new Function}catch{return!0}return!1})),a.add("esri-image-decode",(()=>{if("decode"in new Image){const e=new Image;return e.src='data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>',void e.decode().then((()=>{a.add("esri-image-decode",!0,!0,!0)})).catch((()=>{a.add("esri-image-decode",!1,!0,!0)}))}return!1})),a.add("esri-url-encodes-apostrophe",(()=>{const e=window.document.createElement("a");return e.href="?'",e.href.includes("?%27")})))})();export{a as default};
| 
 @ ./node_modules/@arcgis/core/geometry/Extent.js 5:233-256
 @ ./node_modules/@arcgis/core/geometry/Polygon.js
 @ ./src/app/features/header/title/senterlinje/senterlinje.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

排查方向

按概率从高到低依次排查以下问题：

依赖内容不一致：首先对比正常构建环境和异常环境下node_modules/@arcgis/core/core/has.js的文件内容是否完全一致。如果锁文件（package-lock.json）没有被所有开发者同步、安装依赖时未使用锁文件固定版本、不同开发者用的npm源拉取到的包内容有差异、Windows/Linux平台相关依赖安装错位，都会直接导致依赖文件和正常环境不一致。优先删除异常环境的node_modules文件夹，使用和正常环境完全一致的锁文件，执行npm ci重新安装依赖验证。
Babel转译范围配置缺失：报错文件中使用了可选链?.、对象展开...这类ES2020语法，Angular CLI默认不会转译node_modules下的第三方依赖。如果正常构建的开发者本地有未提交的配置（比如自定义webpack配置、babel配置修改了node_modules转译规则，把@arcgis/core加入了转译白名单），其他环境没有这份本地配置就会出现语法解析失败。可以对比正常和异常环境下所有项目配置文件（包括未被git跟踪的本地配置）是否完全一致，同时检查项目根目录的.browserslistrc配置，是否目标浏览器版本配置过低导致babel不会转译对应高版本语法。
换行符配置差异：Windows下Git默认开启core.autocrlf=true会把仓库里的LF换行符自动转成CRLF，部分旧版本的webpack loader对CRLF格式的JS文件计算token位置时会出现偏移，明明语法正确却报指定位置意外token的错误。可以执行git config --global core.autocrlf false关闭自动换行转换，重新拉取代码后重试构建。
本地缓存污染：异常环境的npm全局缓存、Angular本地构建缓存（项目根目录.angular文件夹）损坏时，会读取到错误的缓存内容导致构建失败。执行npm cache clean --force清除npm缓存，删除.angular缓存文件夹后重新构建验证。
npm本地配置差异：检查异常环境的用户目录下.npmrc文件、项目根目录.npmrc文件是否和正常环境一致，是否配置了legacy-peer-deps、ignore-scripts这类会影响依赖安装结构、依赖脚本执行的规则，部分配置会导致依赖的后置安装脚本没有执行，依赖文件没有被正常预处理。
系统权限/路径问题：Linux环境下如果项目目录权限配置错误，会导致构建时部分依赖文件读取不完整；Windows环境下如果项目路径包含中文、空格、特殊字符，也可能导致loader路径匹配异常，无法正确加载对应转译规则。

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