{"id":2237,"date":"2024-12-04T13:31:23","date_gmt":"2024-12-04T21:31:23","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2237"},"modified":"2024-12-04T13:31:23","modified_gmt":"2024-12-04T21:31:23","slug":"angular-19-standalone-updates","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-19-standalone-updates\/","title":{"rendered":"Angular 19: Standalone updates"},"content":{"rendered":"\n<p>Angular 19 is a massive release with lots of improvements and new features. I covered all <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-with-signals-in-angular-19\/\" target=\"_blank\" rel=\"noopener\" title=\"\">signal-related updates<\/a> earlier. Today, let&#8217;s focus on what&#8217;s changed with <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/what-are-standalone-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">standalone features<\/a> in the framework.<\/p>\n\n\n\n<p>First, <strong>standalone is the new default<\/strong>! In Angular 19, you don&#8217;t need the <code>standalone: true<\/code> option in your decorators, that&#8217;s the default value now. Instead, you want to use <code>standalone: false<\/code> for features that are not standalone and belong to a <code>ngModule<\/code>.<\/p>\n\n\n\n<p>When you upgrade to Angular 19, <code>ng update<\/code> will automatically remove <code>standalone : true<\/code> where you use it and use <code>standalone: false<\/code> where needed. No need to worry about it!<\/p>\n\n\n\n<p>Second, the Angular compiler will <strong>warn you when you have unused imports in your standalone components<\/strong>. This is great to help keep your code clean:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTTP\" data-shcb-language-slug=\"http\"><span><code class=\"hljs language-http\"><span class=\"hljs-attribute\">TS-998113<\/span>: Imports array contains unused imports &#91;plugin angular-compiler]\n\nsrc\/app\/user\/users.component.ts:9:27:\n9 \u2502 imports: &#91;UserComponent, UnusedComponent],<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTTP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">http<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Finally, <strong>if you want to make sure all your components are standalone<\/strong>, you can use the new <code>\"strictStandalone\": true<\/code> option in the <code>angularCompilerOptions<\/code>.<\/p>\n\n\n\n<p>Then, if your create a non-standalone feature, you\u2019ll get an error:<br><code>TS-992023: Only standalone components\/directives are allowed when 'strictStandalone' is enabled.<\/code><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular 19 is a massive release with lots of improvements and new features. I covered all signal-related updates earlier. Today, let&#8217;s focus on what&#8217;s changed with standalone features in the framework. First, standalone is the new default! In Angular 19, you don&#8217;t need the standalone: true option in your decorators, that&#8217;s the default value now. [&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],"tags":[],"class_list":["post-2237","post","type-post","status-publish","format-standard","hentry","category-angular"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2237","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=2237"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2237\/revisions"}],"predecessor-version":[{"id":2239,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2237\/revisions\/2239"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}