fix(ivy): use globally unique names for i18n constants (#25689)

Closure compiler requires that the i18n message constants of the form

const MSG_XYZ = goog.getMessage('...');

have names that are unique across an entire compilation, even if the
variables themselves are local to a given module. This means that in
practice these names must be unique in a codebase.

The best way to guarantee this requirement is met is to encode the
relative file name of the file into which the constant is being written
into the constant name itself. This commit implements that solution.

PR Close #25689

packages/compiler-cli/src/ngcc/src/analyzer.ts

@@ -49,14 +49,16 @@ export class Analyzer {
   handlers: DecoratorHandler<any, any>[] = [
     new BaseDefDecoratorHandler(this.typeChecker, this.host),
     new ComponentDecoratorHandler(
-        this.typeChecker, this.host, this.scopeRegistry, false, this.resourceLoader),
+        this.typeChecker, this.host, this.scopeRegistry, false, this.resourceLoader, this.rootDirs),
     new DirectiveDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
     new InjectableDecoratorHandler(this.host, false),
     new NgModuleDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
     new PipeDecoratorHandler(this.typeChecker, this.host, this.scopeRegistry, false),
   ];
 
-  constructor(private typeChecker: ts.TypeChecker, private host: NgccReflectionHost) {}
+  constructor(
+      private typeChecker: ts.TypeChecker, private host: NgccReflectionHost,
+      private rootDirs: string[]) {}
 
   /**
    * Analyize a parsed file to generate the information about decorated classes that

packages/compiler-cli/src/ngcc/src/transform/package_transformer.ts

@@ -65,13 +65,21 @@ export class PackageTransformer {
       // Create the TS program and necessary helpers.
       // TODO : create a custom compiler host that reads from .bak files if available.
       const host = ts.createCompilerHost(options);
+      let rootDirs: string[]|undefined = undefined;
+      if (options.rootDirs !== undefined) {
+        rootDirs = options.rootDirs;
+      } else if (options.rootDir !== undefined) {
+        rootDirs = [options.rootDir];
+      } else {
+        rootDirs = [host.getCurrentDirectory()];
+      }
       const packageProgram = ts.createProgram([entryPoint.entryFileName], options, host);
       const typeChecker = packageProgram.getTypeChecker();
       const dtsMapper = new DtsMapper(entryPoint.entryRoot, entryPoint.dtsEntryRoot);
       const reflectionHost = this.getHost(format, packageProgram, dtsMapper);
 
       const parser = this.getFileParser(format, packageProgram, reflectionHost);
-      const analyzer = new Analyzer(typeChecker, reflectionHost);
+      const analyzer = new Analyzer(typeChecker, reflectionHost, rootDirs);
       const renderer = this.getRenderer(format, packageProgram, reflectionHost);
 
       // Parse and analyze the files.

packages/compiler-cli/src/ngcc/test/analyzer_spec.ts

@@ -80,7 +80,7 @@ describe('Analyzer', () => {
       program = makeProgram(TEST_PROGRAM);
       const file = createParsedFile(program);
       const analyzer = new Analyzer(
-          program.getTypeChecker(), new Fesm2015ReflectionHost(program.getTypeChecker()));
+          program.getTypeChecker(), new Fesm2015ReflectionHost(program.getTypeChecker()), ['']);
       testHandler = createTestHandler();
       analyzer.handlers = [testHandler];
       result = analyzer.analyzeFile(file);

packages/compiler-cli/src/ngcc/test/rendering/esm2015_renderer_spec.ts

@@ -17,7 +17,7 @@ function setup(file: {name: string, contents: string}) {
   const program = makeProgram(file);
   const host = new Fesm2015ReflectionHost(program.getTypeChecker());
   const parser = new Esm2015FileParser(program, host);
-  const analyzer = new Analyzer(program.getTypeChecker(), host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host, ['']);
   const renderer = new Esm2015Renderer(host);
   return {analyzer, host, parser, program, renderer};
 }

packages/compiler-cli/src/ngcc/test/rendering/esm5_renderer_spec.ts

@@ -17,7 +17,7 @@ function setup(file: {name: string, contents: string}) {
   const program = makeProgram(file);
   const host = new Esm5ReflectionHost(program.getTypeChecker());
   const parser = new Esm5FileParser(program, host);
-  const analyzer = new Analyzer(program.getTypeChecker(), host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host, ['']);
   const renderer = new Esm5Renderer(host);
   return {analyzer, host, parser, program, renderer};
 }

packages/compiler-cli/src/ngcc/test/rendering/renderer_spec.ts

@@ -46,7 +46,7 @@ function analyze(file: {name: string, contents: string}) {
   const program = makeProgram(file);
   const host = new Fesm2015ReflectionHost(program.getTypeChecker());
   const parser = new Esm2015FileParser(program, host);
-  const analyzer = new Analyzer(program.getTypeChecker(), host);
+  const analyzer = new Analyzer(program.getTypeChecker(), host, ['']);
 
   const parsedFiles = parser.parseFile(program.getSourceFile(file.name) !);
   return parsedFiles.map(file => analyzer.analyzeFile(file));

packages/compiler-cli/src/ngtsc/annotations/src/component.ts

@@ -29,7 +29,7 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
   constructor(
       private checker: ts.TypeChecker, private reflector: ReflectionHost,
       private scopeRegistry: SelectorScopeRegistry, private isCore: boolean,
-      private resourceLoader: ResourceLoader) {}
+      private resourceLoader: ResourceLoader, private rootDirs: string[]) {}
 
   private literalCache = new Map<Decorator, ts.ObjectLiteralExpression>();
 
@@ -111,9 +111,21 @@ export class ComponentDecoratorHandler implements DecoratorHandler<R3ComponentMe
       preserveWhitespaces = value;
     }
 
+    // Go through the root directories for this project, and select the one with the smallest
+    // relative path representation.
+    const filePath = node.getSourceFile().fileName;
+    const relativeFilePath = this.rootDirs.reduce<string|undefined>((previous, rootDir) => {
+      const candidate = path.posix.relative(rootDir, filePath);
+      if (previous === undefined || candidate.length < previous.length) {
+        return candidate;
+      } else {
+        return previous;
+      }
+    }, undefined) !;
+
     const template = parseTemplate(
         templateStr, `${node.getSourceFile().fileName}#${node.name!.text}/template.html`,
-        {preserveWhitespaces});
+        {preserveWhitespaces}, relativeFilePath);
     if (template.errors !== undefined) {
       throw new Error(
           `Errors parsing template: ${template.errors.map(e => e.toString()).join(', ')}`);

packages/compiler-cli/src/ngtsc/annotations/test/component_spec.ts

@@ -39,7 +39,8 @@ describe('ComponentDecoratorHandler', () => {
     const checker = program.getTypeChecker();
     const host = new TypeScriptReflectionHost(checker);
     const handler = new ComponentDecoratorHandler(
-        checker, host, new SelectorScopeRegistry(checker, host), false, new NoopResourceLoader());
+        checker, host, new SelectorScopeRegistry(checker, host), false, new NoopResourceLoader(),
+        ['']);
     const TestCmp = getDeclaration(program, 'entry.ts', 'TestCmp', ts.isClassDeclaration);
     const detected = handler.detect(TestCmp, host.getDecoratorsOfDeclaration(TestCmp));
     if (detected === undefined) {

packages/compiler-cli/src/ngtsc/program.ts

@@ -29,11 +29,20 @@ export class NgtscProgram implements api.Program {
   private _coreImportsFrom: ts.SourceFile|null|undefined = undefined;
   private _reflector: TypeScriptReflectionHost|undefined = undefined;
   private _isCore: boolean|undefined = undefined;
+  private rootDirs: string[];
 
 
   constructor(
       rootNames: ReadonlyArray<string>, private options: api.CompilerOptions,
       host: api.CompilerHost, oldProgram?: api.Program) {
+    this.rootDirs = [];
+    if (options.rootDirs !== undefined) {
+      this.rootDirs.push(...options.rootDirs);
+    } else if (options.rootDir !== undefined) {
+      this.rootDirs.push(options.rootDir);
+    } else {
+      this.rootDirs.push(host.getCurrentDirectory());
+    }
     this.resourceLoader = host.readResource !== undefined ?
         new HostResourceLoader(host.readResource.bind(host)) :
         new FileResourceLoader();
@@ -177,7 +186,7 @@ export class NgtscProgram implements api.Program {
     const handlers = [
       new BaseDefDecoratorHandler(checker, this.reflector),
       new ComponentDecoratorHandler(
-          checker, this.reflector, scopeRegistry, this.isCore, this.resourceLoader),
+          checker, this.reflector, scopeRegistry, this.isCore, this.resourceLoader, this.rootDirs),
       new DirectiveDecoratorHandler(checker, this.reflector, scopeRegistry, this.isCore),
       new InjectableDecoratorHandler(this.reflector, this.isCore),
       new NgModuleDecoratorHandler(checker, this.reflector, scopeRegistry, this.isCore),

packages/compiler/src/constant_pool.ts

@@ -122,7 +122,8 @@ export class ConstantPool {
   //  */
   // const MSG_XYZ = goog.getMsg('message');
   // ```
-  getTranslation(message: string, meta: {description?: string, meaning?: string}): o.Expression {
+  getTranslation(message: string, meta: {description?: string, meaning?: string}, suffix: string):
+      o.Expression {
     // The identity of an i18n message depends on the message and its meaning
     const key = meta.meaning ? `${message}\u0000\u0000${meta.meaning}` : message;
 
@@ -138,7 +139,7 @@ export class ConstantPool {
     }
 
     // Call closure to get the translation
-    const variable = o.variable(this.freshTranslationName());
+    const variable = o.variable(this.freshTranslationName(suffix));
     const fnCall = o.variable(GOOG_GET_MSG).callFn([o.literal(message)]);
     const msgStmt = variable.set(fnCall).toDeclStmt(o.INFERRED_TYPE, [o.StmtModifier.Final]);
     this.statements.push(msgStmt);
@@ -257,8 +258,8 @@ export class ConstantPool {
 
   private freshName(): string { return this.uniqueName(CONSTANT_PREFIX); }
 
-  private freshTranslationName(): string {
+  private freshTranslationName(suffix: string): string {
-    return this.uniqueName(TRANSLATION_PREFIX).toUpperCase();
+    return this.uniqueName(TRANSLATION_PREFIX + suffix).toUpperCase();
   }
 
   private keyOf(expression: o.Expression) {

packages/compiler/src/render3/view/api.ts

@@ -127,6 +127,13 @@ export interface R3ComponentMetadata extends R3DirectiveMetadata {
      * Selectors found in the <ng-content> tags in the template.
      */
     ngContentSelectors: string[];
+
+    /**
+     * Path to the .ts file in which this template's generated code will be included, relative to
+     * the compilation root. This will be used to generate identifiers that need to be globally
+     * unique in certain contexts (such as g3).
+     */
+    relativeContextFilePath: string;
   };
 
   /**

packages/compiler/src/render3/view/compiler.ts

@@ -209,7 +209,8 @@ export function compileComponentFromMetadata(
   const template = meta.template;
   const templateBuilder = new TemplateDefinitionBuilder(
       constantPool, BindingScope.ROOT_SCOPE, 0, templateTypeName, templateName, meta.viewQueries,
-      directiveMatcher, directivesUsed, meta.pipes, pipesUsed, R3.namespaceHTML);
+      directiveMatcher, directivesUsed, meta.pipes, pipesUsed, R3.namespaceHTML,
+      meta.template.relativeContextFilePath);
 
   const templateFunctionExpression = templateBuilder.buildTemplateFunction(
       template.nodes, [], template.hasNgContent, template.ngContentSelectors);
@@ -309,6 +310,7 @@ export function compileComponentFromRender2(
       nodes: render3Ast.nodes,
       hasNgContent: render3Ast.hasNgContent,
       ngContentSelectors: render3Ast.ngContentSelectors,
+      relativeContextFilePath: '',
     },
     directives: typeMapToExpressionMap(directiveTypeBySel, outputCtx),
     pipes: typeMapToExpressionMap(pipeTypeByName, outputCtx),

packages/compiler/src/render3/view/template.ts

@@ -96,18 +96,25 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
   // Number of binding slots
   private _bindingSlots = 0;
 
+  private fileBasedI18nSuffix: string;
+
   constructor(
       private constantPool: ConstantPool, parentBindingScope: BindingScope, private level = 0,
       private contextName: string|null, private templateName: string|null,
       private viewQueries: R3QueryMetadata[], private directiveMatcher: SelectorMatcher|null,
       private directives: Set<o.Expression>, private pipeTypeByName: Map<string, o.Expression>,
-      private pipes: Set<o.Expression>, private _namespace: o.ExternalReference) {
+      private pipes: Set<o.Expression>, private _namespace: o.ExternalReference,
+      private relativeContextFilePath: string) {
     // view queries can take up space in data and allocation happens earlier (in the "viewQuery"
     // function)
     this._dataIndex = viewQueries.length;
 
     this._bindingScope = parentBindingScope.nestedScope(level);
 
+    // Turn the relative context file path into an identifier by replacing non-alphanumeric
+    // characters with underscores.
+    this.fileBasedI18nSuffix = relativeContextFilePath.replace(/[^A-Za-z0-9]/g, '_') + '_';
+
     this._valueConverter = new ValueConverter(
         constantPool, () => this.allocateDataSlot(),
         (numSlots: number) => this.allocatePureFunctionSlots(numSlots),
@@ -385,7 +392,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
         attributes.push(o.literal(name));
         if (attrI18nMetas.hasOwnProperty(name)) {
           const meta = parseI18nMeta(attrI18nMetas[name]);
-          const variable = this.constantPool.getTranslation(value, meta);
+          const variable = this.constantPool.getTranslation(value, meta, this.fileBasedI18nSuffix);
           attributes.push(variable);
         } else {
           attributes.push(o.literal(value));
@@ -698,7 +705,8 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
     // Create the template function
     const templateVisitor = new TemplateDefinitionBuilder(
         this.constantPool, this._bindingScope, this.level + 1, contextName, templateName, [],
-        this.directiveMatcher, this.directives, this.pipeTypeByName, this.pipes, this._namespace);
+        this.directiveMatcher, this.directives, this.pipeTypeByName, this.pipes, this._namespace,
+        this.fileBasedI18nSuffix);
 
     // Nested templates must not be visited until after their parent templates have completed
     // processing, so they are queued here until after the initial pass. Otherwise, we wouldn't
@@ -764,7 +772,7 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
   // ```
   visitSingleI18nTextChild(text: t.Text, i18nMeta: string) {
     const meta = parseI18nMeta(i18nMeta);
-    const variable = this.constantPool.getTranslation(text.value, meta);
+    const variable = this.constantPool.getTranslation(text.value, meta, this.fileBasedI18nSuffix);
     this.creationInstruction(
         text.sourceSpan, R3.text, [o.literal(this.allocateDataSlot()), variable]);
   }
@@ -1336,14 +1344,25 @@ function interpolate(args: o.Expression[]): o.Expression {
  * @param templateUrl URL to use for source mapping of the parsed template
  */
 export function parseTemplate(
-    template: string, templateUrl: string, options: {preserveWhitespaces?: boolean} = {}):
+    template: string, templateUrl: string, options: {preserveWhitespaces?: boolean} = {},
-    {errors?: ParseError[], nodes: t.Node[], hasNgContent: boolean, ngContentSelectors: string[]} {
+    relativeContextFilePath: string): {
+  errors?: ParseError[],
+  nodes: t.Node[],
+  hasNgContent: boolean,
+  ngContentSelectors: string[],
+  relativeContextFilePath: string
+} {
   const bindingParser = makeBindingParser();
   const htmlParser = new HtmlParser();
   const parseResult = htmlParser.parse(template, templateUrl);
 
   if (parseResult.errors && parseResult.errors.length > 0) {
-    return {errors: parseResult.errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
+    return {
+      errors: parseResult.errors,
+      nodes: [],
+      hasNgContent: false,
+      ngContentSelectors: [], relativeContextFilePath
+    };
   }
 
   let rootNodes: html.Node[] = parseResult.rootNodes;
@@ -1354,10 +1373,15 @@ export function parseTemplate(
   const {nodes, hasNgContent, ngContentSelectors, errors} =
       htmlAstToRender3Ast(rootNodes, bindingParser);
   if (errors && errors.length > 0) {
-    return {errors, nodes: [], hasNgContent: false, ngContentSelectors: []};
+    return {
+      errors,
+      nodes: [],
+      hasNgContent: false,
+      ngContentSelectors: [], relativeContextFilePath
+    };
   }
 
-  return {nodes, hasNgContent, ngContentSelectors};
+  return {nodes, hasNgContent, ngContentSelectors, relativeContextFilePath};
 }
 
 /**

packages/core/src/render3/jit/directive.ts

@@ -54,10 +54,11 @@ export function compileComponent(type: Type<any>, metadata: Component): void {
         const constantPool = new ConstantPool();
 
         // Parse the template and check for errors.
-        const template =
+        const template = parseTemplate(
-            parseTemplate(metadata.template !, `ng://${stringify(type)}/template.html`, {
+            metadata.template !, `ng://${stringify(type)}/template.html`, {
               preserveWhitespaces: metadata.preserveWhitespaces || false,
-            });
+            },
+            '');
         if (template.errors !== undefined) {
           const errors = template.errors.map(err => err.toString()).join(', ');
           throw new Error(