fix(@ngtools/webpack): skip non-runtime types when transforming constructors

Fixes angular#14876

Author: clydin

packages/ngtools/webpack/src/transformers/ctor-parameters.ts

@@ -89,6 +89,7 @@ function createCtorParametersClassProperty(
   diagnostics: ts.Diagnostic[],
   entityNameToExpression: (n: ts.EntityName) => ts.Expression | undefined,
   ctorParameters: ParameterDecorationInfo[],
+  typeChecker: ts.TypeChecker,
 ): ts.PropertyDeclaration {
   const params: ts.Expression[] = [];
 
@@ -99,7 +100,7 @@ function createCtorParametersClassProperty(
     }
 
     const paramType = ctorParam.type
-      ? typeReferenceToExpression(entityNameToExpression, ctorParam.type)
+      ? typeReferenceToExpression(entityNameToExpression, ctorParam.type, typeChecker)
       : undefined;
     const members = [
       ts.createPropertyAssignment('type', paramType || ts.createIdentifier('undefined')),
@@ -147,6 +148,7 @@ function createCtorParametersClassProperty(
 function typeReferenceToExpression(
   entityNameToExpression: (n: ts.EntityName) => ts.Expression | undefined,
   node: ts.TypeNode,
+  typeChecker: ts.TypeChecker,
 ): ts.Expression | undefined {
   let kind = node.kind;
   if (ts.isLiteralTypeNode(node)) {
@@ -175,6 +177,15 @@ function typeReferenceToExpression(
       return ts.createIdentifier('Number');
     case ts.SyntaxKind.TypeReference:
       const typeRef = node as ts.TypeReferenceNode;
+      const typeSymbol = typeChecker.getSymbolAtLocation(typeRef);
+      if (!typeSymbol || !(typeSymbol.flags & ts.SymbolFlags.Value)) {
+        return undefined;
+      }
+
+      const type = typeChecker.getTypeOfSymbolAtLocation(typeSymbol, typeRef);
+      if (!type || typeChecker.getSignaturesOfType(type, ts.SignatureKind.Construct).length === 0) {
+        return undefined;
+      }
 
       // Ignore any generic types, just return the base type.
       return entityNameToExpression(typeRef.typeName);
@@ -263,6 +274,7 @@ export function decoratorDownlevelTransformer(
           diagnostics,
           entityNameToExpression,
           parametersInfo,
+          typeChecker,
         );
 
         return [node, ctorProperty];

packages/ngtools/webpack/src/transformers/ctor-parameters_spec.ts

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import { tags } from '@angular-devkit/core'; // tslint:disable-line:no-implicit-dependencies
+import { createTypescriptContext, transformTypescript } from './ast_helpers';
+import { downlevelConstructorParameters } from './ctor-parameters';
+
+function transform(input: string, additionalFiles?: Record<string, string>) {
+  const { program, compilerHost } = createTypescriptContext(input, additionalFiles);
+  const transformer = downlevelConstructorParameters(() => program.getTypeChecker());
+  const result = transformTypescript(undefined, [transformer], program, compilerHost);
+
+  return result;
+}
+
+describe('Constructor Parameter Transformer', () => {
+  it('supports Inject decorators with interfaces in same module', () => {
+    const input = tags.stripIndent`
+      export interface InterInject {};
+      export const INTERFACE_INJECT = new InjectionToken<InterInject>('interface-inject');
+
+      export class MyService {
+        constructor(@Inject(INTERFACE_INJECT) config: InterInject) {}
+      }
+    `;
+
+    const output = `import * as tslib_1 from "tslib"; ; export const INTERFACE_INJECT = new InjectionToken('interface-inject'); let MyService = class MyService { constructor(config) { } }; MyService.ctorParameters = () => [ { type: undefined, decorators: [{ type: Inject, args: [INTERFACE_INJECT,] }] } ]; MyService = tslib_1.__decorate([ tslib_1.__param(0, Inject(INTERFACE_INJECT)) ], MyService); export { MyService };`;
+
+    const result = transform(input);
+
+    expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
+  });
+
+  it('supports Inject decorators with interfaces in another module', () => {
+    const injectedModule = {
+      'module-inject': `
+        export interface InterInject {};
+        export const INTERFACE_INJECT = new InjectionToken<InterInject>('interface-inject');
+      `,
+    };
+
+    const input = tags.stripIndent`
+      import { INTERFACE_INJECT, InterInject } from './module-inject';
+
+      export class MyService {
+        constructor(@Inject(INTERFACE_INJECT) config: InterInject) {}
+      }
+    `;
+
+    const output = `import * as tslib_1 from "tslib"; import { INTERFACE_INJECT } from './module-inject'; let MyService = class MyService { constructor(config) { } }; MyService.ctorParameters = () => [ { type: undefined, decorators: [{ type: Inject, args: [INTERFACE_INJECT,] }] } ]; MyService = tslib_1.__decorate([ tslib_1.__param(0, Inject(INTERFACE_INJECT)) ], MyService); export { MyService };`;
+
+    const result = transform(input, injectedModule);
+
+    expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
+  });
+});