jsverse / transloco Goto Github PK
View Code? Open in Web Editor NEW๐ ๐ The internationalization (i18n) library for Angular
Home Page: https://jsverse.github.io/transloco/
License: MIT License
๐ ๐ The internationalization (i18n) library for Angular
Home Page: https://jsverse.github.io/transloco/
License: MIT License
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"
}
[ ] 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:
I can't seem to import TranslocoPreloadLangsModule
.
Be able to import and use TranslocoPreloadLangsModule
@ngneat/transloco-preload-langs
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
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:
See console of
https://stackblitz.com/edit/angular-aa3pmd?file=src/app/app.component.ts
...btw I have a feeling that Translation[]
is a valid return type as well selectTranslate<T = string | Translation | string[]>
[ ] 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.
As the .all-contributorsrc
Project Owner is pointing to NetanelBasal, the URL generated for the links for contributors point to github.com/NetanelBasel/transloco
.
Generated URLs should point to github.com/ngneat/transloco
.
All links for current contributors contributions point to a 404 page.
[ ] 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:
If we passing 0 as dynamic value parameter it is will not be showed
Showing 0 as param value
//translation file
"cart": {
"count": "Cart items: {{value}}"
}
template
{{t.cart.count | translocoParams: { value: cartItems} }}
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:
[ ] 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:
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
Provide a more descriptive error so a person getting the error knows how to correct their mistake.
ng add @ngneat/transloco
and answering the 1st 3 prompts using the defaults.
Angular CLI: 8.1.2
Node: 10.9.0
OS: win32 x64
Angular: 8.1.2
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.
[ ] 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:
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)
It should not fail.
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.
Should be able to lazy-load translations for universal
Angular CLI: 7.3.9
Angular: 7.2.15
Browser:
For Tooling issues:
Node: 8.15.1
OS: darwin x64
Others:
[ ] 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:
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.
Following the sourceRoot
when creating the translations directory.
Improve support of monorepo.
This proposal tries to simplify the translation process. The issues we face today are:
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>
[ ] 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:
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:
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.
Using the translation outside of the view after a service has been initialized.
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:
[ ] 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:
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:
*transloco="let t"
is used, Angular just ignores the ng-container and it is not rendered at all, without any error messages.TranslocoService
into component works, but translate(key)
returns an empty string.Here is an injected translation service:
It should work :)
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
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:
[ ] 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:
getBrowserLang() and getBrowserCultureLang() returns only the first language in the list.
There should be methods which returns the complete lists of configured languages.
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.
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?
.
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.
[ ] 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:
WebStorm doesn't know what type is t
which results in IDE errors:
WebStorm should treat t
as any object without showing these IDE warnings/errors.
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
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>
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
[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'.
[ ] 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:
Like this plugin https://github.com/Greentube/localize-router
The best i18n library for Angular ๐
[ ] 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:
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
working
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
[ x] Regression (a behavior that used to work and stopped working in a new release)
when i use selectTranslate like this.service.selectTranslate('home').subscribe(console.log);
, the translated value gets logged every time the language changes
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.
https://stackblitz.com/edit/transloco-example-sy5tc2?file=src/app/app.component.ts
Change the language few times and see the console.
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.
Angular version: 8.1.1
Thanks for this awesome library โค๏ธ
[ ] 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:
Could not find a way to add context to a translation
Each translation must have the option to add context
There are different meanings for words on different places and context gives the translators a clue on the meaning.
[ ] 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:
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'
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 ๐
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?
We can not know if a key is lost, incomplete or has typo.
We do not have autocomplete, despite having nested objects that can be complex.
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?
[x ] Bug report
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.
installation finishes as expected.
i am following your installation guidelines and steps.
Angular version: 8
OS:Wind 10
editor VSCode
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:
TranslationModule
, to be imported in root module (AppModule), this module shouldtranslocoService.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
<Feature>Module
, this shouldtranslocoService.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..
[x] Bug report
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.
Updating the port in the path to the translation files.
Serve the example app via:
ng serve --port 4204
It is quite incovenient and could possibly cause some issues with ng-universal
as it serves the app via 4000
.
Angular version: 8.2.4
[ ] 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:
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
Add angular-l10n
to the table.
Clarity, documentation, help devs to choose what fits them best.
[ ] 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:
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.
Existing translation scopes should be checked before loading more
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
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.
[ ] 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:
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.
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).
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.
[ ] 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" />
[ ] 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:
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.
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.
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>
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.
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
[ ] 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:
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.
Supports of default imports for ng-add
schematic.
Just add a default import in the app.module.ts
like :
import something from './my-module';
import { NgModule } from '@angular/core';
[ ] 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:
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' } }}
Should work in lazy loaded modules
See above
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:
[ ] 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:
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.
Proposed behavior does not exist
Pending design
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
[ ] 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:
i have transloco working perfectly, but when adding an HttpInterceptor, and explicitly passing through transloco requests, it returns a this error:
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:
loader: http
files: JSON
location: /assets/i18n/*
nothing special really, it works fine, but it has a problem with interceptors, am i doing something wrong?!
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
[ ] 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:
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?
It to persist to local storage
See current behaviour
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:
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
[ ] 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:
No way to change LOCALE_ID based on language selected in transloco so that pipes such a Date etc update.
Have some pipes like found in https://github.com/robisim74/angular-l10n
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
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:
[x] Bug report
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.
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
[ ] 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:
Translation programmatically is not working at all.
Being able to translate somehow in the component.
translate()
method with the exact string to the value to be translated like this: this.service.translate('section.subsection.value')
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?
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:
[ ] 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:
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.
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();
}));
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 !
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:
[ ] 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:
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.
Universal build succeeds
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)
For Universal to work
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:
[ ] 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:
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
[ ] 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?"
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:
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.
[ ] 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:
Things like preload success/fail, missing translation handler calls, etc. all trigger console output when run.
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. :-)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.