search

fulls1z3 / universal

Seed project for Angular Universal apps featuring Server-Side Rendering (SSR), Webpack, CLI scaffolding, dev/prod modes, AoT compilation, HMR, SCSS compilation, lazy loading, config, cache, i18n, SEO, and TSLint/codelyzer
http://ng-seed.fulls1z3.com
MIT License
703 stars 138 forks source link

i18n file changes are not taken into account (spa hmr) #25

Closed theomathieubhvr closed 7 years ago

theomathieubhvr commented 7 years ago

I'm submitting a ... (check one with "x")

[x] bug report => check the README and search github for a similar issue or PR before submitting
[ ] support request => check the README and search github for a similar issue or PR before submitting
[ ] feature request

Current behavior

When adding keys to i18n files, changes are not taken into account. This works well on universal server (dev + prod) but not with spa.

Thanks !

Expected/desired behavior

Keys should be translated when using {{'KEY' | translate}} and not showing KEY.

Minimal reproduction of the problem with instructions

theomathieubhvr commented 7 years ago

Quick fix : clear every browser cache. But this should not happen in dev.

fulls1z3 commented 7 years ago

@theomathieubhvr I suppose you're using HMR on spa build and I have exactly the same issue right here.

I digged it a little and found out that's more or less connected with copy-assets-webpack-plugin and webpack-dev-server.

It's a known issue with the HMR; files copied through copy-assets-webpack-plugin are not taken into account.

Rebuilding the project using npm run build:spa-dev and then running npm run serve:spa would definitely solve this problem.

On the other hand, if you're using ngx-cache then the app seeks the cache (by default, should be local-storage) for i18n data. And yeah, clearing the cache (or just local-storage) would solve it.

Please feel free to to add anything if there're any points that I missed.

theomathieubhvr commented 7 years ago

That's exactly it !

But in production, if I update my i18n keys, how can I force my users to reload their localstorage ?

Thanks !

fulls1z3 commented 7 years ago

You can set TTL (in terms of secs, ex: 300) right at the imports section of you app.module. I suppose there's no usage example on ngx-cache/core repository about TTL but see the cache.loader.ts to what params to pass. Also, don't forget to set the expiry param to undefined - otherwise it will override the TTL.