{"id":2384,"date":"2025-12-17T05:53:09","date_gmt":"2025-12-17T13:53:09","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2384"},"modified":"2025-12-17T05:53:11","modified_gmt":"2025-12-17T13:53:11","slug":"angular-file-naming-conventions-and-how-to-fix-them","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-file-naming-conventions-and-how-to-fix-them\/","title":{"rendered":"Angular file naming conventions (and how to fix them)"},"content":{"rendered":"\n<p>In a recent and surprising move, the Angular team decided to remove the file suffixes it had been using since Angular 2, such as: <code>dashboard.component.ts<\/code> or <code>user.service.ts<\/code>.<\/p>\n\n\n\n<p>The rationale is that IDEs have become good enough to find what we need, no matter the file name. And that the new convention is closer to React and other TS-based frameworks\/libraries. While that is true, clarity, conventions, and naming rules are what make Angular the technology of choice for many of us.<\/p>\n\n\n\n<p>At every single event I attend and every single Q&amp;A I participate in, the question always comes up: <em>Why did the Angular team do that? Nobody asked for it!<\/em> <em>We hate it!<\/em><\/p>\n\n\n\n<p>As a result, today, I&#8217;ll show you how to break the new rules. First, if you want to keep the legacy behavior with individual CLI commands, you can do: <code>ng generate component Dashboard --type=component<\/code><\/p>\n\n\n\n<p>This will restore the &#8220;suffix&#8221; we grew accustomed to. If we want to make that change more permanent, we can edit <code>angular.json<\/code> and add the following schematics 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\">\"schematics\"<\/span>: {\n  <span class=\"hljs-string\">\"@schematics\/angular:component\"<\/span>: {\n    <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"component\"<\/span>\n  },\n  <span class=\"hljs-string\">\"@schematics\/angular:service\"<\/span>: {\n    <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"service\"<\/span>\n  },\n  <span class=\"hljs-string\">\"@schematics\/angular:directive\"<\/span>: {\n    <span class=\"hljs-string\">\"type\"<\/span>: <span class=\"hljs-string\">\"directive\"<\/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<p>Note that the above doesn&#8217;t list pipes, because pipes escaped the new renaming rules, to some extent: Instead of the old <code>custom.pipe.ts<\/code>, the new convention is <code>custom-pipe.ts<\/code>. I can live with that one, and the CLI doesn&#8217;t really allow overriding that behavior anyway.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a recent and surprising move, the Angular team decided to remove the file suffixes it had been using since Angular 2, such as: dashboard.component.ts or user.service.ts. The rationale is that IDEs have become good enough to find what we need, no matter the file name. And that the new convention is closer to React [&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,31,30],"tags":[],"class_list":["post-2384","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-cli"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2384","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=2384"}],"version-history":[{"count":1,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2384\/revisions"}],"predecessor-version":[{"id":2385,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2384\/revisions\/2385"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}