Angular 4: Could not load summary for directive

[iranicus]

Heys, so currently we are unfortunately stuck on Angular 4 for awhile so not sure if its due to the version of Angular we are using but when running a test for a custom form control component that contains child components we seem to be getting the common error:

Error: Illegal state: Could not load the summary for directive ColourComponent.error properties: Object({ ngSyntaxError: true })

We are using the testbed approach and currently use MockComponent() for the two child components the component under test (ColourComponent) has within its template:

  configureTestSuite(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule],
      declarations: [ColourComponent, MockComponent(IndicatorComponent), MockComponent(PanelComponent)]
    })
  });

We are intentionally wanting to avoid using the common NO_ERRORS_SCHEMA within the testbed to detect template errors thus this is omitted.

The component ts itself:

@Component({
  selector: 'app-colour',
  templateUrl: './colour.component.html',
  styleUrls: ['./colour.component.scss'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: ColourComponent,
      multi: true
    }
  ]
})
export class ColourComponent extends BaseComponent {
  @Input()
  form: FormGroup;
  constructor(_injector: Injector) {
    super(_injector);
  }
}

And the template:

<div class="col-xs-12 col-sm-12 col-md-12">
    <app-panel heading="Colours"
        panelIdRef="colours_panel">
        <form [formGroup]="form">
            <div class="row pad-left-right">
                <app-indicator label="Colours"
                    idRef="colours" [required]="true"
                    formControlName="colours" optionOne="Yes"
                    optionTwo="No" [valueOne]="true" [valueTwo]="false"
                    [locked]="form.controls.locked.value"></app-indicator>
            </div>
        </form>
    </app-panel>
</div>

To my understanding this error normally occurs when child components are not declared anywhere in the testbed, its worth knowing that the child components themselves have their own child components too. Also the extended BaseComponent implements the ControlValueAccessor where we have our own implementation of the necessary functions since this is a custom form control component.

Any thoughts guys folks?
Thanks now

[ike18t]

Nothing obvious comes to mind when looking at your example. What version of ng-mocks are you currently using with your Angular 4 app? If you are on v8 I'd recommend downgrading to v7 but I'm not exactly sure if that is your problem or not. Do you mind trying to reproduce the issue in stackblitz or somewhere I have access?

[iranicus]

Yeah sure, will sort out a stackblitz now, see if I can replicate it.

[iranicus]

Hello again, managed to replicate the issue in a stackblitz,:
https://stackblitz.com/edit/angular-testing-dfdy1u

I updated the package.json to include the versions we are using with angular, jasmine, karma, typescript & of course ng-mocks (7.8.0). BTW a change, in that we use ng-bullet with our testbed build which is wrapped in the configureTestSuite() instead of the usual BeforeEach(async()). I have found that without using this though we still get the same errors (see the colour.component.spec.ts commented out code for the default testbed approach) so I don't think its an issue with using that.
I updated the original code in this ticket with using this too, also having checked some of the closed issues, I noticed one of the other errors that gets shown is Cannot read property 'annotations' of undefined which I'm not sure if this is the cause of the illegal state error. Anyway this was reported for issue #42 which was fixed so not sure if this is just another one of those cases.

UPDATE: One thing I have noticed is as soon as I update the version of Angular to 5 in the stackblitz the error goes away which points to an incompatibility with Angular 4.

UPDATE2: So I have checked the package.json in the earliest version of the code being tagged at 5.0.0-rc1 and it appears it depends on @angular/core@5.x as a peer dependency when we are running @angular/core@4.4.6. Am I right in therefore assuming that Angular 4 is not supported?
ty

[ike18t]

Hi @iranicus

Sorry for the much delayed response. You are correct that ng-mocks doesn't support Angular 5...I totally forgot about that. I believe that the old 0.7.0 version of mock-component has angular 4 support. For some reason stack blitz isn't allowing me to install deps so I was not able to try it out for myself.

[iranicus]

Hello there @ike18t
For the moment I have manually created my own mock components which do the job, we are planning on updgrading to Angular 8 however early next year. When that happens we will likely switch over to ng-mocks after I've trial ran it again when the time comes. Thanks now.
Richard