In order to use translations in my JavaScript files I implemented the willdurand/BazingaJsTranslationBundle. I exactly followed the repository documentation:
I installed the bundle
composer require "willdurand/js-translation-bundle:@stable"
I registred the new bundle
// ...
new Bazinga\Bundle\JsTranslationBundle\BazingaJsTranslationBundle(),
I set up the routes
# app/config/routing.yml
_bazinga_jstranslation:
resource: "@BazingaJsTranslationBundle/Resources/config/routing/routing.yml"
I added the locale to my <html> tag
<html lang="{{ app.request.locale }}">
I added three JavaScript files
<script type="text/javascript" src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script type="text/javascript" src="{{ url('bazinga_jstranslation_js', { 'domain': 'MyBundle' }) }}"></script>
<script type="text/javascript" src="{{ url('bazinga_jstranslation_js', { 'domain': 'validators' }) }}"></script>
... where the first line calls the translator file from the bundle, the second line include the translation elements from my bundle and the third line calls the validator elements.
I dumped the translation files
php app/console bazinga:js-translation:dump
And I include some translated elements in my code
Translator.trans('key', { "foo" : "bar" }, 'MyBundle');
The curious thing: Everything works fine. But when I logout and login, instead of routing me to my regular start page, I get routed to the validator route (http://my.domain.tld/translations/validators) and the content of that file is shown:
(function (Translator) {
Translator.fallback = 'de';
Translator.defaultDomain = 'MyBundle';
// de
Translator.add("This value should be false.", "Dieser Wert sollte false sein.", "validators", "de");
// ...
})(Translator);
Now what is wrong here? I don't think that I misconfigured the bundle. So is this an actual bug of the bundle, or did I possibly misconfigure the bundle?
After I removed this line
<script type="text/javascript" src="{{ url('bazinga_jstranslation_js', { 'domain': 'validators' }) }}"></script>
I get the same error but instead of being routed to http://my.domain.tld/translations/validators I'm being routed to http://my.domain.tld/translations/MyBundle and I'm being shown its contents.
This was a security problem: The dumped JS (and JSON) translation files are located in the /web/js/translations folder and therefore should be excluded by the firewall. But they're actually routed via /translations/. So I had to add the translations path in the according security.firewalls.dev.pattern setting:
# security.yml
security:
...
firewalls:
dev:
pattern: ^/(_profiler|_wdt|css|js|translations)
security: false
Note, that this not just applies for the dev environment, but also for test and prod environments, because
the name
devfor the firewall is because it was meant to cover the profiler and the web debug toolbar initially. It was then extended to cover assets as well without being renamed in the standard edition.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With