In my Angular app I need to fetch different menus depending on the language selected (can't use i18n), and I'm currently using this code to do so: protected readonly menuItems = signal<LibHeaderMenuItem[]>([]); ngOnInit() { import(`./menus/menus.${this.applicationManager.lang}.ts`).then(m => { this.menuItems.set(m.default); }); } // NOTE: Greatly simplified for readability @for (item of menuItems(); track item.href) { <a [routerLink]="item.href">{{item.label}}</a> } Which works fine, with the problem that when rendered with SSR this will run both on the server and client, resulting in the menu flickering on initial load since Angular can't properly hydrate this data. If I only run the import code on the server, I get the data initially, but then it becomes completely empty once the JS is loaded on the client. The only way I can think of to solve this is to use JSON files and load them with HttpClient instead, but then I lose type safety in each menu file, and given the complexity of the data this would be quite risky. Is there any way to make Angular properly hydrate data that comes from dynamic imports, just like they do with data from http requests? EDIT: I tried using the old TransferState which seems to do the trick, but this feels a bit dirty, and something that would eventually get deprecated(?) since provideClientHydration is supposed to take care of this for you. Continue reading...
