Relative basepath not working

[nick13jaremek]

Hi there,

I have configured this directive in my project based on the README example, as follows:

(function() {
    'use strict';

    angular
        .module('localization', ['ngLocalize', 'ngLocalize.Config', 'ngLocalize.InstalledLanguages'])
        .value('localeConf', {
            basePath: './languages',
            defaultLocale: 'en-US',
            sharedDictionary: 'common',
            fileExtension: '.lang.json',
            persistSelection: true,
            cookieName: 'COOKIE_LOCALE_LANG',
            observableAttrs: new RegExp('^data-(?!ng-|i18n)'),
            delimiter: '::'
        })
        .value('localeSupported', [
            'en-US',
            'es-ES'
        ])
        .value('localeFallbacks', {
          'en': 'en-US',
          'es': 'es-ES'
      });
})();

This module gets loaded in my Angular application correctly, and its file is located in a folder called localization.module.js among another folder called languageswhere I stored the en-US and es-ES lang.jsonfiles.

That is:

-localization
   |- languages
     |-en-US
       |-common.lang.json
     |-es-ES
       |-common.lang.json
   |- localization.module.js

However, using the relative path as shown above raises a %%KEY_NOT_FOUND%% value when using the i18n filter in an HTML template.

Do relative paths need to be specified in some alternative way? Or perhaps do I have to override some other setting?

Thanks in advance.

[doshprompt]

could you try changing the basePath config to the following:

basePath: 'localization/languages'

[nick13jaremek]

@doshprompt Unfortunately, that does not work either. Using an absolute path starting from the project root works, but I was wondering about the relative path counterpart.

[doshprompt]

@nick13jaremek interesting, I will take a look and get back to you, it might be a bug :)

[bretkikehara]

@nick13jaremek By any chance is the basePath relative to HTML path or to the javascript dist files?

Also, please include the minimum viable template and the absolute path from your project root.

[nick13jaremek]

@bretkikehara Sure, let me illustrate the directory structure of my project in more detail for my relative basepath attempt.

project-root
|-src
  |-client
    |-app
      |-app.module.js
      |-templates
        -main.html
      |-blocks
        |-localization
          |-languages
            |-en-US
              |-common.lang.json
          |-localization.module.js

My app.module.js is the root JS file that loads the rest of the Angular modules (directives, services, etc...).

Then, in my main.html file, I have the following:

<div>
   <label for="businessEmail">{{ 'common.emailLabel' | i18n }}</label>
   <input name="emailField" type="email" id="emailAddress" placeholder="{{ 'common.emailLabelPlaceHolder' | i18n }}" ng-model="vm.email" required />
</div>

When this main.htmlview loads I see in the console the labels %%KEY_NOT_FOUND%% instead of the correct localized strings for both, the label and the textfield.

Is this information enough for you to investigate the matter in a better way? Let me know if there is any additional info you need.

[bretkikehara]

The templates look good.

Please ensure that the basePath is relative to your index.html.

Assume that you serve from app the folder with url http://localhost/app/#/. The basePath for the absolute URL is http://localhost/app/blocks/localization/languages, so bathPath for the relative URL is blocks/localization/languages.

[nick13jaremek]

@bretkikehara You are right!

I changed the relative basepath to ./app/blocks/localization/languages (since my index.html file is located at the same level as the app folder) and now it works!

Thank you very much!