docs(v8): add "Use with Locize" recipe#922
Conversation
Adds a Recipe documenting the pattern for loading translations from Locize via a custom TranslocoLoader plus pushing missing keys back via a custom TranslocoMissingHandler. Covers both Locize CDN endpoints (Standard api.lite.locize.app and Pro api.locize.app), the standalone-components setup, and links to the runnable example at github.com/locize/transloco-example. Also wires the example into the Sandbox & Examples page.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds documentation for integrating Transloco with the Locize translation management system, including a new recipe page and references from the sandbox/examples page and the v8 SUMMARY.
Changes:
- New recipe page
use-with-locize.mddescribing customTranslocoLoaderandTranslocoMissingHandlerfor Locize. - Added reference to the new recipe in
sandbox-and-examples.mdwith a link to an example repo. - Added the new recipe entry to the v8
SUMMARY.mdtable of contents.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| docs/v8/resources/recipies/use-with-locize.md | New recipe describing Locize integration with code samples for standalone and NgModule setups. |
| docs/v8/resources/sandbox-and-examples.md | Adds an "Example repositories" section linking to the locize/transloco-example repo and the new recipe. |
| docs/v8/SUMMARY.md | Adds the new recipe to the v8 docs sidebar. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| ### Example repositories | ||
|
|
||
| * [locize/transloco-example](https://github.com/locize/transloco-example) — Angular 21 + Transloco 8 wired against the [Locize](https://www.locize.com/?from=transloco-docs) translation management CDN, with a custom `TranslocoMissingHandler` that pushes new keys back via `saveMissing`. See the matching [Use with Locize](recipies/use-with-locize.md) recipe. |
| When a key is requested in the active language **and** the active | ||
| language equals the default (reference) language, push the key to | ||
| Locize so translators can fill it in. Guard the apiKey on `isDevMode()` | ||
| so production builds never carry the write-enabled credential. |
| * [Recipes](resources/recipies/README.md) | ||
| * [Prefetch User Language](resources/recipies/prefetch-user-language.md) | ||
| * [Using Xliff](resources/recipies/using-xliff.md) | ||
| * [Use with Locize](resources/recipies/use-with-locize.md) |
@jsverse/transloco
@jsverse/transloco-locale
@jsverse/transloco-messageformat
@jsverse/transloco-optimize
@jsverse/transloco-persist-lang
@jsverse/transloco-persist-translations
@jsverse/transloco-preload-langs
@jsverse/transloco-schematics
@jsverse/transloco-scoped-libs
@jsverse/transloco-utils
@jsverse/transloco-validator
commit: |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
2 issues found across 3 files
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
- Move locizer.init into the handler's constructor so isDevMode() runs after Angular bootstrap (was at module-load, which is unreliable depending on bundler setup). - Add a hint/warning block about not committing the Locize apiKey to source — recommend sourcing from a git-ignored env file via the build tool's env-var injection (e.g. import.meta.env.VITE_*). - NgModule example: replace deprecated HttpClientModule with provideHttpClient() to match the standalone example and Angular 21+ conventions.
There was a problem hiding this comment.
1 issue found across 1 file (changes from recent commits).
Reply with feedback, questions, or to request a fix.
Re-trigger cubic
Replace the Vite-only import.meta.env example with a bullet list that covers @angular/build (Vite-based, Angular 17+ default), webpack-based @angular-devkit/build-angular:browser (legacy environments.ts file-replacement), and runtime-fetch patterns. The code example now shows a generic devApiKey constant with a pointer to the warning block.
Adds a new Recipe page documenting how to use Transloco with Locize, per the contribution invitation on the Sandbox & Examples page ("Share your unique use cases, innovative solutions, or integrations").
The recipe lives at
docs/v8/resources/recipies/use-with-locize.mdand walks through:TranslocoLoaderthat fetches translations from the Locize CDNTranslocoMissingHandlerthat pushes missing keys back vialocizer(analogous to i18next'ssaveMissing)app.config.tsviaprovideTransloco+provideTranslocoMissingHandler(Standalone and NgModule tabs, mirroring the existing Using Xliff recipe's format)Both Locize CDN endpoints are documented:
api.lite.locize.app, BunnyCDN-backed, default for new projects)api.locize.app, AWS CloudFront-backed)Locize is maintained by the same team that builds i18next.
Also adds a one-line entry under "Example repositories" in
sandbox-and-examples.mdpointing at the companion runnable Angular 21 + Transloco 8 example at github.com/locize/transloco-example (recently refreshed for the v8 standalone-components API).Sidebar entry added to
SUMMARY.mdunder Resources › Recipes.Happy to adjust scope, wording, code-tab labels, or sidebar placement if a different shape would land better.
Summary by cubic
Adds a “Use with Locize” recipe to the v8 docs showing how to load translations from Locize with
@jsverse/translocousing a customTranslocoLoader, plus aTranslocoMissingHandler(vialocizer) to push missing keys. Updates the sidebar and examples, and adds bundler-agnostic guidance for sourcing the Locize API key.docs/v8/resources/recipies/use-with-locize.mdwith Standalone and NgModule setup (provideTransloco,provideTranslocoMissingHandler,provideHttpClient()); initializeslocizerin the handler constructor soisDevMode()runs post-bootstrap.@angular/build(Vite) env vars, webpack@angular-devkit/build-angularfile-replacement, and runtime fetch; code uses adevApiKeyplaceholder and warns not to commit keys.api.lite.locize.app(Standard) andapi.locize.app(Pro). Addslocize/transloco-exampleto Sandbox & Examples and a sidebar entry inSUMMARY.md.Written for commit da20417. Summary will update on new commits. Review in cubic