feat(ivy): support i18n without closure (#28689)
So far using runtime i18n with ivy meant that you needed to use Closure and `goog.getMsg` (or a polyfill). This PR changes the compiler to output both closure & non-closure code, while the unused option will be tree-shaken by minifiers. This means that if you use the Angular CLI with ivy and load a translations file, you can use i18n and the application will not throw at runtime. For now it will not translate your application, but at least you can try ivy without having to remove all of your i18n code and configuration. PR Close #28689
This commit is contained in:

committed by
Igor Minar

parent
387fbb8106
commit
91c7b451d5
@ -23,14 +23,6 @@
|
||||
property renaming.
|
||||
-->
|
||||
<script>
|
||||
// `goog.getMsg()` will be provided by Closure
|
||||
const translations = {
|
||||
'Hello World!': 'Bonjour Monde!',
|
||||
'Hello Title!': 'Bonjour Titre!',
|
||||
};
|
||||
window.goog = window.goog || {};
|
||||
window.goog.getMsg = (key) => translations[key] || key;
|
||||
|
||||
document.write('<script src="' +
|
||||
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js') +
|
||||
'"></' + 'script>');
|
||||
|
@ -6,7 +6,14 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Component, NgModule, ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
import {Component, NgModule, ɵi18nConfigureLocalize, ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
|
||||
const translations = {
|
||||
'Hello World!': 'Bonjour Monde!',
|
||||
'Hello Title!': 'Bonjour Titre!',
|
||||
};
|
||||
|
||||
ɵi18nConfigureLocalize({translations});
|
||||
|
||||
@Component({
|
||||
selector: 'hello-world',
|
||||
|
@ -116,6 +116,9 @@
|
||||
{
|
||||
"name": "_currentInjector"
|
||||
},
|
||||
{
|
||||
"name": "_global"
|
||||
},
|
||||
{
|
||||
"name": "catchInjectorError"
|
||||
},
|
||||
@ -140,6 +143,9 @@
|
||||
{
|
||||
"name": "getClosureSafeProperty"
|
||||
},
|
||||
{
|
||||
"name": "getGlobal"
|
||||
},
|
||||
{
|
||||
"name": "getInjectableDef"
|
||||
},
|
||||
|
@ -7,10 +7,16 @@
|
||||
*/
|
||||
|
||||
import '@angular/core/test/bundling/util/src/reflect_metadata';
|
||||
/**
|
||||
* TODO(ocombe): replace this with the real runtime i18n service configuration
|
||||
* For now we define inline translations that are added with the function `ɵi18nConfigureLocalize`,
|
||||
* but this function will go away once we have finished designing and implementing the new runtime
|
||||
* service. At this point we should revisit this code and update it to use that new service.
|
||||
* See FW-114.
|
||||
*/
|
||||
import './translations';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
// TODO(ocombe): replace this with the real runtime i18n service
|
||||
import {localize} from './translations';
|
||||
import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent, Δi18nLocalize as localize} from '@angular/core';
|
||||
|
||||
class Todo {
|
||||
editing: boolean;
|
||||
|
@ -6,8 +6,7 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
declare var global: any;
|
||||
declare var window: any;
|
||||
import {ɵi18nConfigureLocalize} from '@angular/core';
|
||||
|
||||
export const translations: {[key: string]: string} = {
|
||||
'What needs to be done?': `Qu'y a-t-il à faire ?`,
|
||||
@ -25,18 +24,4 @@ export const translations: {[key: string]: string} = {
|
||||
'Demonstrate internationalization': `Démontrer l'internationalisation`
|
||||
};
|
||||
|
||||
// Runtime i18n uses Closure goog.getMsg for now
|
||||
// It will be replaced by the runtime service for external people
|
||||
const glob = typeof global !== 'undefined' ? global : window;
|
||||
glob.goog = glob.goog || {};
|
||||
glob.goog.getMsg =
|
||||
glob.goog.getMsg || function(input: string, placeholders: {[key: string]: string} = {}) {
|
||||
if (typeof translations[input] !== 'undefined') { // to account for empty string
|
||||
input = translations[input];
|
||||
}
|
||||
return Object.keys(placeholders).length ?
|
||||
input.replace(/\{\$(.*?)\}/g, (match, key) => placeholders[key] || '') :
|
||||
input;
|
||||
};
|
||||
|
||||
export const localize = goog.getMsg;
|
||||
ɵi18nConfigureLocalize({translations});
|
||||
|
Reference in New Issue
Block a user