fix(compiler-cli): use existing imports for standalone dependencies (#46029)

alxhub · thePunderWoman · commit 1e07a112b0f2 · 2022-05-18T08:55:31.000-07:00
This commit fixes a small issue in the logic around the calculation of template scopes for standalone components. These scopes include a `Reference` for each dependency of a standalone component, which is used to generate references to that dependency in various contexts. Previously, the `Reference` used for a dependency was the one generated from its own metadata. For example, a referenced directive used the `Reference` that was created when analyzing the directive declaration itself. This still works, as the compiler is always able to emit a reference to any valid `Reference`. However, it's not optimal. The `Reference` which should be used instead is the one generated from analyzing the standalone component's `imports` array, which has knowledge of how the dependency is referenced from within the standalone component's file itself. This allows the compiler to skip creating a new import for the dependency when emitting the standalone component, and use the existing, user-authored import instead. This saves on code size and avoids taxing the bundler with unnecessary imports. PR Close #46029
diff --git a/packages/compiler-cli/src/ngtsc/scope/src/standalone.ts b/packages/compiler-cli/src/ngtsc/scope/src/standalone.ts
@@ -50,21 +50,21 @@ export class StandaloneComponentScopeReader implements ComponentScopeReader {
 
           const dirMeta = this.metaReader.getDirectiveMetadata(ref);
           if (dirMeta !== null) {
-            dependencies.add(dirMeta);
+            dependencies.add({...dirMeta, ref});
             isPoisoned = isPoisoned || dirMeta.isPoisoned || !dirMeta.isStandalone;
             continue;
           }
 
           const pipeMeta = this.metaReader.getPipeMetadata(ref);
           if (pipeMeta !== null) {
-            dependencies.add(pipeMeta);
+            dependencies.add({...pipeMeta, ref});
             isPoisoned = isPoisoned || !pipeMeta.isStandalone;
             continue;
           }
 
           const ngModuleMeta = this.metaReader.getNgModuleMetadata(ref);
           if (ngModuleMeta !== null) {
-            dependencies.add(ngModuleMeta);
+            dependencies.add({...ngModuleMeta, ref});
 
             let ngModuleScope: ExportScope|null;
             if (ref.node.getSourceFile().isDeclarationFile) {
diff --git a/packages/compiler-cli/test/ngtsc/standalone_spec.ts b/packages/compiler-cli/test/ngtsc/standalone_spec.ts
@@ -93,6 +93,35 @@ runInEachFileSystem(() => {
         expect(dtsCode).toContain('i0.ɵɵPipeDeclaration<TestPipe, "test", true>');
       });
 
+      it('should use existing imports for dependencies', () => {
+        env.write('dep.ts', `
+          import {Directive} from '@angular/core';
+
+          @Directive({
+            standalone: true,
+            selector: '[dir]',
+          })
+          export class TestDir {}
+        `);
+        env.write('test.ts', `
+          import {Component} from '@angular/core';
+          import {TestDir} from './dep';
+
+          @Component({
+            standalone: true,
+            imports: [TestDir],
+            selector: 'test-cmp',
+            template: '<div dir></div>',
+          })
+          export class TestCmp {}
+        `);
+
+        env.driveMain();
+
+        const jsContents = env.getContents('test.js');
+        expect(jsContents).toContain('dependencies: [TestDir]');
+      });
+
       it('should compile a standalone component even in the presence of cycles', () => {
         env.write('dep.ts', `
           import {Directive, Input} from '@angular/core';
@@ -128,7 +157,7 @@ runInEachFileSystem(() => {
         env.driveMain();
 
         const jsContents = env.getContents('test.js');
-        expect(jsContents).toContain('dependencies: [i1.TestDir]');
+        expect(jsContents).toContain('dependencies: [TestDir]');
       });
 
       it('should error when a non-standalone component tries to use imports', () => {
