jsverse / transloco Goto Github PK

I'm submitting a...

[x] Bug report  

Current behavior

Even though the port used by ng serve was changed (via --port or angular.json), the library is still preserving the default one (4200) in the path to the translation files.

Expected behavior

Updating the port in the path to the translation files.

Minimal reproduction of the problem with instructions

Serve the example app via:
ng serve --port 4204

What is the motivation / use case for changing the behavior?

It is quite incovenient and could possibly cause some issues with ng-universal as it serves the app via 4000.

Environment

Angular version: 8.2.4

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I am not sure if it's a bug or I am missing something, but I can't get it working, even I have read the readme multiple times - getTranslation() in loader is never called. Loader's constructor is initialized.

I've tried in multiple ways:

1. If *transloco="let t" is used, Angular just ignores the ng-container and it is not rendered at all, without any error messages.
2. Injcting TranslocoService into component works, but translate(key) returns an empty string.

Here is an injected translation service:

Expected behavior

It should work :)

Minimal reproduction of the problem with instructions

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem, for that you could use our stackblitz example

What is the motivation / use case for changing the behavior?

Environment

Angular version: 8.2.4


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v12.4.0
- Platform:  Windows 

Others:

See https://stackblitz.com/edit/angular-rvacre?file=src%2Fapp%2Fapp.component.ts

Given this translation object

{
  foo: {
    bar: 'baz'
  }
}

and doing:

this._t.selectTranslate('foo').subscribe(console.log);

It:

1. assumes return type will be string, which in this case it is not
2. crashes with Uncaught TypeError: message is not a function when using MessageFormatTranspiler

It would be great if selectTranslate could accept generic type with the default of string | Translation, would be useful for typed translations.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Could not find a way to add context to a translation

Expected behavior

Each translation must have the option to add context

What is the motivation / use case for changing the behavior?

There are different meanings for words on different places and context gives the translators a clue on the meaning.

Hi if i try to add transloco i get this error:
An unhandled exception occurred: Collection "@ngneat/transloco" cannot be resolved.

Error-Log

[error] Error: Collection "@ngneat/transloco" cannot be resolved.
    at NodeModulesEngineHost._resolveCollectionPath (C:\Users\burak\ng-transloco\node_modules\@angular-devkit\schematics\tools\node-module-engine-host.js:91:15)
    at NodeModulesEngineHost.createCollectionDescription (C:\Users\burak\ng-transloco\node_modules\@angular-devkit\schematics\tools\file-system-engine-host-base.js:115:27)
    at SchematicEngine._createCollectionDescription (C:\Users\burak\ng-transloco\node_modules\@angular-devkit\schematics\src\engine\engine.js:147:40)
    at SchematicEngine.createCollection (C:\Users\burak\ng-transloco\node_modules\@angular-devkit\schematics\src\engine\engine.js:140:43)
    at AddCommand.getCollection (C:\Users\burak\ng-transloco\node_modules\@angular\cli\models\schematic-command.js:128:35)
    at AddCommand.runSchematic (C:\Users\burak\ng-transloco\node_modules\@angular\cli\models\schematic-command.js:291:50)
    at AddCommand.executeSchematic (C:\Users\burak\ng-transloco\node_modules\@angular\cli\commands\add-impl.js:148:31)
    at AddCommand.run (C:\Users\burak\ng-transloco\node_modules\@angular\cli\commands\add-impl.js:114:21)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Environment:
Angular CLI: 8.2.2
Node: 10.16.3
OS: win32 x64

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When I build my solution, I get these errors:

ERROR in error TS2307: Cannot find module 'messageformat'
ERROR in node_modules/@ngneat/transloco/lib/transpiler-strategies/messageformat.transpiler.d.ts(3,27): error TS2307: Cannot find module 'messageformat'

How to solve :)

On messageformat.transpiler.ts

Change the MessageFormat import from this:

import MessageFormat from 'messageformat';

to this:

import * as MessageFormat from 'messageformat';

I tried to create a pull request, but couldn't figure out how, sorry!

Thanks!
This package is awesome 👍

I'm submitting a Bug Report

[ ] Regression (a behavior that used to work and stopped working in a new release)
**[ X ] Bug report**  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

when initiating

ng add @ngneat/transloco

and answering the 1st 3 prompts using the defaults. The install fails, generating the following error

Specified module path projects/communal/src/app/app does not exist

our repository has multiple projects in it and I am attempting to add this to a common "communal" library that will be shared with the multiple projects

If I attempt to put in a path the same error is generated

Expected behavior

Provide a more descriptive error so a person getting the error knows how to correct their mistake.

Minimal reproduction of the problem with instructions

ng add @ngneat/transloco

and answering the 1st 3 prompts using the defaults.

Environment

Angular CLI: 8.1.2
Node: 10.9.0
OS: win32 x64
Angular: 8.1.2

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Universal build errors out - I got the same error with HTTP loader and Webpack loader. I couldn't find docs around which to choose or why.

Expected behavior

Universal build succeeds

Minimal reproduction of the problem with instructions

Run ng new and implement ng-universal using the schematic:

ng add @nguniversal/express-engine --clientProject <PROJECT-NAME>

Initially it complained about no fallback language. I remedied that, tried again and got this error:

ERROR Error: Unable to load translation and all the fallback languages
    at TranslocoService.handleFailure (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:232909:19)
    at CatchSubscriber.selector (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:232604:40)
    at CatchSubscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:34170:31)
    at RetrySubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28210:26)
    at RetrySubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28190:18)
    at RetrySubscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:36995:47)
    at MapSubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28210:26)
    at MapSubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28190:18)
    at FilterSubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28210:26)
    at FilterSubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/my-project/dist/webpack/server.js:28190:18)

What is the motivation / use case for changing the behavior?

For Universal to work

Environment

Angular CLI: 7.3.9
Angular: 7.2.15


Browser:
- [x ] Chrome (desktop) version 76
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:

Node: 8.15.1
OS: darwin x64

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

getBrowserLang() and getBrowserCultureLang() returns only the first language in the list.

Expected behavior

There should be methods which returns the complete lists of configured languages.

What is the motivation / use case for changing the behavior?

The user's native language is German, but he also knows Spanish.
The user has multiple configured languages in browser in order [German, Spanish].
The app supports English and Spanish languages.

Because there is no German translation, English is selected as fallback instead of Spanish, even if the user knows Spanish.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[X ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Can we get documentation on how to translate an attribute?

Example from angular docs:

<img [src]="logo" i18n-title title="Angular logo" />


I didn't want to spam the other issue, but it's a continuation of this.

https://stackblitz.com/edit/angular-tuqsp2?file=src/translations/translations.module.ts

What I'm trying to do:

• to have TranslationModule, to be imported in root module (AppModule), this module should
  a. do transloco provider configuration
  b. use translocoService.setTranslation() to set common translations, under common scope, doing:

  this._translocoService.setTranslation({
    common: {
      common: 'This is common'
    }
  }, 'en', { merge: true });

       c. export TranslocoModule for transloco components used inside AppComponent template

• to have TranslationModule, to be imported inside the lazy loaded <Feature>Module, this should
  a. use translocoService.setTranslation() to merge <feature> translation object, doing

  this._translocoService.setTranslation({
    <feature>: {
      lazy: 'This is lazy loaded'
    }
  }, 'en', { merge: true });

       c. export TranslocoModule for transloco components used inside Component template

Now first this that happens is that I do not want to use http to load translation files at all, but if I dont't provide TRANSLOCO_LOADER, I get

NullInjectorError: No provider for InjectionToken TRANSLOCO_LOADER!

so to satisfy it, I use

@Injectable({ providedIn: 'root' })
export class TempTranslationLoader implements TranslocoLoader {
  getTranslation(langPath: string) {
    return of({});
  }
}

what happens is this

🍻 Translation Load Success: en
Missing translation for 'common.ok' 🤔🕵🏻‍♀
Missing translation for 'foo' 🤔🕵🏻‍♀
Missing translation for 'common.confirm' 🤔🕵🏻‍♀
Missing translation for 'foo' 🤔🕵🏻‍♀

so the common translations (neither nested, nor in root) do not work, but the lazy loaded does

I tried putting the setTranslation on various places, didn't work, neither did using setTimeouts..

@NetanelBasal @shaharkazaz

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[X ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

What is the motivation / use case for changing the behavior?

I've ported a library (from ngx-translate) to transloco, its my own library for loading mutliple translations via http. Would love to see it in the transloco documentation 😃

Library: https://github.com/larscom/transloco-module-loader

Working demo: https://stackblitz.com/edit/transloco-module-loader

Hello,

Would be really great if you can add features comparison table like what the angular-l10n has, that will ease developers to make decision which library is best to use depending on their situations.

ref. https://github.com/robisim74/angular-l10n

Thanks.

Given this translation file

{
  dashboard: {
    projectsTitle: 'Projects',
    projectsDesc: 'Lorem ipsum.'
  }
}

when you do this:

<ng-container *transloco="let t">

</ng-container>

..using shared strategy you get the whole object.

So you have to do {{ t.dashboard.projectsTitle }} and {{ t.dashboard.projectsDesc }} etc., it would be nice if you could do something like this

<ng-container *transloco="let t; read: 'dashboard'">
  <h1>{{ t.projectsTitle }}</h1>
  <p>{{ t.projectsDesc }}</p>
</ng-container>

..if it were only "dashboard" it wouldn't be that bad, but in my case it's @zerops/zerops/pages/dashboard (unique id of the lazy loaded module, used for various other things, ngrx state etc.), so

<ng-container *transloco="let t; read: featureKey;">
  <h1>{{ t.projectsTitle }}</h1>
  <p>{{ t.projectsDesc }}</p>
</ng-container>

would be much nicer than

<ng-container *transloco="let t; read: featureKey;">
  <h1>{{ t[featureKey].projectsTitle }}</h1>
  <p>{{ t[featureKey].projectsDesc }}</p>
</ng-container>

The drawback that I find this library is that the translations are based on a key-value translation object in which to identify the key that you want to translate you must specify a string. The fact of using a string causes us to lose all the type control of the variables that we want to translate.

What are the problems that arise from this?

1. We can not know if a key is lost, incomplete or has typo.

2. We do not have autocomplete, despite having nested objects that can be complex.

3. You can not change the name of a key automatically (refactoring) between all the languages, we must modify each file of languages one by one.

Is there any way to solve this?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[x ] Other... Please describe:
The `.all-contributorsrc` file is pointing to `NetanelBasal` as project owner.

Current behavior

As the .all-contributorsrc Project Owner is pointing to NetanelBasal, the URL generated for the links for contributors point to github.com/NetanelBasel/transloco.

Expected behavior

Generated URLs should point to github.com/ngneat/transloco.

What is the motivation / use case for changing the behavior?

All links for current contributors contributions point to a 404 page.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If a translations is missing (or empty) using structural directive does not show anything at all, while using the pipe, the attribute directive or the programmatical translation returns the key of the requested translation and shows the missing translation error in the console.

Expected behavior

All possibilities of translation should behave the same way. If a translation for a key is missing, then the structural directive should also display the key as text, as well as show the error message in the console.

In my opinion it would even be more useful to use translations from fallback languages of the key if no translation is provided and only use the key if every fallback language also lacks the translation for the key. This could be optional configurable in order to not have braking changes in case some people rely on certain translations missing.

Minimal reproduction of the problem with instructions

Using the following template from the example but provide a translation where key home is not defined or empty

<ng-container *transloco="let t">
  <li>{{ t.home }}</li>
</ng-container>

<ng-template transloco let-t>
  {{ t.home }}
</ng-template>

What is the motivation / use case for changing the behavior?

The error message in the console is very useful during development for finding missing translations. I find it very irritating for a user to see a key if a translation is missing and think it would be more useful if he would then just get a translation from a fallback language.

Environment

Angular CLI: 8.3.1
Node: 10.16.0
OS: linux x64
Angular: 8.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.1
@angular-devkit/build-angular     0.803.1
@angular-devkit/build-optimizer   0.803.1
@angular-devkit/build-webpack     0.803.1
@angular-devkit/core              8.3.1
@angular-devkit/schematics        8.3.1
@angular/cdk                      8.1.4
@angular/cli                      8.3.1
@angular/fire                     5.2.1
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.1.4
@angular/pwa                      0.803.1
@ngtools/webpack                  8.3.1
@schematics/angular               8.3.1
@schematics/update                0.803.1
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.39.2

See console of

https://stackblitz.com/edit/angular-aa3pmd?file=src/app/app.component.ts

@NetanelBasal

...btw I have a feeling that Translation[] is a valid return type as well selectTranslate<T = string | Translation | string[]>

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

With scopeStrategy set to shared, you can load a root translation file such as this:

{
    "rootpageheader": "welcome",
    "subcomponent": {
        "header": "child",
    }
}

In a separate component, setting the scope to subcomponent like this:

        {
            provide: TRANSLOCO_SCOPE,
            useValue: "subcomponent",
        },

Will bypass checking the existing translation, and will instead fire a call to the TranslocoLoader. With the default httploader from the docs, this fires an unnecessary xhr call.

Expected behavior

Existing translation scopes should be checked before loading more

What is the motivation / use case for changing the behavior?

Scoped translations are useful. However, when using the key-as-value pattern AND scoped translations, you can no longer have attribute translations like this:

<div transloco="Username to display:"></div>

the only option is to use TRANSLOCO_SCOPE, which forces an (unnecessary) load

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

No way to change LOCALE_ID based on language selected in transloco so that pipes such a Date etc update.

Expected behavior

Have some pipes like found in https://github.com/robisim74/angular-l10n

Minimal reproduction of the problem with instructions

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem, for that you could use our stackblitz example

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Expected behavior

Like this plugin https://github.com/Greentube/localize-router

What is the motivation / use case for changing the behavior?

The best i18n library for Angular 😍

https://messageformat.github.io/messageformat/

https://github.com/lephyrus/ngx-translate-messageformat-compiler

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I can't seem to import TranslocoPreloadLangsModule.

Expected behavior

Be able to import and use TranslocoPreloadLangsModule

Minimal reproduction of the problem with instructions

1. Install @ngneat/transloco-preload-langs
2. Can't seem to import and use TranslocoPreloadLangsModule

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem, for that you could use our stackblitz example

Environment

Angular version: 8.2.4

Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 12.6
- Platform:  MacOSX

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Hi,

I'm using the Nx monorepo style and when running the install schematic, the assets path is not taking my sourceRoot from angular.json file.

It results in creating the i18n directory in the wrong place : src/assets/i18n instead of apps/my-app/src/assets/i18n in my case.

Expected behavior

Following the sourceRoot when creating the translations directory.

What is the motivation / use case for changing the behavior?

Improve support of monorepo.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If we passing 0 as dynamic value parameter it is will not be showed

Expected behavior

Showing 0 as param value

Minimal reproduction of the problem with instructions

//translation file

"cart": {
    "count": "Cart items: {{value}}"
  }

template
{{t.cart.count | translocoParams: { value: cartItems} }}

What is the motivation / use case for changing the behavior?

Environment

Angular version: 8


Browser:
- [x] Chrome (desktop) version 76
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I've followed the instructions on setting up Transloco Persist Translations in my AppModule like:

        TranslocoModule,
        TranslocoPersistLangModule.init({
            storage: {
                provide: TRANSLOCO_PERSIST_LANG_STORAGE,
                useValue: cookiesStorage()
            },
            storageKey: 'locale'
        }),
        TranslocoPersistTranslationsModule.init({
            loader: HttpLoader,
            storage: {
              provide: PERSIST_TRANSLATIONS_STORAGE,
              useValue: localStorage
            },
            ttl: 86400,
            storageKey: 'translations'
          })

And it compiles / runs.

Nothing is persisted.

I added breakpoints in the Firefox dev tools but it's not hitting them.

Can you not use Transloco Persist Lang and Transloco Persist Translations at the same time maybe?

Expected behavior

It to persist to local storage

Minimal reproduction of the problem with instructions

See current behaviour

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 69
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.16.3
- Platform:  Mac
- Angular: 8.0.3
- Transloco: 1.7.2
- Transloco Persist Lang: 1.0.1
- Transloco Persist Translations: 1.0.0

Others:

This proposal tries to simplify the translation process. The issues we face today are:

• The developer has to come up with the properties names.
• Redundant nested object, which blows the bundle, thus takes more memory.
• Duplicate keys and texts.
• Merge conflicts.

The idea is to treat each string as a ״raw string״. Word concatenation isn't valid anyway in most cases because the translators need to know the context.

We expose a hash function through the context object that by default, returns the given string.

<ng-template transloco let-t>
  {{ t.hash('Hello world') }}

  <span>{{ t.hash('Login') }}</span>
</ng-template>

Now, let's run it through hashing function:

hash('Hello world') // The value will always be: 261689226
hash('Login') // 180154982

Based on these values, we can automatically generate a clean translation file in build time:

// en.json
{
  "261689226": "Hello world",
  "180154982": "Login"
}

And change each usage to the corresponding hash:

<ng-template transloco let-t>
  {{ t['261689226'] }}

  <span>{{ t['180154982'] }}</span>
</ng-template>

Disadvantages

• ?
• ?

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Hi, when I run the installation schematic ng-add on my existing project I get an un-relevant error :

Cannot read property 'forEach' of undefined

By doing some research I've found that default imports in my app.module.ts are causing this issue. When I remove these default imports the schematics works well.

Expected behavior

Supports of default imports for ng-add schematic.

Minimal reproduction of the problem with instructions

Just add a default import in the app.module.ts like :

import something from './my-module';
import { NgModule } from '@angular/core';

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

If you include lazy-loaded translation files in your project, the Universal build fails with the error:

ERROR Error: Unable to load translation and all the fallback languages, did you misspelled the scope name?
    at TranslocoService.handleFailure (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:233518:19)
    at CatchSubscriber.selector (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:233098:40)
    at CatchSubscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:34170:31)
    at RetrySubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28210:26)
    at RetrySubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28190:18)
    at RetrySubscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:36995:47)
    at MapSubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28210:26)
    at MapSubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28190:18)
    at FilterSubscriber.Subscriber._error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28210:26)
    at FilterSubscriber.Subscriber.error (/Users/jamieperkins/Web-projects/Cloud_servers/myProject/dist/webpack/server.js:28190:18)

Expected behavior

It should not fail.

Minimal reproduction of the problem with instructions

Run ng new, and make a lazy-loaded route.

Implement ng-universal using the schematic:

ng add @nguniversal/express-engine --clientProject <PROJECT-NAME>

Then follow this repo's instructions for lazy-loading a translation file.

Finally, run the universal build.

What is the motivation / use case for changing the behavior?

Should be able to lazy-load translations for universal

Environment

Angular CLI: 7.3.9
Angular: 7.2.15

Browser:

• Chrome (desktop) version 76
• Chrome (Android) version XX
• Chrome (iOS) version XX
• Firefox version XX
• Safari (desktop) version XX
• Safari (iOS) version XX
• IE version XX
• Edge version XX

For Tooling issues:
Node: 8.15.1
OS: darwin x64

Others:

I'm submitting a...

[ x] Regression (a behavior that used to work and stopped working in a new release)

Current behavior

when i use selectTranslate like this.service.selectTranslate('home').subscribe(console.log); , the translated value gets logged every time the language changes

Expected behavior

It used to be logged only once. After #a7af5c6 the behavior was changed. So I had code like this.service.selectTranslate('home').subscribe(value => this.toast.success(value));. Without unsubscribing it was working. Now after that change the toast is triggered multiple times every time the language changes.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/transloco-example-sy5tc2?file=src/app/app.component.ts
Change the language few times and see the console.

What is the motivation / use case for changing the behavior?

Now i know my way around this, but i just migrated from ngx-translate and found this as a incompatibility. If this is the expected behavior then migration utility can be modified to unsubscribe.

Environment

Angular version: 8.1.1

Thanks for this awesome library ❤️

Maybe I am still too fresh, as this is my first hour with transloco, and I am still missing something but I tested the syntax options provided in README, against the following markup:

<p transloco="title"></p>
<p [transloco]="title"></p>
<p>{{ 'title' | transloco}}</p>
<ng-container *transloco="let t">
  <p>{{ t.title }}</p>
</ng-container>

and I got the following result in WebStorm

Seems like the two upper options are not allowed.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

WebStorm doesn't know what type is t which results in IDE errors:

Expected behavior

WebStorm should treat t as any object without showing these IDE warnings/errors.

Minimal reproduction of the problem with instructions

1. Create an Angular app with transloco.
2. Write the code above.

What is the motivation / use case for changing the behavior?

Environment

Angular version: X.Y.Z


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: v10.11.0
- Platform:  Windows
Others:

IDE: JetBrains Webstorm

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[x] Other... Please describe: Discussion

Hi guys,

I'm just wondering if it's worth it to have "already translated keys" to be memoized. The motivation is when we render a list of items and there are some text on the items are repeated. For example:

As you can see the TimeZone on each card item can be duplicated. And I am doing:

{{t.timeZone | translocoParams: {timeZone: location.timeZone} }}

I think it would be beneficial to have these "potential duplicated translated values" to be memoized. Just an idea.

Cache key can be: key + lang + scope + Object.keys(params).join('delimeter') ?

What do you guys think? I do understand the trade-offs of having to implement a Cache to have memoized data but the question is "is it worth it?"

selectTranslate currently requires a key to be passed to it, would be great if it could return the whole language object if no key is passed

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

There is a beautiful comparison table, but angular-l10n is missing.
angular-l10n was probably the best i18n library for Angular before Transloco, so a comparison with it would be really interesting.
I see someone already asked for it into #13

Expected behavior

Add angular-l10n to the table.

What is the motivation / use case for changing the behavior?

Clarity, documentation, help devs to choose what fits them best.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Translation programmatically is not working at all.

Expected behavior

Being able to translate somehow in the component.

Minimal reproduction of the problem with instructions

1. Inject transloco service in the component where I want to use it
2. Call translate() method with the exact string to the value to be translated like this: this.service.translate('section.subsection.value')
3. It returns nothing

No matter if I inject the service using constructor(private service: TranslocoService) {} or I directly import translate() function. Both of them do nothing.

I know the path to the value in the translation files is correct, since it works using the template approach.

By the way, I'm not providing a stackblitz demo since I've not been able even to reproduce the transloco-example in the stackblitz. Is the project and the demo still being supported?

Environment

Angular version: 8.0.1


Browser:
- [x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.16.0  
- Platform: Mac 

Others:

Thank you very much for this project, it is very good.

I have a question, how could I use Transloco in a library, and use that library in an application that also uses Transoloco?

This library can be lazy loaded or it can be loaded normally. I wish it could work for both cases.
Of course, this use case is a common when you use Monorepo in your company.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Things like preload success/fail, missing translation handler calls, etc. all trigger console output when run.

Expected behavior

It would be awesome if a config option existed to disable console output, particularly when in a testing scenario, to avoid clogging the log output.

It might also help avoid errors like 11 09 2019 11:54:48.476:ERROR [karma-server]: Error: Invalid character (�) in string: HeadlessChrome 0.0.0 (Mac OS X 10.14.6) LOG: '%c 🍻 Translation Load Success: en', 'background: #fff; color: hotpink;', which would be a bonus. :-)

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Blank translation strings (e.g. LANGUAGE.KEY: '') in a translation file result in a Missing translation for 'LANGUAGE.KEY' 🤔🕵🏻‍♀ console warning and a returned LANGUAGE.KEY value.

Expected behavior

It would be nice if the missing handler differentiated between missing values (where the key and/or value is undefined) and blank values (where the value is provided as a blank string).

What is the motivation / use case for changing the behavior?

It's a bit of an edge case, but we've been using it for years with ngx-translate to test for missing translation strings in non-English files.

If nothing shows up on screen for a given non-English run, then we know we're just waiting for the i18n team to finish making translations for that language. If APP.KEY shows up onscreen, then the dev team missed adding the key/string to the language file in question.

It's non-critical, but would be a nice to have as part of the migration path.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ X ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

When I inject TranslocoService in my service and then immediately want to fetch the results (i.e, fetch in the constructor) I get empty results. I guess it happens because of the translation is yet to be ready.

So it leaves me with two alternatives:

1. Preload the translation (which isn't a viable solution for every app).
2. Delay the request for translation (but you can't know exactly when it'll be ready).

Expected behavior

I suggest that Transloco should have a method that indicates if the translation is read, or to make a method that gets the translation as a promise (resolved when the translation is ready).

In ngx-translate I simply used this.translate.get for async.

Minimal reproduction of the problem with instructions

1. Create a new angular app
2. Add Transloco
3. Try to translate inside a service constructor.

What is the motivation / use case for changing the behavior?

Using the translation outside of the view after a service has been initialized.

Environment

Angular version: 8.2.5


Browser:
- [X] Chrome (desktop) version 74
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

I'm submitting a...

[x ] Bug report

Current behavior

simple installation process with ng add throws exception Cannot read property 'forEach' of undefined
after choosing fr, en, ar as for locales.
choosing webpack as loader.
choosing json as file type.
chhosing default files directory /src/asstests/i18n
i tried creating the folder i18n under src/asstets before hand but still the error persists.

Expected behavior

installation finishes as expected.

What is the motivation / use case for changing the behavior?

i am following your installation guidelines and steps.

Environment

Angular version: 8
OS:Wind 10
editor VSCode

I'm submitting a...

[x] Bug report

Current behavior

I'm converting from ngx-translate. My lazy loaded keys look like: 'OTA.TITLE'. OTA being the lazy module namespace.

(BTW the migrate tool missed a few 'translate.get' and '| translate' commands)

I set up the config on the lazy module.
providers: [{provide: TRANSLOCO_SCOPE, useValue: 'ota'}]

In AppModule i set

scopeMapping: {
  ota: 'OTA'
}

In my lazy component I write:
{{ 'OTA.TITLE' | transloco | uppercase }}

I get an error.

However, it works if I remove the scopeMapping and write
{{ 'ota.TITLE' | transloco | uppercase }}

It also works if I write:

scopeMapping: {
  ota: 'someName'
}

And then write:
{{ 'someName.TITLE' | transloco | uppercase }}

But straight uppercase OTA does not work.

Environment

Angular CLI: 8.3.3
Node: 12.9.1
OS: darwin x64
Angular: 8.2.5
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.3
@angular-devkit/build-angular      0.803.3
@angular-devkit/build-ng-packagr   0.803.3
@angular-devkit/build-optimizer    0.803.3
@angular-devkit/build-webpack      0.803.3
@angular-devkit/core               8.3.3
@angular-devkit/schematics         8.3.3
@angular/cdk                       8.1.4
@angular/cli                       8.3.3
@angular/flex-layout               8.0.0-beta.26
@angular/material                  8.1.4
@angular/pwa                       0.803.3
@ngtools/webpack                   8.3.3
@schematics/angular                8.3.3
@schematics/update                 0.803.3
ng-packagr                         5.5.0
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.39.2

Browser:
- [X] Chrome (desktop) version XX

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Proposal

Based on the documentation I didn't see a way to specify a mechanism for remembering the language that user selects. I'd expect something similar to what ngx-translate-cache provides.

Current behavior

Proposed behavior does not exist

Expected behavior

Pending design

What is the motivation / use case for changing the behavior?

There is no need to ask the consumer of this library to write all the boilerplate needed to store the selected language in LocalStorage or Cookies

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[x] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

Following the ReadMe, I can get to make my unit tests work, but the only language that works is english (I assume because it must be the default one for the TestingModule).

If I don't provide the "en" language, I get this error TypeError: Cannot read property 'welcome' of null (Because my component tries to access the key welcome).

I thought it could've been the "defaultLanguage" set in AppModule, but I assume the karma tests run differently. I still set it to 'fr' just in case, but the error persists.

Expected behavior

To be able to give TranslocoTestingModule a specific language to use other than english.

For example :

import fr from '../assets/i18n/fr.json';
...
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        MatProgressSpinnerModule,
        RouterTestingModule,
        TranslocoTestingModule.withLangs({
          fr
        })
      ],
      declarations: [AppComponent]
    }).compileComponents();
  }));

Minimal reproduction of the problem with instructions

• Create another translation file (fr.json)
• Try to give the french language to TranslocoTestingModule

What is the motivation / use case for changing the behavior?

Right now I can simply work around it and test for english, but I assume it's a bug or I may not understand the doc correctly. Thanks !

Environment

Angular version: 8.2.4


Browser:
- HeadlessChrome 77.0.3844 (Windows 10.0.0)
 
For Tooling issues:
- Node version: v12.3.1
- Platform:  Windows

Others:

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x ] Support request
[ ] Other... Please describe:

Current behavior

i have transloco working perfectly, but when adding an HttpInterceptor, and explicitly passing through transloco requests, it returns a this error:

Expected behavior

i want my interceptor to ignore the transloco request, which it does but something is going wrong.
here is a snapshot of the interceptor ignoring the transloco requests:

transloco configurations:

loader: http
files: JSON
location: /assets/i18n/*

Minimal reproduction of the problem with instructions

nothing special really, it works fine, but it has a problem with interceptors, am i doing something wrong?!

Environment

Angular version: 8.0.1


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

I'm submitting a...

[X] Feature request

ngx-translate support numbers when translating something like this:
{{ 'alert' | transloco: { value: dynamic } }}

This currently fails if I do an 'ng build' while passing it a number. transloco only accepts strings.

ERROR MESSAGE:
ERROR in ./src/app/subscription.component.html(144,104): Type 'number' is not assignable to type 'string'.

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

ng add @ngneat/transloco --verbose
Skipping installation: Package already installed
? 🌍 Which languages do you need? en, es
? 🚀 Are you working with server side rendering? No
Unexpected token } in JSON at position 1033

Expected behavior

working

Environment

Angular CLI: 8.3.4
Node: 11.15.0
OS: linux x64
Angular: 8.2.6
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.4
@angular-devkit/build-angular     0.803.4
@angular-devkit/build-optimizer   0.803.4
@angular-devkit/build-webpack     0.803.4
@angular-devkit/core              7.3.7
@angular-devkit/schematics        7.3.7
@angular/cdk                      8.2.0
@angular/cli                      8.3.4
@angular/flex-layout              8.0.0-beta.26
@angular/material                 8.2.0
@ngtools/webpack                  8.3.4
@schematics/angular               8.3.4
@schematics/update                0.803.4
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

@ngx-translate/core": "^11.0.1"

This must be because of my code base, have you any clue how I can found the file causing the issue or A way to investigate more ? Thanks

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

I've setup transloco-locale as per the instructions along side my existing transloco logic as per https://github.com/ngneat/transloco/tree/master/projects/ngneat/transloco-locale

But when I swap the date Angular pipe to translocoDate I get:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translocoDate' could not be found ("mp.name }}</h5>
                    <small>{{ 'manage.download-logs.dumps.created' | transloco }}{{ [ERROR ->]dump.dateCreated | translocoDate : { dateStyle: 'medium' } }} Size: {{ dump.size }}</small>
         "): ng:///ManageModule/LogsComponent.html@72:84

This is inside a lazy loaded module.

If I add this to my app component html it works perfectly and I can see it be awesome and swap the date formatting when going between US/GB!

{{ now | translocoDate: { dateStyle: 'long' } }}

Expected behavior

Should work in lazy loaded modules

Minimal reproduction of the problem with instructions

See above

What is the motivation / use case for changing the behavior?

Environment

Angular version: 8.0.3
Transloco: 1.7.9
Transloco-locale: 1.0.0
Transloco-persist-lang: 1.0.1


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 10.16.3
- Platform:  MacOS

Others:

Hi, when I use lazy loaded translation file in my lazy loaded module +dashboard like

providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'dashboard' }]

Is there any way to force my NOT lazy loaded modules used in +dashboard module to use translations NOT from /18n/dashboard/en.json, but just from /i18n/en.json ?

The problem is that my common module will not always be used just inside the +dashboard lazy loaded module, but inside more modules. So I do not want to create translations in all my modules.

Or maybe have a separate file right inside the common module folder and force the common component to use translations contained in the folder instead of some lazy loaded translation file specified in lazy loaded module above?

my common module

.

In order for us to further develop the library, and meet all your translation needs, we'd love to learn what the translation process in your company is like.

For instance, here in Datorama, we use a local JSON file. Each developer adds keys to the file for any missing translations, where the value is the text in English. The developer then uses the keys in the various component templates.

For example:

// locale_en_US.json
"sandbox": {
  "copy-error": "Copy to sandbox is temporarily not available"
}

<div>{{ 'sandbox.copy-error' | transloco }}</div>

The file is sent once a month to translators, who return a translation file with the same keys, and the values translated into a different language.

// locale_es.json
"sandbox": {
  "copy-error": "spanish translation"
}