Angular Universal - EmptyError：序列中没有元素

Question

我一直在努力将Angular Universal与我的应用程序集成，这是一个巨大的斗争。我们已经解决了很多问题但是我们已经在这个问题上停留了2天了。任何帮助都非常感谢。

因此构建运行正常，只有当我们尝试启动网站时才会出现错误。这是错误：

EmptyError：在C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js的新EmptyError（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：147171：28）中没有顺序元素：147226 ：Tap.coubscriber.module.exports.TapSubscriber._complete（C：\ Projects \ beatstars-marketplace-v2 \）中的Object.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：170696：23）处的518 dist \ server.js：125494：31）在TakeSubscriber.mportle.exports.Subscriber的TapSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18） ._complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）在TakeSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server。 js：59791：18）在FilterSubscriber.module.exports.Subscriber。完成（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26） ：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18）在DistinctUntilChangedSubsc ribin.module.exports.Subscriber._complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）at DistinctUntilChangedSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace -v2 \ dist \ server.js：59791：18）在MapSubscriber.module的MapSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）。在State.module.exports.Subject.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist）中的exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18） \ server.js：55713：21）在callNgModuleLifecycle（C：\ Projects \ beatstars）的State.module.exports.State.ngOnDestroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：131851：14） -marketplace-v2 \ dist \ server.js：8840：31）在C的NgModuleRef.module.exports.NgModuleRef_.destroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：9458：9）：位于PlatformRef.module.exports.PlatformRef的Array.forEach（）的Projects \ beatstars-marketplace-v2 \ dist \ server.js：4766：73 .destroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：4766：31）位于ZoneDelegate.module的C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：170216：22。在Zone.module.exports.Zone.run上导出.ZoneDelegate.invoke（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394223：26）（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：393973：43）在C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394707：34在ZoneDelegate.module.exports.ZoneDelegate.invokeTask（C：\ Projects \ beatstars-marketplace- v2 \ dist \ server.js：394256：31）在drainMicroTaskQueue的Zone.module.exports.Zone.runTask（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394023：47）处（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394430：35）在ZoneTask的module.exports.ZoneTask.invokeTask（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394335：21） data.args。（匿名函数）。（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js .invoke（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394320：48） ：395173：25） at_combinedTickCallback（internal / process / next_tick.js：138：11）at process._tickCallback（internal / process / next_tick.js：180：9）

我们已经研究了很多，并且认为是与rxjs有关但却不确定是什么。我们尝试检查所有的第一个（）用法似乎都没问题。我们尝试删除所有canActivate防护，也没有工作，我们也尝试添加和删除路径中的pathMatch：full。这些是我们在互联网上找到的问题的解决方案，没有任何效果。

这是我们的package.json：

 {
   "name": "project-name",
   "version": "0.1.105",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --host 0.0.0.0 --port 8888 --disable-host-check",
     "dev": "ng serve",
     "hmr": "ng serve --hmr -e=hmr",
     "local": "ng serve --environment=local",
     "mock-api-dev": "concurrently \"ng serve\" \"node api/api.js\"",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
     "build:server:prod": "ng run beatstars-marketplace-v2.1:server && webpack --config webpack.server.config.js --progress --colors",
     "build:browser:prod": "ng build --prod",
     "build:prod": "npm run build:server:prod && npm run build:browser:prod",
     "server": "node local.js"
   },
  "private": true,
  "dependencies": {
     "@angular/animations": "6.1.2",
     "@angular/cdk": "^6.4.2",
     "@angular/common": "6.1.2",
     "@angular/compiler": "6.1.2",
     "@angular/core": "6.1.2",
     "@angular/forms": "6.1.2",
     "@angular/http": "6.1.2",
     "@angular/material": "^6.4.2",
     "@angular/platform-browser": "^6.1.2",
     "@angular/platform-browser-dynamic": "6.1.2",
     "@angular/platform-server": "^6.1.2",
     "@angular/router": "6.1.2",
     "@ng-toolkit/universal": "^1.1.41-beta.110",
     "@ngrx/effects": "^6.0.1",
     "@ngrx/store": "^6.0.1",
     "@nguniversal/express-engine": "^6.0.0",
     "@nguniversal/module-map-ngfactory-loader": "^6.0.0",
     "@ngx-share/core": "^6.0.1",
     "@swimlane/ngx-charts": "^9.0.0",
     "@types/algoliasearch": "^3.27.5",
     "algoliasearch": "^3.29.0",
     "body-parser": "latest",
     "canvas-toBlob": "^1.0.0",
     "compression": "latest",
     "core-js": "^2.4.1",
     "cors": "~2.8.4",
     "cropperjs": "^1.0.0-rc",
     "d3": "^4.10.2",
     "dom-autoscroller": "^2.3.3",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "lodash": "^4.17.5",
     "ng-lazyload-image": "^4.0.0",
     "ng-pick-datetime": "^5.2.6",
     "ng2-dnd": "^5.0.2",
     "ng2-dragula": "^2.0.2",
     "ng2-file-upload": "^1.2.1",
     "ngrx-store-freeze": "^0.2.0",
     "ngx-clipboard": "^11.1.1",
     "ngx-color-picker": "^6.6.0",
     "ngx-cookie": "^4.0.1",
     "ngx-editor": "3.2.1",
     "ngx-infinite-scroll": "^6.0.1",
     "ngx-page-scroll": "^5.0.0",
     "ngx-slick": "^0.2.0",
     "reselect": "^3.0.0",
     "rxjs": "^6.2.2",
     "rxjs-compat": "^6.2.2",
     "ts-loader": "4.2.0",
     "webpack-cli": "^2.1.4",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.7.2",
     "@angular/cli": "6.1.2",
     "@angular/compiler-cli": "6.1.2",
     "@angularclass/hmr": "^2.1.3",
     "@types/compression": "^0.0.36",
     "@types/cors": "^2.8.4",
     "@types/cropperjs": "^1.1.1",
     "@types/d3": "^4.10.1",
     "@types/hammerjs": "^2.0.34",
     "@types/jasmine": "^2.5.47",
     "@types/lodash": "^4.14.104",
     "@types/node": "^7.0.12",
     "@types/uuid": "^3.4.3",
     "@types/youtube": "^0.0.30",
     "codelyzer": "^4.0.1",
     "concurrently": "^3.5.0",
     "express": "^4.15.4",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "prettier": "^1.14.2",
     "protractor": "~5.1.0",
     "ts-node": "^3.0.2",
     "tslint": "^5.7.0",
     "tslint-eslint-rules": "^4.1.1",
     "typescript": "2.9.2"
   }
}

任何帮助将非常感激。

Answer 1

找出问题所在。我总是假设first（）自动取消订阅，所以我不需要手动取消订阅。但是使用Angular Universal使用.withBrowserTransition，我的主应用程序组件在第一个（）完成之前就被销毁了所以我需要手动取消订阅。

Answer 2

要查找触发它的内容，您可以在EmptyErrorImpl的vendor.js中放置一个断点。

然后，一旦它被触发，你可以查看调用堆栈，试图查看堆栈变量，这些变量可能会给出失败的线索。由于角度的异步性质，您可能无法在堆栈跟踪中看到自己的代码文件显示 - 但您可以使用此方法获取线索并跟踪源。

我必须谨慎地添加Angular使用EmptyError进行流量控制的路由。所以不要假设只是因为你得到一个EmptyError它实际上是不可恢复的 - 它用于检测路由列表的不匹配（通过捕获错误）：