{"id":15402154,"url":"https://github.com/michareiser/webpack-angular-translate","last_synced_at":"2025-04-15T17:01:28.616Z","repository":{"id":38272205,"uuid":"38958882","full_name":"MichaReiser/webpack-angular-translate","owner":"MichaReiser","description":"Webpack plugin for angular-translate","archived":false,"fork":false,"pushed_at":"2023-01-07T06:47:33.000Z","size":2988,"stargazers_count":15,"open_issues_count":29,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T18:17:30.858Z","etag":null,"topics":["angular","angular-translate","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MichaReiser.png","metadata":{"files":{"readme":"README.MD","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-12T10:59:22.000Z","updated_at":"2025-01-09T11:56:23.000Z","dependencies_parsed_at":"2023-02-06T14:31:48.546Z","dependency_job_id":null,"html_url":"https://github.com/MichaReiser/webpack-angular-translate","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaReiser%2Fwebpack-angular-translate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaReiser%2Fwebpack-angular-translate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaReiser%2Fwebpack-angular-translate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaReiser%2Fwebpack-angular-translate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaReiser","download_url":"https://codeload.github.com/MichaReiser/webpack-angular-translate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249116232,"owners_count":21215142,"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","angular-translate","webpack"],"created_at":"2024-10-01T16:01:18.468Z","updated_at":"2025-04-15T17:01:28.587Z","avatar_url":"https://github.com/MichaReiser.png","language":"JavaScript","readme":"# webpack-angular-translate\n\n[![NPM](https://nodei.co/npm/webpack-angular-translate.png?downloads=true\u0026downloadRank=true\u0026stars=true)](https://nodei.co/npm/webpack-angular-translate/)\n\n[![Build Status](https://travis-ci.org/MichaReiser/webpack-angular-translate.svg?branch=master)](https://travis-ci.org/MichaReiser/webpack-angular-translate)\n[![Coverage Status](https://coveralls.io/repos/MichaReiser/webpack-angular-translate/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/MichaReiser/webpack-angular-translate?branch=master)\n[![Dependency Status](https://gemnasium.com/DatenMetgzerX/webpack-angular-translate.svg)](https://gemnasium.com/DatenMetgzerX/webpack-angular-translate)\n[![npm version](https://badge.fury.io/js/webpack-angular-translate.svg)](http://badge.fury.io/js/webpack-angular-translate)\n\nThis plugin extracts the translation id's and default texts from angular-translate and writes them into a separate json file.\nThe json file can be used by a backend component to initialize all the used translations. The benefit of this approach is,\nthat the frontend developer can define all translations directly in the frontend code and doesn't need to modify any backend-code.\n\n## Getting started\n\nInstall the plugin using npm:\n\n```bash\nnpm install webpack-angular-translate\n```\n\nConfigure the loader and the plugin in the webpack configuration.\n\n```js\nvar WebPackAngularTranslate = require(\"webpack-angular-translate\");\n{\n  ...\n  module: {\n    rules: [\n      {\n        test: /\\.html$/,\n        use: [\n          {\n            loader: \"html-loader\",\n            options: {\n              removeEmptyAttributes: false,\n              attrs: []\n            }\n          },\n          {\n            loader: WebPackAngularTranslate.htmlLoader()\n          }\n        ]\n      },\n      {\n        test: /\\.js/,\n        loader: WebPackAngularTranslate.jsLoader(),\n        options: {\n          parserOptions: {\n            sourceType: \"module\"\n          }\n        }\n      }\n    ]\n  },\n\n  plugins: [new WebPackAngularTranslate.Plugin()]\n}\n```\n\nThe htmlLoader should be used as pre loader as it expects html as input (and not html embedded into js, what is the result of the _html-loader_).\nThe javascriptLoader can be used like any other loader (pre / post or normal loader). The loader requires that the input is valid javascript. It's possible to only use the javascript or the html loader. It's advised to only apply the loader to relevant files, as it requires an additional parsing step, which has an effect on the build performance.\n\nThe plugin accepts the following options in the constructor:\n\n- fileName: The name of the file that contains all the translations, default `translations.json`\n\nThe loaders accepts the name of a loader that should be applied in advance. E.g. the js loader can be applied to the result of the typescript loader:\n\n```js\n{\n    test: /\\.ts$/,\n    loader: WebPackAngularTranslate.jsLoader('ts-loader')\n}\n```\n\n### Custom HTML Translation extractors\n\nThe htmlLoader supports registering custom HTML text extractors. The API of an extractor is:\n\n```\nexport interface HtmlTranslationExtractor {\n  (element: AngularElement, context: HtmlTranslationExtractionContext): void;\n}\n\nexport interface AngularElement {\n  tagName: string;\n  attributes: Attribute[];\n  texts: Text[];\n  startPosition: number;\n}\n\nexport interface HtmlTranslationExtractionContext {\n  emitError(message: string, position: number): void;\n  emitSuppressableError(message: string, position: number): void;\n  registerTranslation(translation: {\n    translationId: string;\n    defaultText?: string;\n    position: number;\n  }): void;\n\n  asHtml(): void;\n}\n```\n\nThe extractor receives an angular element with all its attributes and its direct text siblings as well as a context that can be used to either register a new translation or emit a warning/error.\nThe [translate-directive-translation-extractor.ts](src/html/translate-directive-translation-extractor.ts) contains an implementation of an extractor.\nCustom extractors can be specified with the html loader:\n\n```js\n{\n  loader: WebPackAngularTranslate.htmlLoader({\n    translationExtractors: [(element, context) =\u003e { ... }]\n  })\n}\n```\n\n#### AngularI18nTranslationsExtractor\n\nWebpackAngularTranslates provides the `angularI18nTranslationsExtractor` to support extractions of translations in applications using [angular](https://angular.io/).\nIt extracts translations from the `i18n` and `i18n-[attr]` directives, used by [Angular for Internationalization](https://angular.io/guide/i18n).\n\n```js\n{\n     use: [{\n         loader: WebPackAngularTranslate.htmlLoader(),\n         options: {\n             translationExtractors: [WebPackAngularTranslate.angularI18nTranslationsExtractor]\n         }\n     }]\n}\n```\n\nExamples:\n\n`\u003ch1 i18n=\"@@A title\"\u003eA title\u003c/h1\u003e` results in a translation with `{id: \"A title\", defaultTranslation: \"A title\"}` \n\n`\u003cp i18n=\"@@loan-intro-description-text\"\u003eThis is a very long text for the loan intro!\u003c/p\u003e` results in a translation with `{id: \"loan-intro-description-text\", defaultTranslation: \"This is a very long text for the loan intro!\"}` \n\n`\u003cimg src=... title=\"My image title\" i18n-title=\"@@MyImage\" /\u003e` results in a translation with `{id: \"MyImage\", defaultTranslation: \"My image title\"}`\n\nNote: The extraction will only work for labels with an explicitly provided `@@id` and default translation.\n\n## Supported Expressions\n\n### Directive\n\nThe directive is supported for static translations. Dynamic translations are not supported.\n\n```html\n\u003cdiv translate\u003e Translation-ID\u003c/div\u003e\n\u003ctranslate\u003e Translation-ID\u003c/translate\u003e\n\n\u003cdiv translate=\"Translation-ID\"\u003e\u003c/div\u003e\n\u003ctranslate=\"Translation-ID\"\u003e\u003c/translate\u003e\n\n\u003cdiv translate translate-default=\"Default text\"\u003e Translation-ID\u003c/div\u003e\n\u003ctranslate translate-default=\"Default text\"\u003eTranslation-ID\u003c/div\u003e\n\n\u003c!-- extension to angular-translate, define default for attributes --\u003e\n\u003ca translate translate-attr-title=\"TITLE-ID\" translate-default-attr-title=\"Default for title attr\" href=\"#\"\u003e\u003ci class=\"fa-home fa\" /\u003e\u003c/a\u003e\n```\n\n### Filter\n\nFilters in Angular-Expression statements are supported when the value, to which the filter is applied to, is a literal and no other filter is applied before the `translate` filter.\nThe following examples are supported:\n\n```html\n\u003ch1 title=\"{{ 'My title' | translate }}\"\u003e\u003c/h1\u003e\n\u003ch2\u003e{{ 'My long translation' | translate | limitTo:20 }}\u003c/h2\u003e\n\n\u003cspan\u003e{{ \"4\" | translate }} {{ \"x\" | translate }}\u003c/span\u003e\n```\n\nFilters in `ng-bind` and other attributes are currently not supported. In the most scenarios `ng-bind` can be replaced with the `translate` directive or a filter can be applied directly.\n\n### Service\n\nThe `$translate` service is supported for literals only. No dynamic translations are supported. It's required\nthat the `$translate` service is always called `$translate`.\n\nThe following examples are supported:\n\n```js\n$translate('Login');\n\nthis.$translate('Login');\n_this.$translate('Login'); // also other names then _this\n\n$translate.instant('Login');\nthis.$translate.instant('Login');\n\n$translate('Login', ..., ..., 'Anmelden');\n```\n\nIf the `$translate` service is used with an expression (e.g. variable), then compilation will fail and an error is emitted\nto the console. The error is emitted to remind the developer that he is responsible to register the dynamic translation.\nIf the dynamic translations have been registered, then the error can be suppressed using a `/* suppress-dynamic-translation-error: true */`\ncomment in the block of the `$translate` call. This will suppress all errors for the current block.\n\n## Register dynamic translations\n\nIf a dynamic translation is used, then the translation needs to be registered. To do so, the `i18n.registerTranslations({ translationId: defaultText })` function can be used. This might be helpful if the translation id is dynamically composed from a value of a domain object but the set of all possible combinations is limited. The registered translations are merged into the outputted json file. The function calls will be replaced by `(0);`. If UglifyJS is used for minification, then those calls will be removed entirely.\n\nAn alternative is `i18n.registerTranslation(translationId, defaultText?)`. This function is intended to be used when the translation id's are known in the javascript code but not known in the html file. Following an example where the title is dynamically set, depending if it is a new item or an existing one:\n\n```html\n\u003ch2 translate suppress-dynamic-translation-error\u003e{{editCtrl.title}}\u003c/h2\u003e\n```\n\nThe controller defines the id of the translation to use:\n\n```js\nfunction EditController(user) {\n  // compiles to this.title = user.isNew() ? \"NEW_USER\" : \"EDIT_USER\";\n  this.title = user.isNew()\n    ? i18n.registerTranslation(\"NEW_USER\", \"New user\")\n    : i18n.registerTranslation(\"EDIT_USER\", \"Edit user\");\n}\n```\n\nThe call to `i18n.registerTranslation` registers the translation id with the default text (optional). The result of the function is the id of the translation to use. This makes it possible to register translations inplace. Calls to `i18n.registerTranslation` compile to the passed in translation id (the function is not evaluated at runtime).\n\nThe `suppress-dynamic-translation-error` attribute can be defined on any element and will suppress any errors from the plugin for the attributed element and all it's child elements. This attribute is removed for non debugging builds.\n\n## API\n\n**`i18n.registerTranslation(translationId: string, defaultText?: string): string`**\n\nRegisters a translation with the given translation id and default text. If the default text is absent, then the translation id is used as default text.\n\nReturns the passed in translation id. Can be used to pass to the translate service or can be bound to a translate directive.\n\n**`i18n.registerTranslations({ translationId: defaultText } ): string[]`**\n\nRegisters a set of translations. Accepts a single object where the keys are used as translation ids and the value are used as default text.\n\nReturns an array containing the passed in translation ids. The array can be passed to the translate service.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichareiser%2Fwebpack-angular-translate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichareiser%2Fwebpack-angular-translate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichareiser%2Fwebpack-angular-translate/lists"}