localization - i18n - module not found error can t resolve angular

Angularjs y $ locale

Question

¿Puedo configurar $ locale para alguna aplicación manualmente?

¿Es posible que la única manera de apoyar a los locales es incluir el archivo de localización de la biblioteca angular para la configuración regional actual? ¿Qué pasa si hay múltiples culturas? En ese caso, ¿tengo que cargar archivos de localización dinámicamente? ¿Qué me estoy perdiendo?

Answer 1

Angular proporciona un gran soporte para i18n / l10n. Puedes encontrar la guía https://docs.angularjs.org/guide/i18n

Los requisitos para nuestra aplicación determinan cómo podemos implementar este soporte.

1. Si nuestra aplicación requiere solo una configuración regional única o si los usuarios finales de nuestra aplicación pertenecen solo a una configuración regional en particular, entonces podemos restringir nuestro alcance de aplicación para i18n / l10n a solo esa configuración regional

Puede encontrar una buena explicación de cómo podemos lograr tales cosas en una de mis respuestas anteriores here .

2. Si queremos servir un componente, una directiva o una parte en particular para mostrar en algún otro formato o configuración regional, entonces podemos ir a algunos componentes de directivas o incluso a un filtro para ese

Puede encontrar un ejemplo de violín para dicha implementación usando un filtro que se puede encontrar here

 function MyController($scope) {
$scope.property = {
price: 50000000.557
}
}
function toLocaleCurrencyFilter($filter) {
return function(amount, currencySymbol, fractionSize, locale) {
var returnValue = Number(parseFloat(amount)).toLocaleString(locale, {
minimumFractionDigits: parseInt(fractionSize),
maximumFractionDigits: parseInt(fractionSize),
});
returnValue = returnValue + " " + currencySymbol
return returnValue;
};
}
angular.module(''myApp'', [])
.controller(''MyController'', [''$scope'', MyController])
.filter(''toLocaleCurrency'', [''$filter'', toLocaleCurrencyFilter]);

3. Si queremos configuración regional dinámica, debe volver a cargar el navegador con la nueva configuración regional guardándola en el almacenamiento local para que surta efecto. puede usar la solución descrita en 1 con alguna naturaleza dinámica.

Answer 2

Construí un módulo angular que se ocupa de i18n. El soporte AngularJS para i18n es bastante primitivo, si quieres tener más control y también ser más flexible, consulta angular-translate - http://angular-translate.github.io/

Avísame, si puedo ayudar!

Answer 3

Encontré algo interesante. No es angular, pero es jquery, por lo que la integración debería estar bien. Voy a probar las actuaciones y volver con la información.

https://github.com/js-coder/x18n/wiki/Getting-started

https://github.com/js-coder/jQuery.x18n

Answer 4

Honestamente, el servicio $ locale en angular es bastante primitivo. Es realmente bueno, pero parece carecer de flexibilidad en esta área. El problema más importante es que incluso si cambia su configuración regional al volver a cargar dinámicamente el archivo de configuración regional adecuado, elementos como el filtro de fecha no sabrán que lo ha cambiado porque están registrando su información de configuración regional cuando están configurados. Por lo tanto, tiene un par de opciones actualmente: 1. Vuelva a cargar la página con la configuración regional seleccionada ... o 2. Escriba su propio proveedor de configuración regional y los filtros que lo utilizan.

Podría ser posible crear un servicio que cargue dinámicamente el archivo de script adecuado, reinicializar todos los filtros y servicios afectados, y luego actualizar las vistas, pero no estoy seguro de qué implica todo esto en este momento.

Answer 5

Incluyendo esta secuencia de comandos: https://github.com/lgalfaso/angular-dynamic-locale/blob/master/src/tmhDynamicLocale.js permite configurar las configuraciones regionales durante el tiempo de ejecución.

1. Descargue todas las configuraciones regionales que desee desde https://github.com/angular/angular.js/tree/master/src/ngLocale
2. Almacene las configuraciones regionales en un directorio en su servidor web, por ejemplo, /assets/js/locales/filename-LOCALE.js - note: lo que escriba como LOCALE en el nombre de archivo es importante - las configuraciones regionales necesarias se descargarán dinámicamente.
3. En su módulo, incluya tmhDynamicLocale como ''tmh.DynamicLocale'' por ejemplo var app = angular.module(''app'',[''tmh.DynamicLocale'']) ;
4. En su configuración, pase el proveedor, es decir, '' tmhDynamicLocaleProvider '' y establezca la ubicación de sus archivos de configuración regional, por ejemplo, tmhLocaleProvider.localeLocationPattern(''/assets/js/locales/angular-locale-{{locale}}.js''); {{locale}} se intercambiará por la configuración regional que establezca en tiempo de ejecución.
5. Para establecer la configuración regional en su aplicación, en app.run() , pase el servicio ''tmhDynamicLocale'' , por ejemplo, app.run([''tmhDynamicLocale'',function(tmhDynamicLocale){}]);
6. En su devolución de llamada, configure la configuración regional de esta manera, tmhDynamicLocale.set(''en-gb''); . Alternativamente, como tmhDynamicLocale es un servicio, puede establecer la configuración regional en diferentes lugares. Se permiten inyecciones de servicio, por ejemplo, controladores, aunque tenga en cuenta que los servicios son únicos y establecer la configuración regional en un controlador lo establecerá en la aplicación.

Ahora debería tener la configuración regional correcta en ejecución. Para obtener más información, utilice el tmhDynamicLocale README para tmhDynamicLocale : https://github.com/lgalfaso/angular-dynamic-locale/blob/master/README.md

Crédito: Lucas Mirelmann para tmhDynamicLocale .

Answer 6

Luché con los mismos problemas, leí todas las respuestas aquí e introduje i18n / l10n en mi proyecto. Estos son mis resultados:

• angular-translate ( http://angular-translate.github.io/ ) es una forma perfecta de localizar su contenido (cadenas personalizadas). Pero NO traduce la fecha, la moneda o los filtros numéricos de angular.
• Angular tiene un mecanismo incorporado para localizar la fecha, la moneda o el número de filtros. Las traducciones para configuraciones regionales compatibles se pueden encontrar aquí https://github.com/angular/angular.js/tree/master/src/ngLocale , la guía angular se encuentra en https://docs.angularjs.org/guide/i18n
• El problema con el mecanismo integrado de angular: ¡no es tan fácil cambiar el entorno local en tiempo de ejecución ! Aquí es donde entra en juego angular-dynamic-locale . Le permite cambiar el idioma en tiempo de ejecución con bastante facilidad.

Entonces la solución es usar ambos proyectos, angular-translate y angular-dynamic-locale .

Answer 7

Para cualquier persona que busque localización dinámica, angular-dynamic-locale hace un gran trabajo.

Answer 8

Si desea cargar la localización angularJS de su navegador, instale https://github.com/angular/bower-angular-i18n y angular-dynamic-locale en su proyecto.

Lea la documentación de cada biblioteca para instalar. Este es un ejemplo de mi proyecto iónico:

1. En mi index.html:

   ...
   <!-- angular-dynamic-locale-->
   <script src="lib/angular-dynamic-locale/tmhDynamicLocale.min.js"></script>
   ...

2. En mi app.js

   var app = angular.module(''project-name'', [''ionic'',..., ''tmh.dynamicLocale'']);
   ...
   // tmhDynamicLocaleProvider
   app.config(function(tmhDynamicLocaleProvider) {
   // override the default path (angular/i18n/angular-locale_{{locale}}.js) to the stored Angular i18n locale files
   tmhDynamicLocaleProvider.localeLocationPattern(''lib/angular-i18n/angular-locale_{{locale}}.js'');
   })
   ...
   app.run(function($rootScope, $ionicPlatform, ..., tmhDynamicLocale){
   // set locale for angular formats
   var inArray = function(needle, haystack) {
   var key = '''';
   for (key in haystack) {
   if (haystack[key] === needle) {
   return true;
   }
   }
   return false;
   };
   var preferredLanguage = navigator.language || navigator.browserLanguage || navigator.systemLanguage || navigator.userLanguage;
   if (typeof preferredLanguage === ''string'') {
   var code = preferredLanguage.substring(2, 0);
   if (inArray(code, PROPERTIES.LANGUAGES)) {
   tmhDynamicLocale.set(code);
   }
   }
   ...

Answer 9

Si está utilizando un paquete web y un texto mecanografiado, puede cargar su configuración regional dinámicamente.

 export const loadLocale = function(lng){
if(lng != ''en''){
require(''./angular-locale_'' + lng + ''.js'');
}
};

Answer 10

también puede usar el servicio de traducción para obtener la configuración regional del navegador y luego usarla para hacer lo que necesita. . . por ejemplo, en un ShortDatePipe:

 import { Pipe, PipeTransform} from ''@angular/core'';
import { formatDate } from ''@angular/common'';
import { TranslateService } from ''@ngx-translate/core'';
@Pipe({
name: ''shortDate''
})
export class ShortDatePipe implements PipeTransform {
constructor(private translateService: TranslateService) { }
transform(value: string): string {
var language: string = this.translateService.getBrowserCultureLang();
console.log(language);
return (value == "" || value == null) ? "" : formatDate(value, ''shortDate'', language);
}
}

Answer 11

Puede cargar la configuración regional que desee en localStorage y luego actualizar la página. Haga que el script a continuación cargue el archivo i18n que necesita. Cambiar la configuración regional sobre la marcha aún no es compatible.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
var locale = JSON.parse(localStorage.getItem(''locale''));
if (locale) {
document.write(''<script src="scripts/i18n/angular-locale_''+locale+''.js"><//script>'');
}
</script>