Angular 18 Internationalization (i18n) per pages/component without third-part library [closed]

I have added internationalization (i18n) to my project through this https://angular-book.dev/ch11-00-i18n.html article However, the example here shows that only one language file (en.json, az.json, or ru.json) is used for the entire project. This approach increases the size of the language file and is not ideal in terms of performance in my opinion. I would like to create separate language files for each page or component and load only the content specific to that page. For example:

• When entering the Login page, load only the appropriate localize/login/en.json, az.json or ru.json files.
• Create separate files for the Sidebar and Header components available on all pages, and load the Sidebar and Header files along with the language files of that page when switching to each page.

So when you go to the Home page, only localize/home/en.json, az.json, ru.json files and localize/header/en.json, az.json (also sidebar) download the files. I want to apply the same approach to other pages.

What is the optimal way to implement this approach with Angular 18 and without any third-party libraries?

Continue reading...