Serving .json files from other folders not working - 'app/l10n/**/*' for 'gulp serve' or 'gulp serv:dist'

[milkshoes]

I have an issue where when running 'gulp serve' and 'gulp serve:dist' for allowing the browsersync / web server to deliver the correct localization files at both load and run-time. Below are the steps I have taken and haven't been able to get the custom folder and file(s) 'app/l10n/en_US.json' to be accessible. The specific goal I am trying to accomplish with this is to get the 'angular-translate' and '' working for gulp builds of all kinds

• Install bower components: https://github.com/angular-translate/angular-translate https://github.com/angular-translate/bower-angular-translate-loader-static-files
• Setup translation files: 'app/l10n/en_US.json' 'app/l10n/de_DE.json'
• Use example translations:

// 'app/l10n/en_US.json' - english file contents { "APP_TITLE": "Welcome to APP ", "APP_VERSION": "v0.1", "LEFTBAR_BTN_LABEL_1": "Dashboard", "LEFTBAR_BTN_LABEL_2": "Test Query Param", "LEFTBAR_BTN_LABEL_3": "Open With Modal State", "LEFTBAR_BTN_LABEL_4": "Frankie Testing", "LEFTBAR_BTN_LABEL_5": "Help Form Test", "LEFTBAR_BTN_LABEL_6": "Support Roles", "DASHBOARD_COMMENT_ALERT_LABEL": "New Comments!", "DASHBOARD_TASKS_ALERT_LABEL": "New Tasks!", "DASHBOARD_ORDERS_ALERT_LABEL": "New Orders!", "DASHBOARD_SUPPORT_ALERT_LABEL": "Support Tickets!", "DASHBOARD_ALERT_LABEL_VIEW_DETAILS": "View Details", "DASHBOARD_LABEL_NOTIFICATIONS_PANEL": "Notifications Panel" }

// 'app/l10n/de_DE.json' - german file contents { "APP_TITLE": "Willkommen bei APP", "APP_VERSION": "Dies ist ein Paragraph", "LEFTBAR_BTN_LABEL_1": "Armaturenbrett", "LEFTBAR_BTN_LABEL_2": "Testabfrage Param", "LEFTBAR_BTN_LABEL_3": "Öffnen mit modalen Zustand", "LEFTBAR_BTN_LABEL_4": "Frankie Testen", "LEFTBAR_BTN_LABEL_5": "Chirurg Formtest", "LEFTBAR_BTN_LABEL_6": "Krankenhaus Rollen", "DASHBOARD_COMMENT_ALERT_LABEL": "Neue Kommentare !", "DASHBOARD_TASKS_ALERT_LABEL": "Neue Aufgaben !", "DASHBOARD_ORDERS_ALERT_LABEL": "Neue Aufträge !", "DASHBOARD_SUPPORT_ALERT_LABEL": "Support-Tickets !", "DASHBOARD_ALERT_LABEL_VIEW_DETAILS": "Details anzeigen", "DASHBOARD_LABEL_NOTIFICATIONS_PANEL": "Benachrichtigungsfeld" }

• Use Angular Provider for resource location loading:

angular.module('app').config(function ($translateProvider) { $translateProvider.preferredLanguage('en_US'); $translateProvider.useStaticFilesLoader({ prefix: 'l10n/', suffix: '.json' }); });

• Use the translations somewhere in your app using directives like so:

  LEFTBAR_BTN_LABEL_1

  LEFTBAR_BTN_LABEL_2

• // build.js gulp.task('l10n', function () { return gulp.src('app/l10n/*/') .pipe(gulp.dest('dist/l10n')) // prod //.pipe(gulp.dest('.tmp/l10n')) // dev .pipe($.size()); });

gulp.task('build', ['html', 'partials', 'images', 'fonts', 'l10n']);

Any help with this is greatly appreciated!

[Swiip]

I just tried to serve .json files through browser sync and it's working.

Do you use the latest version of the generator (0.6) with the new directory structure or not? In the new directory structure, the app folder is no more the root of the web server, so the url of your files should contains the app/ prefix.

Have you tried to manually request your json files from your browser without angular translate to check if it's working?

[milkshoes]

I do have the latest (0.6) version and tried even with a brand new generator install / dir structure with the exact same result of not being able to access the .json file via the browser sync. At first I thought it might be a ui-router issue, but since it works for the dist version without the server I ruled ui-router out. I am on windows 8, with brand new generator using an 'l10n' folder with two .json files. Not sure if there is a file filter or proxy issue with browser sync?

[milkshoes]

I even tried various versions of the default main partial with a link to test a reference like so:

<p><a class="btn btn-lg btn-success" ng-href="l10n/en_US.json" target="_self">Splendid!</a></p>

but no luck either way. However, when i use a server like instant on the dist directory it works everytime as expected. Really strange.

[milkshoes]

I triple confirmed that this works when not using 'browser sync' but 'npm instant' instead on the built 'dist' directory. It's as if the 'browser sync' server is redirecting or prohibiting the file reference when using 'gulp serve' and 'gulp serve:dist'. ui-router in dist works as mentioned in 'dist' for urls and files successfully. I am curious if you have actually tried angular-translate to work via static file?

however this works for me every single time with 'npm instant'

 <p><a class="btn btn-lg btn-success" ng-href="l10n/en_US.json" target="_self">Splendid!</a></p>

[milkshoes]

Ok I finally got it working with your included 'browser sync' and can explain what I did to allow the .json files to work and be accessible via 'angular-translate' and any link reference etc...

In the file 'gulp/server.js' i added a new |json) static file extension to the proxyMiddleware() function like so:

    /* proxyMiddleware forwards static file requests to BrowserSync server
       and forwards dynamic requests to your real backend */
    function proxyMiddleware(req, res, next) {
      if (/\.(html|css|js|png|jpg|jpeg|gif|ico|xml|rss|txt|eot|svg|ttf|woff|json)(\?((r|v|rel|rev)=[\-\.\w]*)?)?$/.test(req.url)) {
        next();
      } else {
        proxy.web(req, res);
      }
    }

Notice the new addition of |json) extension added to end of the regex file extensions. after this and the new gulp task displayed below for dist, everything for localization now works in every server mode and build.

Here is my specific gulp task in for my localization folder 'l10n' in case anyone else is interested. It's a real basic copy operation and nothing fancy but maybe helpful still as a reference in this context of your generator setup for localization assets.

   gulp.task('l10n', function () {
      return gulp.src('app/l10n/**/*')
        .pipe(gulp.dest('dist/l10n')) // prod / dist build
        .pipe($.size());
    });

I have to thank you again for your time and patience. I am contributing to you again for all your work and time. What you have here is worth so much because of all the time you save people, and not to mention the education you give others by providing a really nice setup to study and extend from.

You are very much appreciated Matthieu! Thanks :)

[Swiip]

There is still something strange, the proxy has been moved to a new file called gulp/proxy.js and is deactivated by default in the version 0.6. You should not have the proxyMidleware in the gulp/server.js.

I've done this exactly to avoid proxy rules problems :p

[zckrs]

I add a JSON file src/app/l10n/test.json and I success fetch with URL: http://localhost:3001/app/l10n/test.json

[Swiip]

Yes, I think it's because de the proxy is disabled, if you activate it, as the json extension is not in the static regexp filter, it will be redirected into the proxy...

[zckrs]

@milkshoes enable the proxy ?

[milkshoes]

Now based on what your comments I'm wondering if i ever tested the latest (0.6) version. I downloaded it yesterday to a new folder and tested, but now I'm thinking I was still on an older version or something, I'll do more research to make sure. I def did not enable the proxy. I have a feeling I'm using an older version and maybe I did not actually update the "generator" on it's own. Testing again now.

[milkshoes]

Yep, I've been running on an older version this whole time. Thanks for all your comments. Helped me determine this was the case.

[zckrs]

No problems [^__^]"