entryComponents with Angular 9 (Ivy) #353

timdeschryver · 2020-02-29T15:13:23Z

With Angular 9 (Ivy), we no longer have to provide entryComponents.
This seems to fail if we're using Jest as our test runner.
The same test does pass with Jasmine/Karma.

If we run it with Jest, we're getting the following error

No component factory found for DynamicButtonComponent. Did you add it to @NgModule.entryComponents?

      at noComponentFactoryError (../packages/core/src/linker/component_factory_resolver.ts:17:17)
      at CodegenComponentFactoryResolver.Object.<anonymous>.CodegenComponentFactoryResolver.resolveComponentFactory (../packages/core/src/linker/component_factory_resolver.ts:72:13)
      at NgComponentOutlet.Object.<anonymous>.NgComponentOutlet.ngOnChanges (../packages/common/src/directives/ng_component_outlet.ts:105:36)
      at checkAndUpdateDirectiveInline (../packages/core/src/view/provider.ts:207:15)
      at checkAndUpdateNodeInline (../packages/core/src/view/view.ts:429:14)
      at checkAndUpdateNode (../packages/core/src/view/view.ts:389:12)
      at debugCheckAndUpdateNode (../packages/core/src/view/services.ts:430:44)
      at debugCheckDirectivesFn (../packages/core/src/view/services.ts:391:7)
      at Object.eval [as updateDirectives] (ng:/DynamicHostModule/DynamicHostComponent.ngfactory.js:14:9)
      at Object.debugUpdateDirectives [as updateDirectives] (../packages/core/src/view/services.ts:385:19)
      at checkAndUpdateView (../packages/core/src/view/view.ts:359:12)
      at callViewAction (../packages/core/src/view/view.ts:615:11)
      at execComponentViewsAction (../packages/core/src/view/view.ts:559:7)
      at checkAndUpdateView (../packages/core/src/view/view.ts:370:3)
      at callWithDebugContext (../packages/core/src/view/services.ts:629:23)
      at Object.debugCheckAndUpdateView [as checkAndUpdateView] (../packages/core/src/view/services.ts:346:10)
      at ViewRef_.Object.<anonymous>.ViewRef_.detectChanges (../packages/core/src/view/refs.ts:260:16)
      at ComponentFixture.Object.<anonymous>.ComponentFixture._tick (../../packages/core/testing/src/component_fixture.ts:107:28)
      at ../../packages/core/testing/src/component_fixture.ts:120:36
      at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:396:30)
      at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:395:36)
      at Object.onInvoke (../packages/core/src/zone/ng_zone.ts:302:25)
      at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:395:36)
      at Zone.run (node_modules/zone.js/dist/zone.js:153:47)
      at NgZone.Object.<anonymous>.NgZone.run (../packages/core/src/zone/ng_zone.ts:178:50)
      at ComponentFixture.Object.<anonymous>.ComponentFixture.detectChanges (../../packages/core/testing/src/component_fixture.ts:120:19)
      at src/app/dynamic-host.component.spec.ts:15:13
      at node_modules/tslib/tslib.js:113:75
      at new ZoneAwarePromise (node_modules/zone.js/dist/zone.js:915:33)
      at Object.__awaiter (node_modules/tslib/tslib.js:109:16)
      at src/app/dynamic-host.component.spec.ts:13:49
      at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:396:30)
      at ProxyZoneSpec.onInvoke (node_modules/zone.js/dist/proxy.js:117:43)
      at ZoneDelegate.invoke (node_modules/zone.js/dist/zone.js:395:36)
      at Zone.run (node_modules/zone.js/dist/zone.js:153:47)

See https://github.com/timdeschryver/jest-dynamic-ng-repro for a reproduction.

The text was updated successfully, but these errors were encountered:

wtho · 2020-02-29T16:13:49Z

Ok, so this is related to ngComponentOutlet and dynamic components.

I think Ivy and its ASTTransformers are doing more under the hood to gather the metadata for entry components.
So we basically have two options:

we wait for ts-jest to provide a better compiling runtime with ts-program capabilities so we can use the angular transformers
we dig in the Angular compiler source code, understand what's happening and write our own transformer. Findings and PRs welcome!

Until then, I guess you have to declare it in .spec files as entryComponents (should work - not tested).

ahnpnl · 2020-02-29T16:24:49Z

FYI, according to ts-jest source code it only takes into account of transformers which are manually defined by users (via ts-jest config). It doesn’t know anything about angular.

I wonder if providing angular transformers to ts-jest can solve the issue (point 1)

I agree that we need to know what ivy does to find out a proper way. (point 2)

LayZeeDK · 2020-03-01T08:30:49Z

Can you verify whether getTestBed (called in setupJest.ts) returns an instance of TestBedViewEngine or TestBedRender3?

timdeschryver · 2020-03-01T09:00:43Z

It was using the TestBedViewEngine , after manually transforming the code, the test passes.
While this is a solution, it isn't optimal.
It means that after every change made to the component, we will have to run this command (which isn't fast enough to do on a regular basis imho), and that we can't use the jest watch command.

"pretest": "ngcc --properties main"

See angular/angular-cli#17110 (comment)

ahnpnl · 2020-03-01T09:22:26Z

related to the discussion in #347, see explanation

LayZeeDK · 2020-03-01T15:57:04Z

It should only be necessary to run ngcc after npm install/yarn install which it already does when using ng update.

timdeschryver · 2020-03-03T07:02:00Z

I don't know what I did wrong on Sunday, but after running ngcc --properties main it does work.
Even when the are component's modified.

ahnpnl · 2020-03-03T07:08:14Z

Ngcc should only modify internal angular codes I think, so run once should be enough to be compatible with Ivy and it’s unrelated to the project’s code base.

LayZeeDK · 2020-03-04T21:31:29Z

ngcc runs on all libraries. Our app, Angular, 3rd party dependencies. Every time a package update/addition happens, it will need to be rerun (and with the right parameters for Jest).

mousedownmike · 2020-05-28T12:47:09Z

I can confirm that I was able to override entryComponents as suggested by @wtho. For context, the error I was getting was:

Error: No component factory found for VerifyLedgerComponent. Did you add it to @NgModule.entryComponents?

I added VerifyLedgerComponent to declarations and then used overrideModule to put it in the entryComponents. Here's what worked for me:

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LedgerComponent, VerifyLedgerComponent],
      imports: [LedgerCoreModule, MatDialogModule, NoopAnimationsModule],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .overrideModule(BrowserDynamicTestingModule, {
        set:
          {entryComponents: [VerifyLedgerComponent]}
      })
      .compileComponents();
  }));

Closes #108 Closes #288 Closes #322 Closes #353 Closes #622 BREAKING CHANGE: With the new jest transformer, `jest-preset-angular` now switches to default to use this new transformer and no longer uses `ts-jest` to transform codes. Users who are currently doing in jest config ``` // jest.config.js module.exports = { // [...] transform: { '^.+\\.(ts|js|html)$': 'ts-jest', }, } ``` should change to ``` // jest.config.js module.exports = { // [...] transform: { '^.+\\.(ts|js|html)$': 'jest-preset-angular', }, } ``` `isolatedModule: true` will still use `ts-jest` to compile `ts` to `js` but you won't get full compatibility with Ivy.

ahnpnl added the ivy Ivy compatible label Mar 1, 2020

krokofant mentioned this issue May 29, 2020

Add support for entryComponents testing-library/angular-testing-library#100

Closed

wtho mentioned this issue Jul 9, 2020

Ivy compatibility #409

Closed

ahnpnl mentioned this issue Oct 8, 2020

Compiler #543

Closed

ahnpnl mentioned this issue Oct 20, 2020

feat: use angular compiler api to transform codes #562

Merged

9 tasks

ahnpnl closed this as completed in #562 Dec 12, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

entryComponents with Angular 9 (Ivy) #353

entryComponents with Angular 9 (Ivy) #353

timdeschryver commented Feb 29, 2020

wtho commented Feb 29, 2020

ahnpnl commented Feb 29, 2020

LayZeeDK commented Mar 1, 2020 •

edited

Loading

timdeschryver commented Mar 1, 2020

ahnpnl commented Mar 1, 2020

LayZeeDK commented Mar 1, 2020 •

edited

Loading

timdeschryver commented Mar 3, 2020

ahnpnl commented Mar 3, 2020

LayZeeDK commented Mar 4, 2020

mousedownmike commented May 28, 2020 •

edited

Loading

entryComponents with Angular 9 (Ivy) #353

entryComponents with Angular 9 (Ivy) #353

Comments

timdeschryver commented Feb 29, 2020

wtho commented Feb 29, 2020

ahnpnl commented Feb 29, 2020

LayZeeDK commented Mar 1, 2020 • edited Loading

timdeschryver commented Mar 1, 2020

ahnpnl commented Mar 1, 2020

LayZeeDK commented Mar 1, 2020 • edited Loading

timdeschryver commented Mar 3, 2020

ahnpnl commented Mar 3, 2020

LayZeeDK commented Mar 4, 2020

mousedownmike commented May 28, 2020 • edited Loading

LayZeeDK commented Mar 1, 2020 •

edited

Loading

LayZeeDK commented Mar 1, 2020 •

edited

Loading

mousedownmike commented May 28, 2020 •

edited

Loading