Why isn't Transloco applying the `inline` prefix and overriding translations?
jon9090 opened this issue · comments
Is there an existing issue for this?
- I have searched the existing issues
Which Transloco package(s) are the source of the bug?
Transloco
Current behavior
I created an example using scope
. In the example code, there are two components (foo
and bar
), each with its own translations. The app component toggles between these two components. When a component loads, it should also load its respective translations using the inline
prefix (scope).
Each component has its own scope, but they written the same key. It seems that provideTranslocoScope
doesn't override the existing inline
translations. Why is this happening?
Here's the code:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import {
TranslocoDirective,
provideTransloco,
provideTranslocoScope,
} from '@jsverse/transloco';
import { of } from 'rxjs';
@Component({
selector: 'foo',
standalone: true,
imports: [TranslocoDirective],
template: `
im foo!!
<ng-container *transloco="let t; prefix: 'inline';">
<h1>{{ t('title') }}</h1>
</ng-container>
`,
providers: [
provideTranslocoScope({
scope: 'inline',
loader: {
en: () => Promise.resolve({ title: 'foo title in en' }),
fr: () => Promise.resolve({ title: 'foo title in fr' }),
},
}),
],
})
export class Foo {}
@Component({
selector: 'bar',
standalone: true,
imports: [TranslocoDirective],
template: `
im bar!!
<ng-container *transloco="let t; prefix: 'inline';">
<h1>{{ t('title') }}</h1>
</ng-container>
`,
providers: [
provideTranslocoScope({
scope: 'inline',
loader: {
en: () => Promise.resolve({ title: 'bar title in en' }),
fr: () => Promise.resolve({ title: 'bar title in fr' }),
},
}),
],
})
export class Bar {}
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, Foo, Bar],
template: `
im app!
<foo *ngIf="toggle"></foo>
<bar *ngIf="!toggle"></bar>
<button (click)="toggle=!toggle">switch</button>
`,
})
export class App {
name = 'Angular';
toggle = false;
}
bootstrapApplication(App, {
providers: [
provideTransloco({
config: {
availableLangs: ['en', 'fr'],
},
// loader: class implements TranslocoLoader {
// getTranslation(lang: string) {
// return of(langs[lang]);
// }
// },
}),
],
});
You can view and modify the code on StackBlitz: StackBlitz Example
@jon9090 Can you please share why would you name these two scopes with the same name?
The scope isn't overridden because Transloco has an internal cache, and by giving the same name to the scope, Transloco assumes that this is the same translation.
@jon9090 In case you missed my previous comment ☝️