Angular-cli: entryComponents required in tests

[pburkindine]

We are having to declare entryComponents in tests after upgrading to A9; the documentation indicates this should not be necessary

@NgModule({
  entryComponents: [
    xyz,
  ]
})
export class ImportModule {}

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [RouterTestingModule, ImportModule],
...

[pacocom]

I have the same problems!!!

[pburkindine]

The entryComponents in question are all present in the declarations in the TestBed btw

[AndrewKushnir]

Hi @pburkindine, could you please provide a minimum repro (in a form of GitHub repo), so that we can perform further investigation? Thank you.

[pacocom]

Hello!

I have a example:

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatBottomSheetModule, MatBottomSheetRef } from '@angular/material/bottom-sheet';
import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ActivatedRoute } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedModule } from '@shared';
import { CommonTermsModule } from '@shared-components';
import { DownloadUserDataComponent } from '../download-user-data';
import { DownloadModalComponent } from './download-modal.component';

const mockActivatedRoute = {
  parent: {},
};

describe('DownloadModalComponent', () => {
  let component: DownloadModalComponent;
  let fixture: ComponentFixture<DownloadModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [DownloadModalComponent, DownloadUserDataComponent],
      imports: [
        NoopAnimationsModule,
        RouterTestingModule,
        HttpClientTestingModule,
        MatBottomSheetModule,
        SharedModule,
        CommonTermsModule,
        ReactiveFormsModule,
        FormsModule,
      ],
      providers: [{ provide: ActivatedRoute, useValue: mockActivatedRoute }, { provide: MatBottomSheetRef }],
    })
      // TODO: Remove next line when we know how Angular 9 test entryComponents
      // IF I REMOVE THIS LINE TEST BREAK
      .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DownloadUserDataComponent] } })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DownloadModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

If I remove next line test ERROR!
.overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [DownloadUserDataComponent] } })

Thank!

[AndrewKushnir]

Hi @pacocom, thanks for additional information.

Could you please create a GitHub repo with a minimum possible repro (I assume some of the modules in imports section and providers may not affect), so that we can perform further investigation?

I also want to confirm if you use Ivy to reproduce the problem (looks like the error message was produced by View Engine)?

Thank you.

[pburkindine]

@AndrewKushnir I have not had time this work week but I will try to repro this weekend; I wanted to make sure it was on the books

[archasek]

Hi @AndrewKushnir, I guess I have a similar problem here.

The app works ok without entryComponents, but tests don't.

https://github.com/archasek/angular-playground

Crucial line: https://github.com/archasek/angular-playground/blob/master/src/app/app.component.spec.ts#L32

Just run tests with npm test.

Thanks

[AndrewKushnir]

Hi @archasek, thanks for the repository with the setup that triggers the issue.

I checked error logs and found out that ViewEngine is used to run the tests and that's the reason why entryComponent issue happens. I looked at the package.json file and found out that you configured your project to use Jest and it looks like additional configuration might be required.

I'm transferring this issue to Angular CLI repo for further investigation.

Thank you.

[alan-agius4]

Hi, the problem with Jest is that it doesn't use @ngtools/webpack to bundle and resolve the packages but rather rely on Node.Js resolutions. These modules are not being transformed using NGCC and thus modules are resolved to their VE version.

You will need to run ngcc manually as a postinstall hook so that all modules are transformed to be Ivy compatible.

"postinstall": "ngcc --properties main"

[archasek]

@alan-agius4 thanks so much, works like a charm for a demo repo.
Thanks @AndrewKushnir !

Btw. for those who are experiencing errors with $localize() in Jest tests after this change: https://github.com/thymikee/jest-preset-angular/issues/347#issuecomment-584825171

[pburkindine]

@alan-agius4
I was able to get things going by replacing the recommended postinstall (ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points) with ngcc --properties main. In particular, I had to remove --create-ivy-entry-points to get this to work. I am wondering what the implications of turning that flag off are.

UPDATE: I changed the postinstall to ngcc --properties es2015 as the main target was compiling to UMD. This caused the tests to fail as well (either main with --create-ivy-entry-points or es2015 target will cause the entryComponents error).

[pburkindine]

@archasek thanks for the tip on the $localize setup issue which was also required to get things going

[pburkindine]

@alan-agius4 actually I spoke too soon, simple tests that e.g. a destroy$ subject is stopping some ngrx pipe fail when using the main/UMD target which weren't failing before

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}