{"id":1790,"date":"2023-11-17T05:00:00","date_gmt":"2023-11-17T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1790"},"modified":"2023-11-16T18:32:23","modified_gmt":"2023-11-17T02:32:23","slug":"angular-17-signals-server-side-rendering-and-standalone","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-17-signals-server-side-rendering-and-standalone\/","title":{"rendered":"Angular 17: Signals, Server-side rendering, and Standalone"},"content":{"rendered":"\n<p>We&#8217;re not done with Angular 17 updates! Here are a few more updates on Signals, <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/what-are-standalone-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Standalone<\/a>, and Server-side rendering.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Signals<\/h2>\n\n\n\n<p>Signals have graduated from developer preview and are now officially part of the framework, except the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/signals-effect\/\" target=\"_blank\" rel=\"noopener\" title=\"\"><code>effect<\/code> function<\/a> that is still being tweaked by the Angular team. A big step for Angular Signals.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Standalone<\/h2>\n\n\n\n<p>With Angular 17, a new Angular app is generated with standalone components by default. You can <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-update-your-angular-cli\/\" target=\"_blank\" rel=\"noopener\" title=\"\">upgrade your Angular CLI<\/a> to test that out, and if you don&#8217;t want to use standalone by default and your new apps, this feature can be turned off in angular.json with the following config:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\">   <span class=\"hljs-string\">\"projects\"<\/span>: {\n    <span class=\"hljs-string\">\"my-app\"<\/span>: {\n      <span class=\"hljs-string\">\"schematics\"<\/span>: {\n        <span class=\"hljs-string\">\"@schematics\/angular:component\"<\/span>: {\n          <span class=\"hljs-string\">\"standalone\"<\/span>: <span class=\"hljs-literal\">false<\/span>\n        }\n     <\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">Server-side rendering<\/h2>\n\n\n\n<p>With Angular 17, you can create an app that uses <a href=\"https:\/\/angular.dev\/guide\/ssr#enable-server-side-rendering\" target=\"_blank\" rel=\"noopener\" title=\"\">server-side rendering<\/a> with a single command:<\/p>\n\n\n\n<p><code> ng new --ssr<\/code><\/p>\n\n\n\n<p>If you want to add server-side rendering to an existing app, you can run: <\/p>\n\n\n\n<p><code>ng add @angular\/ssr<\/code><\/p>\n\n\n\n<p>It&#8217;s also possible to pre-render an Angular app using:<\/p>\n\n\n\n<p><code>ng build --prerender<\/code><\/p>\n\n\n\n<p>That way, you don&#8217;t need Node.js hosting and can use static, pre-rendered HTML files. I&#8217;ll explore this more in the newsletter before the end of the year.<\/p>\n\n\n\n<p>On that same topic of server-side rendering, hydration graduated developer preview, which means an app rendered on the server side won&#8217;t rebuild its entire DOM in the browser. Instead, Angular will take over that DOM and re-hydrate it with up-to-date data as needed.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re not done with Angular 17 updates! Here are a few more updates on Signals, Standalone, and Server-side rendering. Signals Signals have graduated from developer preview and are now officially part of the framework, except the effect function that is still being tweaked by the Angular team. A big step for Angular Signals. Standalone With [&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,39,29,23],"tags":[],"class_list":["post-1790","post","type-post","status-publish","format-standard","hentry","category-angular","category-server-side-rendering","category-signals","category-standalone"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1790","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=1790"}],"version-history":[{"count":10,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1790\/revisions"}],"predecessor-version":[{"id":1800,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1790\/revisions\/1800"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1790"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1790"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}