Question

我一直在尝试将Angular Universal与我的应用程序集成，这是一个很大的艰巨的工作。我们已经解决了许多问题，但是现在已经困扰了2天。任何帮助都非常感谢。

因此，构建运行正常，仅当我们尝试启动网站时才会发生错误。这是错误：

EmptyError：顺序中没有元素在新的EmptyError（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：147171：28）在C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：147226：518 在Object.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：170696：23）在TapSubscriber.module.exports.TapSubscriber._complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：125494：31）在TapSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18）在TakeSubscriber.module.exports.Subscriber._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._complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）在FilterSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18）在DistinctUntilChangedSubscriber.module.exports.Subscriber._complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）在DistinctUntilChangedSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18）在MapSubscriber.module.exports.Subscriber上完成。完成（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59809：26）在MapSubscriber.module.exports.Subscriber.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：59791：18）在State.module.exports.Subject.complete（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：55713：21）在State.module.exports.State.ngOnDestroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：131851：14）在callNgModuleLifecycle（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：8840：31）在NgModuleRef .module.exports.NgModuleRef_.destroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：9458：9）在C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：4766：73 在Array.forEach（）在PlatformRef.module.exports.PlatformRef.destroy（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：4766：31）在C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：170216：22 在ZoneDelegate.module.exports.ZoneDelegate.invoke（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394223：26）在Zone.module.exports.Zone.run（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）在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）在module.exports.ZoneTask.invokeTask（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394335：21）在ZoneTask.invoke（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：394320：48）在data.args。（匿名函数）（C：\ Projects \ beatstars-marketplace-v2 \ dist \ server.js：395173：25）在_combinedTickCallback（内部/进程/next_tick.js:138:11）在process._tickCallback（internal / process / next_tick.js：180：9）

我们已经进行了很多研究，认为与rxjs有关，但实际上不确定。我们尝试检查所有first（）用法似乎都还不错。我们尝试删除所有的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时，我的主要应用程序组件在first（）完成之前就已销毁，因此我需要手动退订。

Answer 2

要查找触发它的原因，可以在EmptyErrorImpl的{{1}}中放置一个断点。

然后，一旦触发它，您就可以查看调用堆栈以尝试查看可能提供有关失败原因的线索的堆栈变量。由于angular的异步特性，您可能看不到自己的代码文件在堆栈跟踪中显式显示-但您可以使用此方法获取线索并跟踪源。

我必须谨慎地添加一点，尽管Angular使用vendor.js进行关于路由的流控制。因此，不要以为仅仅因为得到EmptyError而实际上是不可恢复的-它在这里用于检测路由列表的不匹配（通过捕获错误）：

Angular Universal-EmptyError：顺序没有元素

2 个答案: