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:
Olivier Combe
2019-04-11 11:17:49 +02:00
committed by Igor Minar
parent 387fbb8106
commit 91c7b451d5
22 changed files with 1397 additions and 564 deletions

View File

@ -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>');

View File

@ -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',

View File

@ -116,6 +116,9 @@
{
"name": "_currentInjector"
},
{
"name": "_global"
},
{
"name": "catchInjectorError"
},
@ -140,6 +143,9 @@
{
"name": "getClosureSafeProperty"
},
{
"name": "getGlobal"
},
{
"name": "getInjectableDef"
},

View File

@ -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;

View File

@ -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});