{"id":3330,"date":"2022-07-21T12:43:23","date_gmt":"2022-07-21T15:43:23","guid":{"rendered":"https:\/\/danillolima.com\/en\/?p=3330"},"modified":"2022-07-21T12:43:23","modified_gmt":"2022-07-21T15:43:23","slug":"solving-router-outlet-is-not-a-known-element-and-others-problem-in-angular-with-vs-code","status":"publish","type":"post","link":"https:\/\/danillolima.com\/en\/javascript\/solving-router-outlet-is-not-a-known-element-and-others-problem-in-angular-with-vs-code\/","title":{"rendered":"Solving router-outlet is not a known element and others problem in Angular with VS Code"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hello folks, everyone fine? recently I migrated from a job that I was working mostly with PHP\/Wordpress to one with a stack focused in Java\/Angular.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I faced some problems was a beginner in this new environment, one that I wasted some time trying to solve is some errors when working with Angular versions less than 9.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">'router-outlet' is not a known element:&lt;br&gt;1. If 'router-outlet' is an Angular component, then verify that it is part of this module.&lt;br&gt;2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.ngtsc(-998001)&lt;br&gt;<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm\/yarn run ngcc'. Please see the extension output for more information.<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">Appears in the NgModule.imports of XXXModule, but itself has errors<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">If you have this errors <strong>just in VS Code<\/strong> but the ng serve and ng build works well, your problem can be caused by using a compilation\/rendering engine called <a href=\"https:\/\/angular.io\/guide\/ivy\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Ivy<\/a> from Angular 9 in VS Code. You can use the legacy View Engine going in Extensions (<kbd>Ctrl + Shift + X<\/kbd>) &gt; Manage &gt; Extension settings  or <kbd>Ctrl + ,<\/kbd> and type: <kbd>@ext:angular.ng-template<\/kbd>. Using the legacy view engine is very helpful when you&#8217;re maintaining old projects that you can&#8217;t upgrade the Angular version.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"417\" src=\"https:\/\/danillolima.com\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image.png\" alt=\"\" class=\"wp-image-3339\" title=\"\" srcset=\"https:\/\/danillolima.com\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image.png 1022w, https:\/\/danillolima.com\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-300x122.png 300w, https:\/\/danillolima.com\/en\/wp-content\/uploads\/sites\/2\/2021\/10\/image-768x313.png 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><figcaption>Configuration on VS Code<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Hello folks, everyone fine? recently I migrated from a job that I was working mostly with PHP\/Wordpress to one with a stack focused in Java\/Angular. I faced some problems was a beginner in this new environment, one that I wasted some time trying to solve is some errors when working with Angular versions less than [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[44,15],"tags":[],"class_list":["post-3330","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript"],"_links":{"self":[{"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/posts\/3330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/comments?post=3330"}],"version-history":[{"count":0,"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/posts\/3330\/revisions"}],"wp:attachment":[{"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/media?parent=3330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/categories?post=3330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/danillolima.com\/en\/wp-json\/wp\/v2\/tags?post=3330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}