fix(@ngtools/webpack): import as results in the alias being undefined with Typescript 3.2

Alan Agius · mgechev · commit 8bded93d8af3 · 2018-12-19T10:55:05.000-08:00
When using the `specifier.propertyName` with `typeChecker.getSymbolAtLocation` it will return a more detailed symbol then we originally have in the `usedSymbols` set. We should probably use `symbol.id` to actually check if the symbols are the same, however the `id` is not exposed in the Symbol interface. Using `node.name` will return the same symbol that we have stored in the set. Fixes angular#13212
diff --git a/packages/angular_devkit/build_angular/test/browser/aot_spec_large.ts b/packages/angular_devkit/build_angular/test/browser/aot_spec_large.ts
@@ -30,4 +30,113 @@ describe('Browser Builder AOT', () => {
       }),
     ).toPromise().then(done, done.fail);
   });
+
+  it('works with aliased imports', (done) => {
+    const overrides = { aot: true };
+
+    host.writeMultipleFiles({
+      'src/app/app.component.ts': `import { Component } from '@angular/core';
+       import { from as fromPromise } from 'rxjs';
+
+       @Component({
+         selector: 'app-root',
+         templateUrl: './app.component.html',
+         styleUrls: ['./app.component.css']
+       })
+       export class AppComponent {
+         title = 'app-component';
+
+         constructor() {
+           console.log(fromPromise(Promise.resolve('test')));
+         }
+       }`,
+    });
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = join(outputPath, 'main.js');
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        // if the aliased import was dropped this won't be rewired to a webpack module.
+        expect(content).toMatch(/rxjs__WEBPACK_IMPORTED_.+[\"from\"]/);
+        expect(content).not.toContain('fromPromise');
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('works with aliased imports from an exported object literal', (done) => {
+    const overrides = { aot: true };
+
+    host.writeMultipleFiles({
+      'src/foo.ts': `
+        import { from as fromPromise } from 'rxjs';
+        export { fromPromise };
+      `,
+      'src/app/app.component.ts': `
+      import { Component } from '@angular/core';
+      import { fromPromise } from '../foo';
+
+       @Component({
+         selector: 'app-root',
+         templateUrl: './app.component.html',
+         styleUrls: ['./app.component.css']
+       })
+       export class AppComponent {
+         title = 'app-component';
+
+         constructor() {
+           console.log(fromPromise(Promise.resolve('test')));
+         }
+       }`,
+    });
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = join(outputPath, 'main.js');
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        // if the aliased import was dropped this won't be rewired to a webpack module.
+        expect(content).toMatch(/rxjs__WEBPACK_IMPORTED_.+[\"from\"]/);
+        expect(content).toMatch(/rxjs__WEBPACK_IMPORTED_.+[\"fromPromise\"]/);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
+  it('works with aliased imports from an alias export', (done) => {
+    const overrides = { aot: true };
+
+    host.writeMultipleFiles({
+      'src/foo.ts': `
+        export { from as fromPromise } from 'rxjs';
+      `,
+      'src/app/app.component.ts': `
+      import { Component } from '@angular/core';
+      import { fromPromise } from '../foo';
+
+       @Component({
+         selector: 'app-root',
+         templateUrl: './app.component.html',
+         styleUrls: ['./app.component.css']
+       })
+       export class AppComponent {
+         title = 'app-component';
+
+         constructor() {
+           console.log(fromPromise(Promise.resolve('test')));
+         }
+       }`,
+    });
+
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        const fileName = join(outputPath, 'main.js');
+        const content = virtualFs.fileBufferToString(host.scopedSync().read(normalize(fileName)));
+        // if the aliased import was dropped this won't be rewired to a webpack module.
+        expect(content).toMatch(/rxjs__WEBPACK_IMPORTED_.+[\"from\"]/);
+        expect(content).toMatch(/rxjs__WEBPACK_IMPORTED_.+[\"fromPromise\"]/);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+
 });
diff --git a/packages/ngtools/webpack/src/transformers/elide_imports.ts b/packages/ngtools/webpack/src/transformers/elide_imports.ts
@@ -100,7 +100,7 @@ export function elideImports(
       // "import { XYZ, ... } from 'abc';"
       const specifierOps = [];
       for (const specifier of node.importClause.namedBindings.elements) {
-        if (isUnused(specifier.propertyName || specifier.name)) {
+        if (isUnused(specifier.name)) {
           specifierOps.push(new RemoveNodeOperation(sourceFile, specifier));
         }
       }

Original file line number	Diff line number	Diff line change
`@@ -100,7 +100,7 @@ export function elideImports(`
`100`	`100`	`// "import { XYZ, ... } from 'abc';"`
`101`	`101`	`const specifierOps = [];`
`102`	`102`	`for (const specifier of node.importClause.namedBindings.elements) {`
`103`		`- if (isUnused(specifier.propertyName \|\| specifier.name)) {`
	`103`	`+ if (isUnused(specifier.name)) {`
`104`	`104`	`specifierOps.push(new RemoveNodeOperation(sourceFile, specifier));`
`105`	`105`	`}`
`106`	`106`	`}`