Thanks for your last update, there is still a little bug though :
When safeMode is set to true, param nullEmpty is ignored and has always value false.

Any idea ?

In our project sometimes we need to generate translation keys by concatenating strings.
If we don't use the option 'safeMode', those keys are removed.
The problem is that if we use it, those keys remains untouched but the unused keys (generated by typos or just not used) are not removed.

It would be really nice to have an option to avoid the removal of the 'unused' keys from a specific module, while keeping the behavior for the remaining modules untouched.

There is incorrect parsing in the case of interpolating the translation ID inside a directive. The following line is pulled into the language file like so:

File.jade:

span(translate="{{$ctrl.cardData.comparisonString}}") {{$ctrl.cardData.comparisonString}}

en.json:

"{{$ctrl": {
    "cardData": {
        "comparisonString}}": ""
     }
}

When I extract all translation keys with this plugin, I want sort keys.

This:

{
   "ADD": "Add",
   "CANCEL": "Cancel",
   "DELETE": "Delete"
}

Instead of this:

{
   "CANCEL": "Cancel",
   "ADD": "Add",
   "DELETE": "Delete"
}

Hi, i'm using grunt-angular-translate and discovered an issue :
When using '>' character in angular expression in a div with translate directive, the string inside my div isn't extracted.

See you

For the moment only the {{ }} syntax is supported for angular templates. If user had set some custom symbols like [[ ]] it will not detect them.

<!-- will work --> 
<h1 translate="TEST"></h1>
<h1>{{ 'TEST' | translate }}</h1>
<!-- will not work -->
<h1>[[ 'TEST' | translate ]]</h1>

I'm ready to work on a pull-request to add this custom support.

I was thinking of an option in the i18nextract configuration:

i18nextract: {
  template: {
    startSymbol: "[[" // default value: {{
    endSymbol: "]]"   // default value: }} 
  }
}

Namespaces are supported by grunt-angular-translate, but not the https://angular-translate.github.io/docs/#/api/pascalprecht.translate.directive:translateNamespace directive. The translate-namespace directive allows a developer to avoid repeating the namespace in a view by extracting it to a parent element.

That is, given the following example:

    <div translate-namespace="CONTENT">
      <div translate-namespace=".HEADERS">
          <h3 translate id="example_title">.TITLE</h3>
          <h3 translate id="example_welcome">.WELCOME</h3>
      </div>
      <span translate>COMMON.FIRST_LINE</span>
    </div>

Expected:

{
    "CONTENT": {
        "HEADERS": {
            "TITLE": "",
            "WELCOME": ""
        }
    }
    "COMMON": {
        "FIRST_LINE": ""
    }
}

Actual:

{
    "0": {
        "TITLE": "",
        "WELCOME": ""
    }
    "COMMON": {
        "FIRST_LINE": ""
    }
}

This is question by @mobinni -- reference by angular-translate/angular-translate#1093

It would be nice to have the possibility to statically translate Keys in the HTML. An angular-translate build task for Grunt and Gulp if you may. If you need a reference as to what Im talking about:
https://mobinni.io/2015/06/21/quickfire-compiling-angularjs-with-static-translations/
I think so after a short glance at the library. Quick question, does it search for all the translations in HTML

for instance and generate static HTML, for instance:

locales
- nl.json
- en.json

After task

dist
     - views (en views)
     - nl
        - views (nl views)

This so you have base routes to certain translated views?

Hi, I have configured my grunt file like so:

    i18nextract: {
      options: {
        src: [ '<%= yeoman.app %>/**/*.html', '<%= yeoman.app %>/**/*.js' ],
        lang: ['en_GB', 'de_DE'],
        defaultLang: 'de_DE',
        prefix: 'test_',
        suffix: '.json',
        dest: '<%= yeoman.app %>/lang'
      }
    }

And registered the following task:

  grunt.registerTask('extract-strings', [
    'i18nextract'
  ]);

When I run grunt extract-strings grunt reports:

Done, without errors.

But there is no output to my chosen dest. The directory exists and is writable.

Possibly a bug?

Node v0.10.25
Grunt v0.4.4
OSX 10.9.2 (Build: 13C64)

Hi.

I'm using ng-boilerplate and ui-router.
Page title is specified in state's data object on configuration phase when $translate service does not available yet. So I propose to add ability to mark string for extraction using js comment, something like this:

.config(function config ($stateProvider) {
  $stateProvider.state('home', {
    url: '/home',
    data: {
      pageTitle: /* i18nextract */'Drive'
    }
  });
})

This also could be usefull in some other cases.

Hi,

I have a project with lots of custom directives. Some of them are creating an isolate scope. As the attribute directive "translate" also requests an isolate scope, I cannot use it on my custom directives. I would like to use an entity directive as such:

<custom-directive><translate>TRANSLATION_ID</translate></custom-directive>

This works fine, but is not in the list of recognized patterns. Would it be possible to support this as well?

Thanks,
Tobias.

When I set 'namespace': true it seems that other params like safeMode or nullEmpty are ignored.

Can you take a look at that ?
Thanks ;-)

Hi,

I'm trying to use your module but I can't manage to find the right configuration. Maybe a example of a valid grunt configuration would be great.

In my Gruntfile my configuration is

i18nextract: {
      src:     ['src/app/**/*.tpl.html'],
      suffix:  '.json',
      jsonSrc: [ 'config/*.json' ],
      lang:    ['fr_FR'],
      dest:    'src/assets/i18n',
      defautLang: 'en_US'
    }

with a simple grunt.registerTask('extract', ['i18nextract']);

I'm getting this error when I try running the task:

Warning: Property 'fail' of object #<Object> is not a function Use --force to continue.

A little help would be great :) Thanks!

In my project I would like grunt-angular-translate to put the key as the translation for all undefined strings in all languages, not just the default language. As far as I understand it, this is not currently possible.
Could an option be added to enable this?

I find my self constantly using translation dependent on some condition like:
<h3 translate="{{edit ? 'Update' : 'New user'}}" ></h3>

grunt-angular-translate wont be smart about this and extract one single key:
"{{edit ? 'Update' : 'New user'}}"

Is there some way or the possibility improving dealing with this use case ?

Something like http://www.regexr.com/3b7ph

With the patch from PR #69 the code snippet below will generate both the false translation keys active and non-active in addition to the correct one STATE_LABEL.

<a ng-class=" state==3 ? 'active': 'non-active'">
    <span>3</span> {{'STATE_LABEL' | translate}}
</a>

If I disable the HtmlFilterTernary regex (by commenting it out in tasks/angular-translate.js the extraction works as expected (only extracting STATE_LABEL).

Hi Benjamin,

There been quite a few commits since last release (0.3).

Would you mind releasing a new version?

If I have the data-translate attribute in my template and use single quotes instead of double quotes, it is not picked up by the extractor. Using double quotes works as expected.

Thanks!

With this html code:

<a ng-if="menuItem.enabled && !menuItem.state && menuItem.url" ng-href="{{ menuItem.url }}" target="_blank" title="{{ menuItem.label | translate }}">{{ menuItem.label | translate }}</a>

The result is (with namespacing, but it doesn't matter)

{
    "{{ menuItem": {
        "label | translate }}": ""
    },
}

I believe this never should fall into parser regex (use only 'KEY' | translate), but above everything else, I've also used delimiter [[ ]] and it still generated this one (delimiter works for other standard extractions).

This does nothing, processes no files, causes no errors:

  i18nextract: {
    options: {
      prefix: 'auto_',
      suffix: '.json',
      src: ['app/assets/tpl/login.html'],
      lang: ['en', 'ar', 'de'],
      dest: 'app/assets/i18n/translations',
      defaultLang: "en_US"
    }
  }

... and this works! :

  i18nextract: {
    all_lang_options: {
      prefix: 'auto_',
      suffix: '.json',
      src: ['app/assets/tpl/login.html'],
      lang: ['en', 'ar', 'de'],
      dest: 'app/assets/i18n/translations',
      defaultLang: "en"
    }
  }

At the moment, keys order is unpredictable and this leads to problems during merge.
E.g. when developing in feature branch we add some translations and then merge this branch to production branch. Keys order could became different in feature branch and merge almost always became non-trivial and couldn't be done automatically.
I completely understand that keys order in Javascript object is unpredictable but if we can somehow preserve this order e.g. by sorting keys alphabetically (this needs manual JSON creation I think) this will ease merging.

If you define several languages after executing the task the languages not set as default will include "" (empty string) as default value, this cause to show an empty string when translating.

If you comment the line by default or set it null (need to test) will use fallback language, which is best than nothing.

Thanks.

Hi,

I have just now finished to create my first complete translation file for a new project. Just for the record - your tool works like a charm. Thanks for getting this done.

There is one tweak, though, which I would like to discuss - after doing the translation I noticed that I have the same translations under different ids (with namespaces). To simplify the maintenance of the file, I would like to use the links function of angular-translate by introducing "virtual" ids which I link from the original translation id. Here is an example. Having the following two identical translations:

{
    "NAMESPACE1": {
        "ID1": "This is just a text"
    },
    "NAMESPACE2": {
        "ID2": "This is just a text"
    }
}

I would like to do the following:

{
    "COMMON": {
        "ID1_2": "This is just a text"
    },
    "NAMESPACE1": {
        "ID1": "@:COMMON.ID_1_2"
    },
    "NAMESPACE2": {
        "ID2": "@:COMMON.ID_1_2"
    }
}

This way, I am flexible enough to adjust the texts in either namespace 1 or 2 if I need to, or just manage the one text in the common namespace.

Unfortunately, at the moment, running "grunt translate" will delete the "virtual" translation as it does not find it in the code. Is there any feature already that I can trigger to not have these translations deleted? Or would it be possible to identify the virtual translations when they are referenced and not remove them if there is at least one link?

Thanks,
Tobias.

I'm just playing with it and my first examples are with namespaces, like:

<span translate>MENU.SALES</span>

But on language files I found:

"MENU.SALES": "MENU.SALES",

The current code works, but it's not what I expect.

Add regex to parse translate attributes

// Use to match <p translate="TRANSLATE"></p>
attributeRegex  = /<[^>]*translate="(.*)"[^>]*>[^<]*<\/[^>]*>/gi,

It will be useful if task can be extract strings into .po-file

Single file:

src:    ['**/*.html', '**/*.js'],
dest:   'project/**/*.po',
format: '.po'

Modular project:

src:    ['**/*.html', '**/*.js'],
dest:   'project/*/locals/',
format: '.po'

project
|- module1
   |- locals
      |-en.po
      |-fr.po
|- module2
   |- locals
      |-en.po
      |-fr.po

Hi,
at first I have to thank for this amazing work!

Now to my issue, I'm using this with grunt watch (so angular translate extractor is called each time files are updated) everything works fine when there are no files with translations yet - default language is used as key and translations of default language are copies of keys.

But when files with translations exists and grunt watch is running, new keys are added to all languages correctly but default language has empty translations (should use keys as translations...)

here is my config:

i18nextract: {
            default_options: {
                prefix:   'locale-',
                suffix:   '.json',
                src:      ['src/**/*.js', 'src/**/*.html','],
                lang:     ['cs', 'en'],
                dest:     'locale',
                defaultLang: 'cs'
            }
}

and i18nextract:default_options is called in grunt watch.

What am I doing wrong?
Thanks

Will extract only 'Click here' key

I think this is a Bug. Consider the following code:

<label title="{{'MY_TRANS_KEY' | translate}}">{{name}}</label>

It creates the following json translation file:

{
    "MY_TRANS_KEY": "",
    "{{name}}": ""
}

{{name}} shouldn't be translated. Just MY_TRANS_KEY.

Text output when no translation ids:

Process en : app/i18n/en.json
Create file: app/i18n/en.json (en is the default language)
Statistics : null: 0 (NaN%) / Updated: 0 / Deleted: 0 / New: 0

Hey @firehist !

How about update the readme of this repo to give all information a user need. Once this is done, I would introduce a new section in the angular-translate docs for sth. like "Additional Tools" or so, where I would like to promote grunt-angular-translate.

I am trying to migrate to Gulp.js and could not find a gulp plugin for extracting angular-translate.
I guess the best way to create a gulp plugin for angular-translate would be to first modulize the extractor out from the grunt task and make it as a standalone repo, then create a gulp plugin that uses the extractor as a dependency.

Any thoughts?

cf #61 (comment)

Hey there's one functionality in angular-translate that will cause to force to not drop strings without direct presence in code, for example:

If I want to translate some MySQL enum or some code constants, one possibility is to translate it like this:

<span translate>OPTIONS.INTERVAL.{{ data.params.interval.type }}</span>

So I will have some options not present in code. For example I will have:

• OPTIONS.INTERVAL.last24hours
• OPTIONS.INTERVAL.last2days
• ...

The first bug is to found this in translate strings:

"OPTIONS.INTERVAL.{{ data.params.interval.type }}": "OPTIONS.INTERVAL.{{ data.params.interval.type }}",

And second thing, if I define the custom defined options that are not present in code, I will need to always use safeMode option, so I think it's better to enable it by default.

Thoughts?

i18nextract task will not extract translation keys from $translate service in angular-translate 2.1.0

The service is now ASYNC and can take an array of keys.

$translate(['HEADLINE', 'PARAGRAPH', 'NAMESPACE.PARAGRAPH']).then(function (translations) {
    $scope.headline = translations.HEADLINE;
    $scope.paragraph = translations.PARAGRAPH;
    $scope.namespaced_paragraph = translations['NAMESPACE.PARAGRAPH'];
  });

Keys are being removed from the language files.

<span translate="TRANSLATED_TEXT"></span>

...produces no output in the JSON.

Output is only produced if there is also an angular-plural-extract directive.

Grunt task detect inner text when using "translate-cloak" directive.

Example

<h1 translate-cloak>{{'TEAM_TITLE' | translate}}</h1>

produces wrong output:

{
    "TEAM_TITLE": "",
    "{{'TEAM_TITLE' | translate}}": "",
}

While this line:

 <h1>{{'TEAM_TITLE' | translate}}</h1>

produces correctly:

{
    "TEAM_TITLE": "",
}

It should be cool in po output to have more information about context.

• Filename
• Line number
• Line
• specific description coming from source code

Hi,
I saw at master that I can use an object for customRegex. I was happy, because I searched a way to add prefix to some translation keys:

$stateProvider.state( /* i18nextract */ 'stateName', {
  ...
}

stateName should save as "navigation.state.statename".

So I added the following to the i18nextract options:

i18nextract: {
  default_options: {
    ...
    namespace: true,
    customRegex: {
      '\\/\\*\\s*i18nextract navigation-state\\s*\\*\\/\\s\'((?:\\\\.|[^\'\\\\])*)\': function(key) {
        return 'navigation.state.' + key;
      }
    }
  }
}

But that doesn't work. So I searched at the src of grunt-angular-translate, what I did wrong. So I found out, that this.data.customRegex is an empty object, when an object is set as customRegex.

I am not familiar with grunt task developing, so I can't find the failure. What do I do wrong?

When is it planed to build a tag with that new feature?

Thank you

edit:
I use windows 10,
node 4.4.0
grunt 0.4.5

Hi,

i´m using the angular-translate partialLoader for my project with the following file structure:

i18n
-- de
-- -- app.json
-- -- global.json
-- en
-- -- app.json
-- -- global.json

In my code the placeholder have the following naming:
{{ 'app.title' | translate }} or {{ 'global.sitename' | translate }}

I put all keys with the first notation in the representing json files, e.g. app.title is a translation entry of the file app.json:

en:
app.json

{
    "app": {
        "title": "My title",
        "subname": "another translation"
    }
}

global.json

{
    "global": {
        "sitename": "My sitename"
    }
}

de:
app.json

{
    "app": {
        "title": "Mein Titel",
        "subname": "eine weitere Übersetzung"
    }
}

global.json

{
    "global": {
        "sitename": "Mein Seitenname"
    }
}

And now the question: Is it possible with grunt-angular-translate to extract the first key of the naming, e.g. app.title.[...] and write (or update) the translation in the corresponding file (here app.json)? If there is no file with this name, create it. How is it possible?

When translation IDs are supplied in markup in the form:

<ANY translate="TRANSLATION_ID">Default translation</ANY>

The translation files are generated like this:

"Default translation":"Default translation"

Instead of:

"TRANSLATION_ID":"Default translation"

Can support be added for this?

Hi, when parsing html with inserted php code, the parser get this result:

example:
Parsed file:
(script tag with contents: )

data-require="[email protected]" data-semver="1.3.10" src="

Get json:

{
"">": "",
}

Its because of translate word?
Maybe some regexp can be mofified?
Thank you.

Regex does not handle variables

{{ 'TRANSLATION_ID' | translate:'{ username: "PascalPrecht" }' }}

this basic regex will work (not fully tested):

filterRegex = /{{\s*['"]([^\']*)['"]\s*\|\s*translate(:.*?)?\s*}}/gi,

also need to change condition for regex since additional sub-expression returned

if (r.length >= 2){ ... }

Hi!

We would like i18nextract to not only pull the translation keys from the templates but also the default translation.

Example:

<label translate translate-detault="Password">login.common.PASSWORD</label>

Extract:

{
  "login": {
    "common": {
      "PASSWORD": "Password"
    }
  }
}

We upload the extract to the translation-server where the translation-team can do their work.
The example is very simple but of course there are translation keys which represent a whole paragraph and the default translation would be very helpful.

Any thoughts on this?

Or is there already a way to do this?

With angular 2 going the component oriented approach to building applications I would like to have the possibility to extract translation keys per component so I end up with a file set that is loadable with the partial loader as documented in the angular-translate docs here.

The end result would be one json-file per component. A component may be contained in a folder and consists of an template (html, svg) file and a code file (ts, js, cs). The same rule could apply for services and filter/pipes that use the $translate service. One code file -> corresponding json-file.

Hi,

I have troubles with the following regular expression:

HtmlDirective: '<[^>]*translate[^{>]*>([^<]*)<\/[^>]*>',

When I have code like the following in my project, it will add wrong elements into the translation file:

<a href ng-click="somefunction()" title="{{ 'TRANSLATION_ID' | translate }}">{{some.object.variable}}</a>

This ends up in my translation file as this:

    "{{some": {
        "object": {
            "variable}}": ""
        }
    }

It seems that, after finding the "translate" text, it starts looking for the ">" character of the HTML tag and accepts anything that is not { and >. So, in my case it skips the ' }}"' and eventually hits ">" character and then takes anything of the text node {{some.object.variable}}.

Any chance, the reason is that the { in the regular expression should have been a }?

Thanks,
Tobias.

Hi,

I have some issue to extract some keys with angular ng-repeat ...
I use angular ng-repeat with an array of string (['en','fr',...]

<select ng-model="form.language">
    <option ng-repeat="language in languages" value="{{language}}"
        {{"LANG_"+language|translate}}
    </option>
</select>

I want to have something like :
LANG_FR:""
LANG_EN:""
...

But I have only one key ...
LANG_:""

Do you have any solution to make grunt extract all the KEYS ?

I found my self constantly using translation dependent on some condition like:
<h3 translate="{{edit ? 'Update' : 'New user'}}" ></h3>

grunt-angular-translate wont be smart about this and extract one single key:
"{{edit ? 'Update' : 'New user'}}"

Is there some way or the possibility improving dealing with this use case ?

Something like http://www.regexr.com/3b7ph

Hi,

I have an angular app that needs to have multiple language translations. I have setup angular translate task as follows. What I want to create is a different language file which I load later using useStaticFilesLoader;

i18nextract: {
          default_options: {
            jsonSrc:  ['<%= srcdir %>/i18n/*.json'],
            src: [ '<%= src.js %>', '<%= src.html %>'],
            lang:     ['ro', 'en', 'fr', 'pl', 'de'],
            dest:     '<%= distdir %>/i18n'
          }
        }

In srcdir there are multiple language files with original translations, to use them as a source:
Unfortunately, the result doesn't load the translation

Also tried passing source: ['<%= srcdir %>/i18n/*.json'], and jsonSrc: {"ro":'<%= srcdir %>/i18n/ro.json', "de":'<%= srcdir %>/i18n/de.json'}, without any luck.

Is there an option I'm missing?