Can't bind to 'translocoPrefix' since it isn't a known property of 'ng-container' (used in the '_FooComponent' component template).

[Jon]

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

[Shahar Kazaz]

@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.

[Shahar Kazaz]

@jon9090 Closing this for now, feel free to reopen if this wasn't the issue 👍

[Manuel Bojato]

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.