在Angular Universal从8升级到11时，无法读取未定义错误的属性'kind‘

Question

当我尝试将Angular Universal Express引擎从8升级到11作为迁移的一部分时。

ng update @nguniversal/express-engine --allow-dirty --migrate-only --from 8 --to 11

我得到以下错误

[error] TypeError: Cannot read property 'kind' of undefined
    at _angularImportsFromNode (/project-name/node_modules/@schematics/angular/utility/ast-utils.js:179:16)
    at /project-name/node_modules/@schematics/angular/utility/ast-utils.js:222:24
    at Array.map (<anonymous>)
    at Object.getDecoratorMetadata (/project-name/node_modules/@schematics/angular/utility/ast-utils.js:222:10)
    at /project-name/node_modules/@nguniversal/express-engine/node_modules/@nguniversal/common/schematics/migrations/update-9/index.js:160:29
    at MergeMapSubscriber.project (/project-name/node_modules/@angular-devkit/schematics/src/rules/call.js:75:24)
    at MergeMapSubscriber._tryNext (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:67:27)
    at MergeMapSubscriber._next (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:57:18)
    at MergeMapSubscriber.Subscriber.next (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Subscriber.js:66:18)
    at Observable._subscribe (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/util/subscribeToArray.js:5:20)
    at Observable._trySubscribe (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:30:22)
    at MergeMapOperator.call (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:37:23)
    at Observable.subscribe (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:25:31)
    at MergeMapOperator.call (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/operators/mergeMap.js:37:23)
    at Observable.subscribe (/project-name/node_modules/@angular-devkit/schematics/node_modules/rxjs/internal/Observable.js:25:31)

我正在尝试查找导致此错误的模块。如果我忽略上面的迁移错误，浏览器构建工作正常，服务器编译也没有错误。

但是当我运行npm run serve:ssr时，我得到

/project-name/dist/server.js:54108
                    const scrollToFunction = Element.prototype.scrollTo;
                                             ^

ReferenceError: Element is not defined
    at supportsScrollBehavior (/project-name/dist/server.js:54108:46)
    at Module.K011 (/project-name/dist/server.js:58367:55)
    at __webpack_require__ (/project-name/dist/server.js:440:35)
    at Object.0 (/project-name/dist/server.js:780:32)
    at __webpack_require__ (/project-name/dist/server.js:440:35)
    at /home/zuhair/Projects/project-name/dist/server.js:492:15
    at Object.<anonymous> (/project-name/dist/server.js:494:13)
    at Object.<anonymous> (/hproject-name/dist/server.js:245382:9)
    at __webpack_require__ (/project-name/dist/server.js:20:41)
    at Module.<anonymous> (/project-name/dist/server.js:175:16)

我的package.json

 "dependencies": {
    "@agm/core": "1.0.0",
    "@angular/animations": "~11.1.1",
    "@angular/cdk": "~11.1.1",
    "@angular/common": "^11.1.1",
    "@angular/compiler": "~11.1.1",
    "@angular/core": "^11.1.1",
    "@angular/forms": "~11.1.1",
    "@angular/localize": "^11.1.1",
    "@angular/material": "^11.1.1",
    "@angular/material-moment-adapter": "^11.1.1",
    "@angular/platform-browser": "~11.1.1",
    "@angular/platform-browser-dynamic": "~11.1.1",
    "@angular/platform-server": "~11.1.1",
    "@angular/router": "~11.1.1",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@ng-bootstrap/ng-bootstrap": "^5.1.1",
    "@nguniversal/express-engine": "^11.1.1",
    "@nguniversal/module-map-ngfactory-loader": "^8.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "^11.1.2",
    "@thisissoon/angular-inviewport": "^4.2.0",
    "@types/chartjs": "0.0.31",
    "@types/greensock": "^1.15.32",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/jquery": "^3.3.29",
    "@types/node": "^12.11.1",
    "angular-bootstrap-md": "^8.8.1",
    "angular-csv-ext": "^1.0.2",
    "chart.js": "^2.5.0",
    "classlist.js": "^1.1.20150312",
    "cookie-parser": "^1.4.4",
    "core-js": "^2.5.4",
    "cors": "^2.8.5",
    "countup.js-angular2": "^7.3.0",
    "crypto-js": "^4.0.0",
    "easy-pie-chart": "^2.1.7",
    "express": "^4.15.2",
    "express-rate-limit": "^5.0.0",
    "font-awesome": "^4.7.0",
    "gsap": "^2.0.2",
    "helmet": "^3.16.0",
    "imagesloaded": "^4.1.4",
    "intersection-observer": "^0.5.1",
    "isotope-packery": "^2.0.1",
    "lazysizes": "^5.1.1",
    "moment": "^2.24.0",
    "moment-hijri": "^2.1.2",
    "ng-inline-svg": "8.2.1",
    "ng-uikit-pro-standard": "git+###########@git.mdbootstrap.com/mdb/angular/ng-uikit-pro-standard.git#8.10.0",
    "ngx-cookie-service": "^2.2.0",
    "ngx-file-drop": "^8.0.8",
    "ngx-mat-select-search": "^3.2.0",
    "ngx-scrollreveal": "^3.0.0",
    "ngx-toastr": "^11.1.1",
    "screenfull": "^3.3.0",
    "scrollmagic": "^2.0.6",
    "secure-web-storage": "^1.0.2",
    "slick-carousel": "^1.8.1",
    "tslib": "^2.0.0",
    "typed.js": "^2.0.9",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^11.0.0",
    "@angular-builders/dev-server": "^7.3.0",
    "@angular-devkit/build-angular": "~0.1101.2",
    "@angular/cli": "~11.1.2",
    "@angular/compiler-cli": "^11.1.1",
    "@angular/language-service": "~11.1.1",
    "@nguniversal/common": "^11.1.1",
    "@types/crypto-js": "^3.1.47",
    "@types/moment-hijri": "^2.1.0",
    "angular-user-idle": "^2.1.1",
    "codelyzer": "^6.0.0",
    "cypress": "^4.3.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jquery": "^3.3.1",
    "karma": "~5.2.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",
    "prettier": "^1.19.1",
    "protractor": "~7.0.0",
    "rxjs": "^6.3.3",
    "ts-loader": "^5.2.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-eslint-rules": "^5.4.0",
    "tslint-jasmine-rules": "^1.6.0",
    "typescript": "~4.0.5",
    "webpack-cli": "^3.1.0",
    "webpack-node-externals": "^1.7.2"
  },
  "browser": {
    "crypto": false
  }

我的环境：-

Angular CLI: 11.1.2
Node: 12.20.1
OS: linux x64

Angular: 11.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router
Ivy Workspace: Yes

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.1101.2
@angular-devkit/build-angular              0.1101.2
@angular-devkit/core                       11.1.2
@angular-devkit/schematics                 11.1.2
@angular/cli                               11.1.2
@nguniversal/common                        11.1.1
@nguniversal/express-engine                11.1.1
@nguniversal/module-map-ngfactory-loader   8.2.6
@schematics/angular                        11.1.2
@schematics/update                         0.1101.2
rxjs                                       6.5.4
typescript                                 4.0.5

我如何调试它呢？在Angular Universal中，有没有任何标志可以提供更多关于错误来自何处的数据？如果需要更清晰，将添加更多数据。

Answer 1

'domino‘包中的元素定义为我解决了Angular SSR模式下的问题：

  global['Element'] = (domino as any).impl.Element;