We Keep Coding

Angular Universal Uncaught (in promise): Error: NotYetImplemented Error

When I try to build my Angular universal app it displays the below error in a terminal window. I have tried various aspects but nothing looks good till now. Can anyone suggest how can identify the root cause of the below error? Because it's a more generic error and I don't have any idea to look at any specific thing due to this generic error. Any help will be much appreciated as I am trying to resolve this for a long today.
Error: NotYetImplemented
at Object.exports2.nyi (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:97:140065)
at getWebGLContext (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:175775)
at isSoftwareRendering (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:175991)
at Module.57425 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:516353)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.39093 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:654211)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.33366 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:807688)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.13754 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:804775)
at resolvePromise (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1284:4397)
at resolvePromise (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1284:3367)
at D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1284:6112
at _ZoneDelegate2.invokeTask (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1268:11819)
at Object.onInvokeTask (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:4690:3154)
at _ZoneDelegate2.invokeTask (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1268:11709)
at Zone3.runTask (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1268:4295)
at drainMicroTaskQueue (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1268:15594) {
rejection: Error: NotYetImplemented
at Object.exports2.nyi (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:97:140065)
at getWebGLContext (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:175775)
at isSoftwareRendering (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:175991)
at Module.57425 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:6:516353)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.39093 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:654211)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.33366 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:807688)
at __webpack_require__ (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:8145:971155)
at Object.13754 (D:\Project\Project\ClientPortal\dist\ClientPortal\server\main.js:1:804775),
promise: ZoneAwarePromise [Promise] {```

you are using a third party library in your app that doesn't support ssr. you have to add this code every where you use this library:
isBrowser = false;
constructor(#Inject(PLATFORM_ID) private platformId){
isBrowser = isPlatformBrowser(this.platformId);
}
in your html file:
<thirdparty *ngIf="isBrowser"></thirdparty>
if you use it in your typescript:
if (this.isBrowser) {
...
}

global, buffer and process are undefined in ionic 4 angular 8

I'm trying to use an external js npm library in an Angular 8 ionic 4 app and I received
ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
I tried to solve this problem by inserting in polyfill.ts the following code:
(window as any).global = window;
import * as buffer from 'buffer';
window['buffer'] = buffer;
import * as process from 'process';
window['process'] = process;
When I try to run the ionic app with "ionic serve" I receive a run time error with:
index.js:43 Uncaught ReferenceError: global is not defined
at Object../node_modules/node-libs-browser/node_modules/buffer/index.js (index.js:43)
at __webpack_require__ (bootstrap:84)
at Module../src/polyfills.ts (polyfills.ts:1)
at __webpack_require__ (bootstrap:84)
at Object.1 (zone-flags.ts:5)
at __webpack_require__ (bootstrap:84)
at checkDeferredModules (bootstrap:45)
at Array.webpackJsonpCallback [as push] (bootstrap:32)
at polyfills.js:1
...
ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
at Object../node_modules/stream-http/lib/capability.js (capability.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/stream-http/lib/request.js (request.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/stream-http/index.js (index.js:1)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/rss-parser/lib/parser.js (parser.js:2)
at __webpack_require__ (bootstrap:84)
at Object../node_modules/rss-parser/index.js (index.js:3)
at __webpack_require__ (bootstrap:84)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
Any suggestion?

Original Answer
Angular is a Framework for client side. The runtime target is the browser. You cannot use libraries like process there, since those are only available when running a nodejs process.
You most likely want to split your application into a client and a server side.
Solution for rss-parser
As you mentioned in your comment, the library in question is rss-parser. As described in this issue, rss-parser is currently not working correctly with angular when using a bundler. Most likely due to not having ES Module support.
The solution is to use the prebundled version that gets shipped with the library. To do that, add the prepackaged version to your angular.json, into the script array in your architects build section. RSSReader is now available globally, in your window object and can be used like this:
import { Component } from '#angular/core';
// This tells TypeScript that you know this will be available globally during runtime.
// Unfortunately, RSSParser has no TS Declarations, so you have to use any or make a more concrete type yourself
declare const RSSParser:any;
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title:string = '';
items:Array<any> = [];
constructor() {
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
let parser = new RSSParser();
parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', (err, feed) => {
if (err) throw err;
console.log(feed);
this.title = feed.title;
this.items = feed.items;
})
}
}
Here is a working Stackblitz.

Unhandled Promise rejection: Invalid configuration of route 'PlayerManagement/PlayerMain/:id/': redirectTo and component cannot be used together

update 1:
after removing the component from the routing now the application is running for other components, fine but if we go back to that player component from another component in the browser i am getting below error
VM30741:34 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'PlayerManagement'
at resolvePromise (zone.js:418)
at resolvePromise (zone.js:403)
at zone.js:451
at ZoneDelegate.invokeTask (zone.js:225)
at Object.onInvokeTask (core.js:4943)
at ZoneDelegate.invokeTask (zone.js:224)
at Zone.runTask (zone.js:125)
at drainMicroTaskQueue (zone.js:357)
at HTMLAnchorElement.ZoneTask.invoke (zone.js:297)
TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at console.window.console.error (<anonymous>:36:101)
at defaultErrorLogger (core.js:1659)
at ErrorHandler.handleError (core.js:1720)
at Object.next (core.js:5700)
at SafeSubscriber.schedulerFn [as _next] (core.js:4538)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:239)
at SafeSubscriber.next (Subscriber.js:186)
at Subscriber._next (Subscriber.js:126)
at Subscriber.next (Subscriber.js:90)
I am upgrading from angular 2 to angular 5
after upgrading I am getting below three errors.
I used the below link and did update but still following errors are happening.
I googled for the error but not able to find anything
any idea how to fix it.
it would be great if you let me know how to fix it...so that in future I will fix it by myself
providing code snippet and package.json below
app.routing.ts
https://hastebin.com/ufetoxozon.js
package.json
https://hastebin.com/adatojuput.json
<!-- language-all: lang-or-tag-here -->
VM3365:34 Unhandled Promise rejection: Invalid configuration of route 'PlayerManagement/PlayerMain/:id/': redirectTo and component cannot be used together ; Zone: <root> ; Task: Promise.then ; Value: Error: Invalid configuration of route 'PlayerManagement/PlayerMain/:id/': redirectTo and component cannot be used together
at validateNode (router.js:757)
at validateConfig (router.js:729)
at validateNode (router.js:779)
at validateConfig (router.js:729)
at validateNode (router.js:779)
at validateConfig (router.js:729)
at Router.resetConfig (router.js:4958)
at new Router (router.js:4820)
at setupRouter (router.js:7305)
at _callFactory (core.js:11128) Error: Invalid configuration of route 'PlayerManagement/PlayerMain/:id/': redirectTo and component cannot be used together
at validateNode (webpack:///./node_modules/#angular/router/esm5/router.js?:757:15)
at validateConfig (webpack:///./node_modules/#angular/router/esm5/router.js?:729:9)
at validateNode (webpack:///./node_modules/#angular/router/esm5/router.js?:779:9)
at validateConfig (webpack:///./node_modules/#angular/router/esm5/router.js?:729:9)
at validateNode (webpack:///./node_modules/#angular/router/esm5/router.js?:779:9)
at validateConfig (webpack:///./node_modules/#angular/router/esm5/router.js?:729:9)
at Router.resetConfig (webpack:///./node_modules/#angular/router/esm5/router.js?:4958:9)
at new Router (webpack:///./node_modules/#angular/router/esm5/router.js?:4820:14)
at setupRouter (webpack:///./node_modules/#angular/router/esm5/router.js?:7305:35)
at _callFactory (webpack:///./node_modules/#angular/core/esm5/core.js?:11128:28)
Error: Uncaught (in promise): Error: Invalid configuration of route 'PlayerManagement/PlayerMain/:id/': redirectTo and component cannot be used together
at resolvePromise (zone.js:418)
at zone.js:454
at ZoneDelegate.invokeTask (zone.js:225)
at Zone.runTask (zone.js:125)
at drainMicroTaskQueue (zone.js:357)
at XMLHttpRequest.ZoneTask.invoke (zone.js:297)
VM3365:36 Uncaught TypeError: Converting circular structure to JSON
at JSON.stringify (<anonymous>)
at console.window.console.error (<anonymous>:36:101)
at consoleError (zone.js:346)
at _loop_1 (zone.js:371)
at drainMicroTaskQueue (zone.js:375)
at XMLHttpRequest.ZoneTask.invoke (zone.js:297)

How do I trace an `EmptyError: no elements in sequence` bug in an angular project

I'm working on an Angular project that's throwing an error: core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence but I can't seem to trace it to any of my app source code. The stack trace all points to rxjs classes.
Can anyone tell me how I can debug this error so that I can get to the real error in the code?
core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
EmptyError: no elements in sequence
at new EmptyError (EmptyError.js:28)
at FirstSubscriber._complete (first.js:154)
at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
at MergeMapSubscriber._complete (mergeMap.js:150)
at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
at MapSubscriber.Subscriber._complete (Subscriber.js:140)
at MapSubscriber.Subscriber.complete (Subscriber.js:122)
at ArrayObservable._subscribe (ArrayObservable.js:124)
at ArrayObservable.Observable._trySubscribe (Observable.js:172)
at ArrayObservable.Observable.subscribe (Observable.js:160)
at new EmptyError (EmptyError.js:28)
at FirstSubscriber._complete (first.js:154)
at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
at MergeMapSubscriber._complete (mergeMap.js:150)
at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
at MapSubscriber.Subscriber._complete (Subscriber.js:140)
at MapSubscriber.Subscriber.complete (Subscriber.js:122)
at ArrayObservable._subscribe (ArrayObservable.js:124)
at ArrayObservable.Observable._trySubscribe (Observable.js:172)
at ArrayObservable.Observable.subscribe (Observable.js:160)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4621)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>

This bug is due to the last version of Angular's Router.
You can reverse your version or append pathMatch: 'full' to all of your routes.
See github issue.
Example

How to get the stacktrace of an error when using rxjs?

I'm using angular-cli to build a small angular2 web app and I'm debugging with chrome dev-tools.
Clearly I'm doing something wrong if I need to guess each time where is the source of the error and what is the stack-trace of that error.
Take for example this error:
error_handler.js:45EXCEPTION: Cannot read property 'provider' of nullErrorHandler.handleError # error_handler.js:45
error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError # error_handler.js:50
error_handler.js:51TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (auth.effects.ts:80)
at MapSubscriber._next (map.js:77)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:72)
at DistinctUntilChangedSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at RefCountSubscriber.Subscriber._next (Subscriber.js:125)ErrorHandler.handleError # error_handler.js:51
zone.js:355Unhandled Promise rejection: Cannot read property 'provider' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'provider' of null(…) TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (http://localhost:4200/main.bundle.js:35342:83)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4171:35)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at DistinctUntilChangedSubscriber._next (http://localhost:4200/main.bundle.js:25485:30)
at DistinctUntilChangedSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at RefCountSubscriber.Subscriber._next (http://localhost:4200/main.bundle.js:431:26)consoleError # zone.js:355
zone.js:357Error: Uncaught (in promise): TypeError: Cannot read property 'provider' of null
at resolvePromise (http://localhost:4200/main.bundle.js:93214:31)
at http://localhost:4200/main.bundle.js:93191:13
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:92988:28)
at Zone.run (http://localhost:4200/main.bundle.js:92881:43)
at http://localhost:4200/main.bundle.js:93247:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:93021:37)
at Zone.runTask (http://localhost:4200/main.bundle.js:92921:47)
at drainMicroTaskQueue (http://localhost:4200/main.bundle.js:93153:35)consoleError # zone.js:357
The problem:
This errors means nothing to me. It's completely uselss and un readble.
I got lucky that I saw this line (sometimes I dont get any indication where the error is): at MapSubscriber.project (auth.effects.ts:80) - This line is the only line that usefull here to get some idea how to fix that bug.
Trying to understand the stack-trace will be pointless because its all rxjs stack-trace.
My question:
I would like to know my code's stack-trace. Is that possible?
where in my code the subscription to that observable happens.
If its an observable from ngrx, then where in my code someone dispanched that action that causes the error.
Its more general question about how to debug async code with rxjs then fixing this specific bug.

It happened in the projection method you provided to a map operator. The clue is at the top of your stack. MapSubscriber.project.
Basically you read stack traces from the top. The top most call is where the error was thrown (or rethrown).
In RxJS 5, there are usually two or three calls per operator. Each operator has a subscriber named after it that does the work. MapSubscriber.Subscriber.next MapSubscriber._next etc