{"id":13807541,"url":"https://github.com/rbalet/ngx-translate-multi-http-loader","last_synced_at":"2025-05-14T00:31:40.867Z","repository":{"id":37849180,"uuid":"137562370","full_name":"rbalet/ngx-translate-multi-http-loader","owner":"rbalet","description":"A loader for ngx-translate that loads translations with http calls","archived":false,"fork":true,"pushed_at":"2025-01-13T08:35:31.000Z","size":1949,"stargazers_count":80,"open_issues_count":1,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T02:05:33.976Z","etag":null,"topics":["angular","i18n","ngx-translate"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"ngx-translate/http-loader","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rbalet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-16T07:29:08.000Z","updated_at":"2025-03-06T20:55:33.000Z","dependencies_parsed_at":"2023-02-19T17:00:48.069Z","dependency_job_id":null,"html_url":"https://github.com/rbalet/ngx-translate-multi-http-loader","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-translate-multi-http-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-translate-multi-http-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-translate-multi-http-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rbalet%2Fngx-translate-multi-http-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rbalet","download_url":"https://codeload.github.com/rbalet/ngx-translate-multi-http-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046333,"owners_count":22005573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","i18n","ngx-translate"],"created_at":"2024-08-04T01:01:26.605Z","updated_at":"2025-05-14T00:31:35.829Z","avatar_url":"https://github.com/rbalet.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/widness"],"categories":["Development Utilities"],"sub_categories":["Internationalization"],"readme":"# @ngx-translate/multi-http-loader\n\nA loader for [ngx-translate](https://github.com/ngx-translate/core) that loads translations using http.\n\n[![npm version](https://img.shields.io/npm/v/ngx-translate-multi-http-loader.svg)](https://www.npmjs.com/package/ngx-translate-multi-http-loader) ![NPM](https://img.shields.io/npm/l/ngx-translate-multi-http-loader) ![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-translate-multi-http-loader)\n![npm](https://img.shields.io/npm/dm/ngx-translate-multi-http-loader)\n\nAngular 14 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample-2clau3?file=src/app/app.module.ts\n\nAngular 6 example: https://stackblitz.com/edit/ngx-translate-multi-http-loader-sample\n\nGet the complete changelog here: https://github.com/rbalet/ngx-translate-multi-http-loader/releases\n\n* [Installation](#installation)\n* [Usage](#usage)\n* [Error \u0026 BugFix](#possible-error--bugfix)\n\n## breaking change: v9.0.0\n* This library is now using `httpBackend` instead of the `httpClient`, to avoid being delayed by interceptor, which was creating errors while loading.\n* From the v9, the library will only be using a list of `string[]` so `prefix` \u0026 `suffix` aren't needed anymore and `.json` gonna be the default suffix.\n\n## Installation\n\nWe assume that you already installed [ngx-translate](https://github.com/ngx-translate/core).\n\nNow you need to install the npm module for `MultiTranslateHttpLoader`:\n\n```sh\nnpm install ngx-translate-multi-http-loader\n```\n\nChoose the version corresponding to your Angular version:\n\n | Angular | @ngx-translate/core | ngx-translate-multi-http-loader |\n | ------- | ------------------- | ------------------------------- |\n | \u003e= 16   | 15.x+               | \u003e= 15.x+                        |\n | 15      | 14.x+               | 9.x+                            |\n | 14      | 14.x+               | 8.x+                            |\n | 13      | 14.x+               | 7.x+                            |\n | 6       | 10.x+               | 1.x+                            |\n\n## Usage\n_The `MultiTranslateHttpLoader` uses HttpBackend to load translations, therefore :_\n1. Create and export a new `HttpLoaderFactory` function\n2. Import the `HttpClientModule` from `@angular/common/http` \n3. Setup the `TranslateModule` to use the `MultiTranslateHttpLoader`\n\n```typescript\nimport {NgModule} from '@angular/core';\nimport {BrowserModule} from '@angular/platform-browser';\nimport {HttpClientModule, HttpBackend} from '@angular/common/http';\nimport {TranslateModule, TranslateLoader} from '@ngx-translate/core';\nimport {MultiTranslateHttpLoader} from 'ngx-translate-multi-http-loader';\nimport {AppComponent} from './app';\n\n// AoT requires an exported function for factories\nexport function HttpLoaderFactory(_httpBackend: HttpBackend) {\n    return new MultiTranslateHttpLoader(_httpBackend, ['/assets/i18n/core/', '/assets/i18n/vendors/']); // /i18n/core/ on angular \u003e= v18 with the new public logic\n}\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        HttpClientModule,\n        TranslateModule.forRoot({\n            loader: {\n                provide: TranslateLoader,\n                useFactory: HttpLoaderFactory,\n                deps: [HttpBackend]\n            }\n        })\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\nThe `MultiTranslateHttpLoader` takes a list of `string[]` or `TranslationResource[]`. \n\n### String[]\nFor example `['/assets/i18n/core/', '/assets/i18n/vendors/']`,   \nwill load your translations files for the lang \"en\" from : `/assets/i18n/core/en.json` and `/assets/i18n/vendors/en.json`\n\n### Custom suffix\n**For now this loader only support the `json` format.**\n\nInstead of an array of `string[]`,  \nyou may pass a list of parameters:\n- `prefix: string = '/assets/i18n/'`\n- `suffix: string = '.json'`\n- `optional: boolean = true`\n\n```typescript\nexport function HttpLoaderFactory(_httpBackend: HttpBackend) {\n    return new MultiTranslateHttpLoader(_httpBackend, [\n        {prefix: './assets/i18n/core/', suffix: '.json'},\n        {prefix: './assets/i18n/vendors/'}, // , \"suffix: '.json'\" being the default value\n        {prefix: './assets/i18n/non-existent/', optional: true}, // Wont create any log\n    ]);\n}\n```\n\nThe loader will merge all translation files from the server\n\n\n## Possible error \u0026 Bugfix\n\n### values.at is not a function\n1. Install `core-js`\n2. In `polyfills.ts`, add `import 'core-js/modules/es.array.at'`\n\n\n## Authors and acknowledgment\n* maintainer [Raphaël Balet](https://github.com/rbalet) \n* Former maintainer [Dennis Keil](https://github.com/denniske) \n* \n[![BuyMeACoffee](https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png)](https://www.buymeacoffee.com/widness)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-translate-multi-http-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frbalet%2Fngx-translate-multi-http-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frbalet%2Fngx-translate-multi-http-loader/lists"}