After upgrade Angular to v8: Can't resolve all parameters for Component: (?).

[jfcere]

Hi folks,

I recently upgraded my application to Angular 8 and couldn't get the tests to run successfully with Jest-Preset-Angular resulting in the error below telling me it cannot resolve the constructor dependencies although it works fine using Karma and was working with Angular 7.

Can't resolve all parameters for AppComponent: (?).

I've created a newly generated Angular 8 application to see if it has something to do with my migration and I ended up having the same issue.

Here is the reproduction repository (Jest configuration is in package.json):
https://github.com/jfcere/jest-preset-angular-issue

Thanks in advance!

[wtho]

TL;DR

tsconfig.spec.json

   "compilerOptions": {
+    "emitDecoratorMetadata": true,
     "outDir": "./out-tsc/spec",

Issue

The Angular CLI takes over some of the TS -> JS transpilation using transformers, especially when it's about the decorators and reflection. We were not aware of this change, but it appearently came in in Angular v8.1.

Here the full PR: angular/angular-cli#14473

We can try to reuse their transformer (https://github.com/angular/angular-cli/blob/master/packages/ngtools/webpack/src/transformers/ctor-parameters.ts), as @angular/cli is anyway a dependency in every Angular project.

I will try to experiment with the transformer, we can track the progress in this issue till then.

Workaround

To make ts-jest not lose the parameter information upon compilation without the AST transformation, you can set "emitDecoratorMetadata": true in your tsconfig.spec.json for now. The PR mentions issues with AOT compilation, which is usually not used in testing, so this setting should not create any problems. If you use karma as well and this leads to issues, try to use a separate tsconfig.spec.json.

[jfcere]

@wtho thanks for the quick answer, really appreciated!

I've downgraded the reproduction repository to use Angular 8.0.3 and the error is still happening.

But the workaround for tsconfig.spec.ts you've provided works! 😄

[wtho]

Ok interesting, I created a project with 8.0.0 once and there emitDecoratorMetadata was still set, I thought it would not have come in in a patch version update, but for Angular it is just an internal detail.

It's difficult to spot, as I could not find the PR referenced in the angular-cli releases list anywhere.

[jfcere]

I created a project with 8.0.0 once and there emitDecoratorMetadata was still set

Oh alright, that could be it, I've only downgraded the angular dependencies manually in package.json, I didn't regenerate a new project with @angular/cli v8.0.x ... sorry!

[wtho]

So I was able to wrap the transformer, but I am not sure if this is the way to with ts-jest.

Why?

This example leads to a runtime error in JIT-compiled Angular projects <v7 using emitDecoratorMetadata, but in Angular projects v8 it works:

@Injectable()
export class BService {
  constructor(@Inject(forwardRef(() => AService)) public as: AService) {}
}

@Injectable()
export class AService {
}

Runtime Error with emitDecoratorMetadata: ReferenceError: Cannot access 'AService' before initialization.

More to read about it: angular/angular#30106 and microsoft/TypeScript#27519

Angular AOT always handled this, but JIT only since recently (since this PR angular/angular-cli#14473). Basically a test with this scenario would pass in Angular or karma, but not with our preset. This is achieved using the DecoratorDownlevelTransformer.

What does the transformer do

The transformer stores the constructor parameter types as JS values on the object inside a ctorParameters-property:

export class SomeClass { constructor(v: ClassInject) {} }

  becomes

export class SomeClass { constructor(v) { } } SomeClass.ctorParameters = () => [ { type: ClassInject } ]

Discussion

To make the existing angular-cli transformer work I had to import typescript on my own and call ts.createProgram, which seems something ts-jest tries to avoid, although I am not sure why, i just found this note, where it says that it is slow:

[...] If we don't return undefined it results in undefined === "undefined" and run createProgram again (which is very slow).

On the other hand ts-jest without isolatedModules became slower in bigger projects since v25.10, so maybe createProgram scales better? I am not a TypeScript internals expert, this is just a baseless guess...

ts.createProgram is required to gain access to the type checker, which is extensively used in the transformer, but is not available in the lightweight compiler ts-jest offers. Rewriting this transformer without the type checker is a task that is quite complicated, if not impossible (the type checker keeps track of class declarations in the project and can then re-reference them from other files).

I also used @angular/compiler-cli to parse the project configuration and the transformer itself, which is located inside @ngtools/webpack.

The wrapper would look something like this:

const { readConfiguration } = require('@angular/compiler-cli')
const { downlevelConstructorParameters } = require('@ngtools/webpack/src/transformers/ctor-parameters.js')
const ts = require('typescript')

function factory(cs) {
  const config = readConfiguration(cs.tsJest.tsConfig.value)
  const program = ts.createProgram(config.rootNames, config.options || {}, config.compilerHost)

  return downlevelConstructorParameters(() => program.getTypeChecker())
}

I would require more feedback from you guys, @thymikee and especially @ahnpnl or someone else from ts-jest, who is familiar with the TypeScript internals going on in ts-jest.

---

Update

I figured out we can create the program with the ts compiler module inside configSet, which removes the direct dependency to typescript and @angular/compiler-cli:

const { downlevelConstructorParameters } = require('@ngtools/webpack/src/transformers/ctor-parameters.js')

function factory(cs) {
  const program = cs.compilerModule.createProgram(cs.typescript.fileNames, cs.typescript.options, undefined)
  return downlevelConstructorParameters(() => program.getTypeChecker())
}

If the TS Program and Type Checker would be instantiated by ts-jest and available to the transformer, we could just include the original Angular transformer. See kulshekhar/ts-jest#1146 for the this request.

[schuchard]

FWIW - I've updated the Briebug schematic to support Angular 8. It includes some of the changes mentioned above in version 2.0.0 - https://github.com/briebug/jest-schematic