Angular 10升级至11后Polymer函数无法正常运行求助

问题概况 #

• 项目在Angular 8、9、10版本运行正常，升级到11后，多个微服务均出现控制台错误（对应ng serve编译成功后的错误信息）
• 项目中在bundle.html文件里使用Polymer，此问题为升级后首次出现

bundle.html中的相关代码片段：

//# sourceMappingURL=webcomponents-lite.js.map
</script>
<script>
  var Polymer = Polymer || {};
  Polymer.dom = 'shadow';
</script>
<div hidden="" by-polymer-bundler="">

已执行的排查操作 #

1. 严格按照Angular官方提供的10到11迁移步骤完成升级
2. 更新bower.json中的依赖至最新版本（webcomponents-lite.js.map文件位于bower_components目录下）
3. 尝试应用过针对Angular 10升11后模板插值失效问题的解决方案

项目package.json配置 #

{
  "name": "hvdc-emd-ui-connectivity",
  "version": "0.0.0",
  "scripts": {
    "preinstall": "npx npm-force-resolutions@0.0.3",
    "ng": "ng",
    "start": "ng serve",
    "build": "polymer-bundler --inline-scripts src/index.html>src/bundle.html | ng build",
    "prod-build": "polymer-bundler --inline-scripts src/index.html>src/bundle.html | ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^11.2.14",
    "@angular/cdk": "^11.2.13",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/localize": "^11.2.14",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
    "@ngrx/effects": "^11.1.1",
    "@ngrx/store": "^11.1.1",
    "ag-grid-angular": "^24.1.0",
    "ag-grid-community": "^24.1.0",
    "bootstrap": "^4.6.2",
    "core-js": "^2.5.4",
    "express": "^4.18.2",
    "express-request-proxy": "^2.2.2",
    "file-saver": "^2.0.5",
    "npm-force-resolutions": "0.0.3",
    "prettier": "^2.8.8",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "zone.js": "^0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.19",
    "@angular/cli": "^11.2.19",
    "@angular/compiler-cli": "~11.2.14",
    "@angular/language-service": "~11.2.14",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.1.6"
  },
  "resolutions": {
    "json-schema": "0.4.0",
    "tough-cookie": "4.1.3",
    "moment-timezone": "0.5.35",
    "lodash": "4.17.21",
    "qs": "6.10.3",
    "async": "2.6.4",
    "moment": "2.29.4"
  },
  "config": {
    "unsafe-perm": true
  }
}

解决思路与方案 #

1. 调整Polymer初始化时机
   Angular 11对DOM加载和应用启动的时机控制更严格，需确保Polymer的初始化脚本在Angular应用启动前完全执行。可修改index.html，将webcomponents-lite.js及Polymer配置脚本放在Angular入口脚本（main.ts）的加载之前。

2. 重构构建流程
   当前构建命令先通过polymer-bundler生成bundle.html再执行ng build，Angular 11的构建工具对HTML文件的解析规则更严格，可能导致Polymer的内联脚本被误处理。建议调整顺序：先执行ng build生成产物，再用polymer-bundler处理最终的HTML文件；或在Angular构建配置中禁用对HTML的严格校验。

3. 替换Web Components Polyfill依赖
   弃用旧的webcomponents-lite.js，改用@webcomponents/webcomponentsjs（通过npm管理，而非bower），该包与Angular 11的兼容性更好，能避免因polyfill版本不匹配导致的问题。

4. 修复模板结构冲突
   检查polymer-bundler处理后的HTML文件，确认Angular模板的插值表达式、指令等未被破坏。若之前的模板插值解决方案未生效，需对照Angular 11的语法规范，逐一修正模板中的问题。

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