Magento2 translating Javascript (KO) template text

So I was finally able to figure out the problem.

Seems that the JS template translation are read from js-translation.json which is generated during setup:static-content:deploy execution. In order to populate data in this file a new language package has to be created for the project.

So instead of adding the CSV at the theme level like app/design/<area>/<vendor>/<theme-name>/i18n/xx_XX.csv we need to add it in the language package.

To create a new Language Package first from project document root we will need to create the following directories:

mkdir -p app/i18n/<project-name>/<xx_xx> 

Important: USE lowercase DIRECTORY NAMES ONLY camcelcased folder names will not work

Then change directory to the newly created folders:

cd app/i18n/<project-name>/<xx_xx> 

Now you can create a composer.json (optional) file with the following content:

{ "name": "<project-name>/<xx_xx>", "description": "<sample description>", //Ex:English (United States) language "version": "<version-number>", //100.0.1 "license": [ "OSL-3.0", "AFL-3.0" ], "require": { "magento/framework": "100.0.*" }, "type": "magento2-language", "autoload": { "files": [ "registration.php" ] } } 

Next create we need a language.xml file with the following contents:

<language xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/Language/package.xsd"> <code>xx_XX</code> <!-- example: <code>en_US</code> --> <vendor><project-name></vendor> <package><xx_xx></package> <!-- example: <package>en_us</package> --> </language> 

After than registration.php containing the following content is needed:

\Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::LANGUAGE, '<project-name>_<xx_xx>', __DIR__ ); 

Now we can create a our translation CSV. If you already have one inside the theme folder something like app/design/<area>/<vendor>/<theme-name>/i18n/xx_XX.csv you can just move it to app/i18n/<project-name>/<xx_xx>/xx_XX.csv

Now from the project document root we need to run these commands:

find pub/static -name js-translation.json -exec rm -rf {} \; 

We need to delete the js-translation.json which has been already created before running the setup:static-content:deploy

Now we run static content deploy:

php bin/magento setup:static-content:deploy <xx_XX> 

Once thats done we clear the cache:

php bin/magento cache:clean php bin/magento cache:flush 

We can verify if the translation files for JS template has been generated by finding all the js-translation.json inside the pub/static folder.

find pub/static -name js-translation.json 

This will provide the list of all the translation files generated for JS templates.

Reference:

1. Magento DevDocs
2. Related Github Issue