{"id":2419,"date":"2022-12-20T13:12:22","date_gmt":"2022-12-20T12:12:22","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2419"},"modified":"2022-12-20T13:24:52","modified_gmt":"2022-12-20T12:24:52","slug":"fix-router-subscribe-ts2769-no-overload-matches-this-call","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/12\/20\/fix-router-subscribe-ts2769-no-overload-matches-this-call\/","title":{"rendered":"[ Fixes ] Router Subscribe &#8211; Error TS2769: No overload matches this call"},"content":{"rendered":"\n<p>&nbsp;would like to subscribe to NavigationEnd events in Angular 14, while using filter from rxjs.<\/p>\n\n\n\n<p>The part of&nbsp;<code>subscribe((event: NavigationEnd) ...<\/code>&nbsp;causes the following issue<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>TS2769: No overload matches this call. &nbsp;&nbsp;Overload 1 of 5, &#8216;(observer?: NextObserver | ErrorObserver | CompletionObserver | undefined): Subscription&#8217;, gave the following error. &nbsp;&nbsp;&nbsp;&nbsp;Argument of type &#8216;(event: NavigationEnd) =&gt; void&#8217; is not assignable to parameter of type &#8216;NextObserver | ErrorObserver | CompletionObserver | undefined&#8217;. &nbsp;&nbsp;<\/p><cite>&#8230;..<\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-3-1024x140.png\" alt=\"\" class=\"wp-image-2420\" width=\"818\" height=\"111\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-3-1024x140.png 1024w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-3-300x41.png 300w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-3-768x105.png 768w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/12\/image-3.png 1444w\" sizes=\"(max-width: 818px) 100vw, 818px\" \/><\/figure>\n\n\n\n<p>See constructor code below with mentioned code snippet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export class NavigationService implements OnDestroy {\n\n  constructor(private router: Router) {\n   this.router.events\n      .pipe(filter(event =&gt; event instanceof NavigationEnd))\n      .subscribe((event: NavigationEnd) =&gt; {\n         \/\/some logics here\n      });\n  }\n}<\/code><\/pre>\n\n\n\n<h4>Solutions:<\/h4>\n\n\n\n<p>The function passed to filter is not a type guard but you can indicate the type like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>constructor(private router: Router) {\n  this.router.events\n    .pipe(\n      filter((event): event is NavigationEnd =&gt; event instanceof NavigationEnd)\n    )\n    .subscribe(event =&gt; {\n       \/\/ \"event\" here is now of type \"NavigationEnd\"\n    });\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp;would like to subscribe to NavigationEnd events in Angular 14, while using filter from rxjs. The part of&nbsp;subscribe((event: NavigationEnd) &#8230;&nbsp;causes the following issue TS2769: No overload matches this call. &nbsp;&nbsp;Overload 1 of 5, &#8216;(observer?: NextObserver | ErrorObserver | CompletionObserver | undefined): Subscription&#8217;, gave the following error. &nbsp;&nbsp;&nbsp;&nbsp;Argument of type &#8216;(event: NavigationEnd) =&gt; void&#8217; is not [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2276,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[326,578,646,338,382],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2419"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2419"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2419\/revisions"}],"predecessor-version":[{"id":2422,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2419\/revisions\/2422"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2276"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}