Angular应用嵌入React应用时a11y.es5.js相关报错排查
背景
我们开发了一款支持嵌入第三方网站的Angular应用,构建时会将所有输出的JS bundle合并为单个JS文件。接入方仅需在页面中通过script标签引入该JS文件,再在body节点内添加匹配应用主组件选择器的自定义元素即可完成嵌入。过去几年间,该嵌入方案在所有接入的页面、应用中均运行正常。
问题描述
近期我们尝试将该Angular应用嵌入React应用时,抛出了多个与a11y.es5.js文件相关的错误。
第一个错误发生在a11y.es5.js中,从调用链路来看由RxJs依赖触发,错误信息与调用栈如下:
ERROR TypeError: Cannot read properties of undefined (reading 'addEventListener') at _global.<computed>.<computed> [as addEventListener) (ally.es5.js:1847:1) at Observable._subscribe (compiler..js:9840:16) at webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable._trySubscribe (pairwise.js 620) at webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe (onErrorResumeNext.js:137:1) at subscribeToResult (timeoutWith.js:9:1) at webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._innerSub (IntervalObservable.js:1:14) at webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (embed.bundle.js:181269:14) at webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber_.next (IfObservable.js:49:1) ... at webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe (onErrorResumeNext.js:137: 1) at webpackJsonp../node_modules/@ngx-translate/core/src/translate.service.js.TranslateService.getTranslation (core.js:47:1) at webpackJsonp../node_modules/@ngx-translate/core/src/translate.service.js.TranslateService.retrieveTranslations (core.js:31:1) at webpackJsonp../node_modules/@ngx-translate/core/src/translate.service.js.TranslateService.use (core.js:4:1) at webpackJsonp../src/app/components/embed-main/embed-main.component.ts.EmbedMainComponent.initLang (main.ts:109:2) at webpackJsonp../src/app/components/embed-main/embed-main.component.ts.EmbedMainComponent.ngOnInit (main.ts:109:2) at checkAndUpdateDirectiveInline (forms.js:6068:1) at checkAndUpdateNodeInline (forms.js:7595:1) at checkAndUpdateNode (forms.js:7538:1) at debugCheckAndUpdateNode (autocomplete.es5.js:212:18) at debugCheckDirectivesFn (autocomplete.es5.js:153:1) at Object.eval [as updateDirectives] (EmbedMainComponentt.ngfactory.js:21:5) at Object.debugUpdateDirectives [as updateDirectives] (autocomplete.es5js:138:1) at checkAndupdateView (forms.js.7504:1) at callWithDebugContext (autocomplete.es5.js:539:1) at Object.debugCheckAndupdateView [as checkAndUpdateView] (autocomplete.es5.js:76:1) at webpackJsonp../node_modules/@angular/core/esm5/core.js.ViewRef_.detectChanges (forms.js:5272:1) at core.js:16520:1 at Array.forEach (<anonymous>) at webpackJsonp../node_modules/@angular/core/esm5/core.js.ApplicationRef.tick (core.js:16520:1) at webpackJsonp../node_modules/@angular/core/esm5/core.js.ApplicationRef._loadComponent (core.js:16586:1) at webpackJsonp../node_modules/@angular/core/esm5/core.js.ApplicationRef.bootstrap (core.js:16474:1)
第二个错误发生在Google Maps Javascript文件中,从调用链路来看由a11y.es5.js文件内的逻辑异常触发,错误信息与调用栈如下:
Unhandled Promise rejection: Cannot read properties of undefined (reading 'l') : Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read properties of undefined (reading "l") at js?key=abc:199:85 at webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (ally.es5.js:871:17) at webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (ally.es5.js:631:1) at ally.es5.js:1295:17 at webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke Task (ally.es5.js:904:13) at webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (ally.es5.js:671:1) at drainMicroTaskQueue (ally.es5.js:1064:1) at z (<anonymous>:55:81) TypeError: Cannot read properties of undefined (reading 'l') at https://maps.googleapis.com/maps/api/?key=abc:199:85 at webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (https://ourproducthost/embed.bundle.js:8809:26) at webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run (https://ourproducthost/embed.bundle.js:8569:43) at https://ourproducthost/embed.bundle.js:9233:57 at webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke Task (https://ourproducthost/embed.bundle.js:8842:31) at webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (https://ourproducthost/embed. bundle.js:8609:47) at drainMicroTaskQueue (https://ourproducthost/embed.bundle.js:9002:35) at z (<anonymous>:55:81)
内容的提问来源于stack exchange,提问作者Aaron T
相关产品推荐
相关产品推荐

