Jehy Jehy - 8 months ago 49
Javascript Question

Extracting strings from JS file with gulp-angular-gettext does not work

I use angular-gettext-tools with @gabegorelick 's gulp-angular-gettext. Everyhing is okay with html files, but I fail to extract strings from js file. I tried both gettextCatalog.getString and gettext functions - together and separately - nothing worked.

My code for extraction (smth.js file) looks like this:

$scope.openCreateOfferPopup = function($event, buttonState) {
if (buttonState) {
var params;
if (!$rootScope.dashboard.spots || $rootScope.dashboard.spots.length === 0) {
params = {
title: 'Spots needed',
content: gettextCatalog.getString(gettext("Oops! You need to add your spot before creating an offer!"))+
'<br/>'+gettextCatalog.getString(gettext("Please, click on Create new spot button")),
buttons: [{
text: gettextCatalog.getString(gettext("Create spot")),
href: '',
'class': '',
ngClick: 'openCreateSpotPopup($event)',
ngController: 'SpotsController'
}, {
text: gettextCatalog.getString(gettext("cancel")),
href: '#',
'class': 'b-close'
DialogService.makeDialog(params, $scope);

My gulp task looks like this:

import gulp from 'gulp';
import gettext from 'gulp-angular-gettext';
//import debug from 'gulp-debug';

gulp.task('pot', function () {
return gulp.src(['src/app/**/*.html','src/app/**/*.js',
//.pipe(debug({title: 'files to translate:'}))
.pipe(gettext.extract('template.pot', {
// options to pass to angular-gettext-tools...

I am pretty sure that js file is passed to aangular-gettext-tools - I used gulp-debug to verify it.

There are no error messages. Everything is being extracted from html, but no entries from JavaScript.

Could you point me to the source of this problem?

I have gulp-angular-gettext@2.1.0 using angular-gettext-tools@2.1.13 and gulp 4.0.0-alpha.2


Okay, I found the culprit. Angular-gettext-tools don't work with javascript ES7. We had a piece of code:

async function loadTypes() {
  if ($rootScope.dashboard.types) return;

  const { categories } = await Api.offerTypes();
  $rootScope.dashboard.types = categories;

And it siliently died on async function. Possibly, old version of espree package from angular-gettext-tools is to blame.

I requested compatibility with ES7 and printing some debug info (to know that files could not be translated due to some error) here:

Right now we are going to use babel to downgrade our javascript to processable version and use it for extraction.

Update to this question from official github:

espree doesn't support it so there's probably nothing we can do. When async/await is standardized, it will be added to espree, and we should support it without any changes. Until then, use a transpiler like babel before calling angular-gettext.