Comments (11)
@Finesse Hello and sorry, somehow i missed your post.
Yes, it's not user friendly as it could be. I've already answered on similar questions, here are the reasons why i18next pipe is a pure pipe:
In early versions i tryied to implement impure pipes, but left this idea for several reasons:
Some custom controls or pipes can be dependent on angular LOCALE_ID token. So we want to change angular LOCALE_ID with i18next language.
{
provide: LOCALE_ID,
deps: [I18NextService],
useFactory: (i18next: I18NextService) => {
return i18next.language; //string: 'en', 'ru'...
}
}
The problem is that angular IOC container resolves dependencies as singleton, once LOCALE_ID was requested it will always resolve as the same value (first resolved). The only way to get actual LOCALE_ID value is to register LOCALE_ID as factory function, but than it will break libraries that expect LOCALE_ID to be 'string' (not function).
Here is my stackoverflow question: Dynamicly get LOCALE_ID (resolve per request)Custom components with own localization support mostly require complete reinit on language change.
Also most l10n, i18n and date format (momentjs) angular pipes are pure, and changing i18next language or LOCALE_ID won't trigger pipe change detection for them.
Possible memory leaks and perfomant issues. For example zonejs automatically trigger change detection as a result of async operations, this means using jquery libs with ajax could cause your page (full of impure pipes) freeze.
That is why i ended up with simply refreshing page with a new language. We only need to setup right language, locale and formats on angular initialization.
Also i had impure i18next pipe implementation that was statefull - it had memoisation that returned already translated result if input params and language did not change. It worked well. But in my real world projects language changed immediately, but "angular moment " pipes was not called (they are pure), third party controls also needed to be manually reinit...
So impure pipe would cause perfomance freezes (mostlty because of zonejs). And it wouldn't solve probles with already resolved LOCALE_ID and angular pipes dependent on it LOCALE_ID (it can be updated only rebootstraping angular or refreshing page).
Hack with the creating copy of value of translation key could help us:
let copy = { ...original }
But our key (for example: 'common:hello') is string and it is not a reference type (but a value type), you can't change reference pointer as you could do with an object. And changing language doesn't change a key, it is still the same.
from angular-i18next.
@Romanchuk Thank you for the explanation (though I haven’t comprehended it because I don’t know Angular guts). It’s sad that Angular restrains us with such ridiculous limitations.
Also i had impure i18next pipe implementation that was statefull - it had memoisation that returned already translated result if input params and language did not change. It worked well.
Maybe you can return this pipe as an extra pipe? For example
<div>
{{ 'tranlation_key' | i18nextEager }}
</div>
from angular-i18next.
Hi @Finesse please take a look at this simple implementation of i18next, shows how to change the language, plurals, etc... at least for me is always easier look at a sample code
i18nextSample
from angular-i18next.
Maybe you can return this pipe as an extra pipe? For example
@Finesse It is possible, i'll think about it in first half of january
from angular-i18next.
@scastaldi As I can see, the component reloads the page when the language changes. This is not what I want to achieve.
@Romanchuk It would be great. Thank you!
from angular-i18next.
@Finesse Hi, i just released version 7.2.0-beta with a new i18nextEager pipe. It is impure pipe so i highly recommend to use it only in combine with OnPush change detection strategy, or else (default change detection) each pipe will retrigger more than one time. You can use it without reloading page.
Also this release supports latest i18next version.
from angular-i18next.
@Romanchuk Thank you, I’ll try it today
i highly recommend to use it only in combine with OnPush change detection strategy
Could you please give me a link where I can read about this strategy (especially how to use it with a pipe)
from angular-i18next.
@Finesse
https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4
https://indepth.dev/the-essential-difference-between-pure-and-impure-pipes-in-angular-and-why-that-matters/
https://angular.io/guide/pipes
Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.
With zone.js and Default change detection enabled it will cause huge perfomance issues
from angular-i18next.
@Romanchuk It works as expected, thank you! The first link was helpful. The issue is resolved for me.
from angular-i18next.
Ok, i will release stable version and update docs to cover i18nextEager pipe usage
from angular-i18next.
Docs updated
from angular-i18next.
Related Issues (20)
- Is it possible to publish the 15.0 pre-release version to npm? HOT 2
- Interpolation is not working anymore HOT 4
- Property 'initialized' in type 'I18NextEvents' is not assignable to the same property in base type 'ITranslationEvents'. HOT 4
- Is it possible to use this library with Angular Universal and SSR? HOT 4
- New typings prevents passing interpolation to `ITranslationService` HOT 1
- Interpolation Format issues with numbers / dates or i18nextCap HOT 2
- Integration to Angular 16 HOT 9
- angular version issue HOT 1
- Check if there is a translation for the specified key HOT 1
- Update to last i18next version HOT 3
- Mock angular-i18next in Jest HOT 2
- Error when building project in docker HOT 3
- Nesting example HOT 1
- Consider providing a `ng add` schematics HOT 1
- Use Angular i18next in libs with nx workspace
- Typing issue when `returnObjects: true` HOT 2
- How to load new translations after init HOT 2
- Initialization Error and Language Switching Failure with Latest Version of Angular-i18next in Angular 18.1.0 HOT 1
- Getting started with Angular v15 HOT 4
- Support i18next v22 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-i18next.