fix(ivy): i18n - turn on legacy message-id support by default (#33053)

For v9 we want the migration to the new i18n to be as
simple as possible.

Previously the developer had to positively choose to use
legacy messsage id support in the case that their translation
files had not been migrated to the new format by setting the
`legacyMessageIdFormat` option in tsconfig.json to the format
of their translation files.

Now this setting has been changed to `enableI18nLegacyMessageFormat`
as is a boolean that defaults to `true`. The format is then read from
the `i18nInFormat` option, which was previously used to trigger translations
in the pre-ivy angular compiler.

PR Close #33053
This commit is contained in:
Pete Bacon Darwin 2019-10-09 12:34:37 +01:00 committed by Miško Hevery
parent 5ede5b7807
commit f640a4a494
6 changed files with 58 additions and 44 deletions

View File

@ -2,6 +2,6 @@
"extends": "./tsconfig.app.json",
"angularCompilerOptions": {
"enableIvy": true,
"i18nLegacyMessageIdFormat": "xlf"
"i18nInFormat": "xlf"
}
}

View File

@ -32,7 +32,6 @@ export function main(
if (configErrors.length) {
return reportErrorsAndExit(configErrors, /*options*/ undefined, consoleError);
}
warnForDeprecatedOptions(options);
if (watch) {
const result = watchMode(project, options, consoleError);
return reportErrorsAndExit(result.firstCompileResult, options, consoleError);
@ -227,14 +226,6 @@ export function watchMode(
}, options, options => createEmitCallback(options)));
}
function warnForDeprecatedOptions(options: api.CompilerOptions) {
if (options.i18nLegacyMessageIdFormat !== undefined) {
console.warn(
'The `i18nLegacyMessageIdFormat` option is deprecated.\n' +
'Migrate your legacy translation files to the new `$localize` message id format and remove this option.');
}
}
// CLI entry point
if (require.main === module) {
const args = process.argv.slice(2);

View File

@ -509,7 +509,7 @@ export class NgtscProgram implements api.Program {
this.reflector, evaluator, metaRegistry, this.metaReader !, scopeReader, scopeRegistry,
this.isCore, this.resourceManager, this.rootDirs,
this.options.preserveWhitespaces || false, this.options.i18nUseExternalIds !== false,
this.options.i18nLegacyMessageIdFormat || '', this.moduleResolver, this.cycleAnalyzer,
this.getI18nLegacyMessageFormat(), this.moduleResolver, this.cycleAnalyzer,
this.refEmitter, this.defaultImportTracker, this.incrementalState),
new DirectiveDecoratorHandler(
this.reflector, evaluator, metaRegistry, this.defaultImportTracker, this.isCore),
@ -529,6 +529,11 @@ export class NgtscProgram implements api.Program {
this.sourceToFactorySymbols, scopeRegistry);
}
private getI18nLegacyMessageFormat(): string {
return this.options.enableI18nLegacyMessageIdFormat !== false && this.options.i18nInFormat ||
'';
}
private get reflector(): TypeScriptReflectionHost {
if (this._reflector === undefined) {
this._reflector = new TypeScriptReflectionHost(this.tsProgram.getTypeChecker());

View File

@ -162,17 +162,16 @@ export interface CompilerOptions extends ts.CompilerOptions {
i18nUseExternalIds?: boolean;
/**
* Render `$localize` message ids with the specified legacy format (xlf, xlf2 or xmb).
* Render `$localize` message ids with the legacy format (xlf, xlf2 or xmb) specified in
* `i18nInFormat`.
*
* This is only active if we are building with `enableIvy: true` and a valid
* `i18nInFormat` has been provided. The default value for now is `true`.
*
* Use this option when use are using the `$localize` based localization messages but
* have not migrated the translation files to use the new `$localize` message id format.
*
* @deprecated
* `i18nLegacyMessageIdFormat` should only be used while migrating from legacy message id
* formatted translation files and will be removed at the same time as ViewEngine support is
* removed.
*/
i18nLegacyMessageIdFormat?: string;
enableI18nLegacyMessageIdFormat?: boolean;
// Whether to remove blank text nodes from compiled templates. It is `false` by default starting
// from Angular 6.

View File

@ -2052,60 +2052,79 @@ runInEachFileSystem(os => {
expect(jsContents).not.toContain('MSG_EXTERNAL_');
});
it('should render legacy id when i18nLegacyMessageIdFormat config is set to xlf', () => {
env.tsconfig({i18nLegacyMessageIdFormat: 'xlf'});
env.write(`test.ts`, `
it('should render legacy id when `enableI18nLegacyMessageIdFormat` is not false and `i18nInFormat` is set to "xlf"',
() => {
env.tsconfig({i18nInFormat: 'xlf'});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
selector: 'test',
template: '<div i18n>Some text</div>'
})
class FooCmp {}`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@5dbba0a3da8dff890e20cf76eb075d58900fbcd3:Some text');
});
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@5dbba0a3da8dff890e20cf76eb075d58900fbcd3:Some text');
});
it('should render legacy id when i18nLegacyMessageIdFormat config is set to xlf2', () => {
env.tsconfig({i18nLegacyMessageIdFormat: 'xlf2'});
env.write(`test.ts`, `
it('should render legacy id when `enableI18nLegacyMessageIdFormat` is not false and `i18nInFormat` is set to "xlf2"',
() => {
env.tsconfig({i18nInFormat: 'xlf2'});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
selector: 'test',
template: '<div i18n>Some text</div>'
})
class FooCmp {}`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@8321000940098097247:Some text');
});
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@8321000940098097247:Some text');
});
it('should render legacy id when i18nLegacyMessageIdFormat config is set to xmb', () => {
env.tsconfig({i18nLegacyMessageIdFormat: 'xmb'});
env.write(`test.ts`, `
it('should render legacy id when `enableI18nLegacyMessageIdFormat` is not false and `i18nInFormat` is set to "xmb"',
() => {
env.tsconfig({i18nInFormat: 'xmb'});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
selector: 'test',
template: '<div i18n>Some text</div>'
})
class FooCmp {}`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@8321000940098097247:Some text');
});
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@8321000940098097247:Some text');
});
it('should render custom id even if i18nLegacyMessageIdFormat config is set', () => {
env.tsconfig({i18nLegacyMessageIdFormat: 'xlf'});
env.write(`test.ts`, `
it('should render custom id even if `enableI18nLegacyMessageIdFormat` is not false and `i18nInFormat` is set',
() => {
env.tsconfig({i18nFormatIn: 'xlf'});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
selector: 'test',
template: '<div i18n="@@custom">Some text</div>'
})
class FooCmp {}`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@custom:Some text');
});
it('should not render legacy id when `enableI18nLegacyMessageIdFormat` is set to false', () => {
env.tsconfig({enableI18nLegacyMessageIdFormat: false, i18nInFormat: 'xmb'});
env.write(`test.ts`, `
import {Component} from '@angular/core';
@Component({
selector: 'test',
template: '<div i18n>Some text</div>'
})
class FooCmp {}`);
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents).toContain(':@@custom:Some text');
// Note that the colon would only be there if there is an id attached to the string.
expect(jsContents).not.toContain(':Some text');
});
it('@Component\'s `interpolation` should override default interpolation config', () => {

View File

@ -11,7 +11,7 @@ import {ParseSourceSpan} from '../parse_util';
export class Message {
sources: MessageSpan[];
id: string = this.customId;
/** The id to use if there is no custom id and if `i18nLegacyMessageIdFormat` is true */
/** The id to use if there is no custom id and if `i18nLegacyMessageIdFormat` is not empty */
legacyId?: string = '';
/**