Native i18n support + localized content

[michaelkrog]

Which scope/s are relevant/related to the feature request?

platform

Information

I really miss i18n support for analogjs. I tried adding the localize package with ng add @angular/localize on a fresh analog project, but I am unable to extract translations afterwards. Event if it could, I am unsure if it would be able to work at all, as the documentation for analog doesn't mention i18n.

Coming from using Docusarus for https://previsto.com with a great wish to shift to a more "all-batteries-included" platform like Angular, I do wish the following were a part of Analog:

• Support for Angular native i18n
• Support for content folder in each of the support languages, with a fallback to a main language. (If this markdown is not in xx language then fallback to markdown in main language)

Describe any alternatives/workarounds you're currently using

I am currently using docusarus, but I am not satisfied will all the hacks needed to create a decent looking site. And since most of the other parts of the codebase are Angular-based, I would prefer to move https://previsto.com to a static website built with angular.

I have been fiddling with a pure Angular solution together with ngx-markdown and Angular pre-render functionality, but it would require a great amount of work to get routing working as nicely as with analog. On the other hand, i18n works out of the box when using angular by it self.

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

@michaelkrog very nice website, and it would be great to natively support Angular i18n also, but there's a good bit of effort required to do that. Angular i18n is tied to Angular's default builders, so it won't work out of the box the same way. We'd essentially have to copy and modify those builders to work within Analog.

A better option until then would be to use Translooco which is well-supported and fully compatible with Analog and Angular.

If a company would consider sponsoring this work, that would be an option also.

[michaelkrog]

I can supply with some details about what I ended up doing, as I actually did rebuild https://previsto.com to be a pre-rendered Angular site utilizing both ng's native i18n and localized markdown files.

One first approach was to use ng's native i18n for markdown also, but that fails because indention gets messed up. And indention is important for markdown.

So I ended up with something not perfect at all, but suitable for my case:

1. Created a component that can take markdown and render it
2. Created routes for each markdown page that async resolves the markdown in the route.

Example of route for our changelog page da, nb, sv, de:

{
                path: 'changelog',
                component: ChangelogComponent,
                data: {
                    [SeoData.Title]: $localize`:@@Changelog.SeoTitle:Changelog`,
                    [SeoData.Description]: $localize`:@@Changelog.SeoDescription:New updates and improvements to Previsto.`
                },
                resolve: {
                    'entries': () => {
                        const locale = inject(LOCALE_ID);
                        switch(locale) {
                            case 'da':
                                return import('./pages/changelog/entries/da').then(entries => entries.default);
                            case 'de':
                                return import('./pages/changelog/entries/de').then(entries => entries.default);
                            case 'nb':
                                return import('./pages/changelog/entries/nb').then(entries => entries.default);
                            case 'sv':
                                return import('./pages/changelog/entries/sv').then(entries => entries.default);
                            default:
                                return import('./pages/changelog/entries/en').then(entries => entries.default);
                        }
        
                    }
                }
            }

It works surprisingly well with pre-rendering.