Bug: Scope names cannot contain some basic characters?

[mikoet]

Current behavior

In an Angular component I want to make use of lazy loaded translations.

This works (scope name: "dftpa"):
<h2 mat-dialog-title *transloco="let t; scope: 'dftpa'">{{ t('dftpa.title') }}</h2>

Those do not work (scope names: "d:ftpa", "d_ftpa", "d!ftpa"):
<h2 mat-dialog-title *transloco="let t; scope: 'd:ftpa'">{{ t('d:ftpa.title') }}</h2>
<h2 mat-dialog-title *transloco="let t; scope: 'd_ftpa'">{{ t('d_ftpa.title') }}</h2>
<h2 mat-dialog-title *transloco="let t; scope: 'd!ftpa'">{{ t('d!ftpa.title') }}</h2>

In the network tab of my browser inspectation I can see that Transloco does indeed load the lazy translation files, but for scopes that contain either ":", "_" or "!" it does not do the actual translations.

Expected behavior

I would have excepted the latter three snippets to work just like the first one.

Minimal reproduction of the problem with instructions

You just need to add ":", "_" or "!" into the scope name of a lazy loaded translation bundle.

Environment

- Transloco version: 2.20.1
- Angular version: 10.2.4 (updating to 11.x did not work last time, I'd have to investigage more)

For Tooling issues:

- Node version: v16.1.0
- Platform:  Mac

Browser:

• Chrome (desktop) version 91.0.4472.77
• Safari (desktop) version 14.0.3

[itayod]

@mikoet please take a look at this section in the docs, that might solve your problem

[Remls]

Above link is broken, but I believe it has now been moved here.

[shaharkazaz]

@mikoet Does the alias resolves your issue?