Can't bind to 'translocoPrefix' since it isn't a known property of 'ng-container' (used in the '_FooComponent' component template).
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
Is this a regression?
Yes
Current behavior
Got error in the console:
Can't bind to 'translocoPrefix' since it isn't a known property of 'ng-container' (used in the '_FooComponent' component template).
the code:
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { TranslocoLoader, provideTranslocoScope } from '@ngneat/transloco';
import { provideTransloco } from '@ngneat/transloco';
import { of } from 'rxjs';
@Component({
standalone: true,
selector: 'foo',
template: `
in foo!!
<ng-container *transloco="let t; prefix: 'adminPage'">
<p data-cy="prefix" class="admin-prefix">{{ t('title') }}</p>
</ng-container>
`,
providers: [provideTranslocoScope('admin-page')],
})
export class FooComponent {}
@Component({
selector: 'app-root',
standalone: true,
imports: [FooComponent],
template: `
<h1>Hello from {{ name }}!</h1>
<a target="_blank" href="https://angular.dev/overview">
Learn more about Angular
</a>
<foo></foo>
`,
})
export class App {
name = 'Angular';
}
const langs = {
en: { title: 'title-en' },
fr: { title: 'title-fr' },
};
bootstrapApplication(App, {
providers: [
provideTransloco({
config: {
availableLangs: ['en', 'fr'],
},
loader: class implements TranslocoLoader {
getTranslation(lang: string) {
return of(langs[lang]);
}
},
}),
],
});
Expected behavior
Using the prefix
Please provide a link to a minimal reproduction of the bug, if you won't provide a link the issue won't be handled.
https://stackblitz.com/edit/stackblitz-starters-1ear2c
Transloco Config
No response
Please provide the environment you discovered this bug in
No response
Browser
No response
Additional context
No response
I would like to make a pull request for this bug
No
@jon9090 I've noticed you are importing Transloco from the deprecated ngneat
scope. make sure you update to @jsverse/transloco@7.10
or above, it was introduced in v7.1.0.
@jon9090 Closing this for now, feel free to reopen if this wasn't the issue 👍
Having the same issue, even with the new scope import { provideTranslocoScope } from '@jsverse/transloco';
for a standalone component.
<ng-container *transloco="let t; prefix: 'teams.page'">
<h2>{{ t('title') }}</h2>
<h3>{{ t('description') }}</h3>
</ng-container>
Somehow it cant load the prefix into the ng-container.
teams-page.component.html:3 NG0303: Can't bind to 'translocoPrefix' since it isn't a known property of 'ng-container' (used in the '_TeamsPageComponent' component template).
I have forked the original author stackblitz and provided the same example with the updated libraries:
Transloco prefix not working at ng-container
And at the console it is the same error as this post.
EDIT: The fix isn't mentioned at the docs but if it is a standalone component, you need to import TranslocoDirective
at the component imports array.