{"id":898,"date":"2023-05-03T05:00:00","date_gmt":"2023-05-03T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=898"},"modified":"2023-05-02T14:47:40","modified_gmt":"2023-05-02T21:47:40","slug":"ng16-preview-helpers-to-convert-class-guards-to-functional","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/ng16-preview-helpers-to-convert-class-guards-to-functional\/","title":{"rendered":"NG16 Preview: Helpers to convert class guards to functional"},"content":{"rendered":"\n<p>As covered a few newsletters ago, <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/route-guards-canactivate-canactivatechild-candeactivate\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Route guards are meant to be functions<\/a> with Angular 15+. Angular 16 removes the support for class guards.<\/p>\n\n\n\n<p>Does that mean we have to migrate our old class guards manually? Of course not! The Angular team has our back, and the Angular CLI  will <a href=\"https:\/\/github.com\/angular\/angular\/pull\/49337\" target=\"_blank\" rel=\"noopener\" title=\"\">remove the deprecated interfaces automatically<\/a> when upgrading to Angular 16 as follows:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"645\" height=\"275\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-2.png\" alt=\"\" class=\"wp-image-899\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-2.png 645w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-2-300x128.png 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Then, if you want to keep your guards as classes, you can do so using a helper function called <code><a href=\"https:\/\/next.angular.io\/api\/router\/mapToCanActivate\" target=\"_blank\" rel=\"noopener\" title=\"\">mapToCanActivate<\/a><\/code>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"538\" height=\"113\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-3.png\" alt=\"\" class=\"wp-image-900\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-3.png 538w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-3-300x63.png 300w\" sizes=\"auto, (max-width: 538px) 100vw, 538px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Or you can, of course, decide to use a function instead:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/03\/image-31.png\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>As covered a few newsletters ago, Route guards are meant to be functions with Angular 15+. Angular 16 removes the support for class guards. Does that mean we have to migrate our old class guards manually? Of course not! The Angular team has our back, and the Angular CLI will remove the deprecated interfaces automatically [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-898","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=898"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/898\/revisions"}],"predecessor-version":[{"id":903,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/898\/revisions\/903"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}