Igniteui-angular: [igxGrid] Angular 9 - Error: Multiple components match node with tagname igx-grid-cell

[lorenzo-iovino]

Description

_When populate data in igxGrid it will fire console error and doesn't show any rows._
I obtain the error only when i populate values, if values is [], no error is fired.

I'm using the following version of angular libs

    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.0.1",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.0.1",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "igniteui-angular": "^9.0.7",
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "typescript": "~3.7.5"

• browser: Chrome

Steps to reproduce

1. Create a simple data grid component (template and component)
   Es:

Template _table-ignite.component.html_

<div class="table-ignite-container">
  <igx-grid #tableIgnite
            [data]="values$ | async">
    <igx-column *ngFor="let key of keys | async"
                field="{{key.field}}"
                [header]="key.field"
                [dataType]="key.dataType">
    </igx-column>
  </igx-grid>
</div>

Component _table-ignite.component.ts_

@Component({
  selector: 'pw-table-ignite',
  styleUrls: ['table-ignite.component.scss'],
  templateUrl: 'table-ignite.component.html'
})
export class TableIgniteComponent implements OnInit {

    public keys: Subject<Array<any>> = new Subject<Array<any>>();
    public values$: Subject<Array<any>> = new Subject<Array<any>>();

    constructor() {
    }

    ngOnInit() {
        this.values$.next([
            {
                 "id": 1,
                  "value": "hi"
            }
        ]);
        this.keys$.next([
            {
                 "field": "id",
                  "dataType": "number"
            },
             {
                 "field": "value",
                  "dataType": "string"
            }
        ]);
    }
}

Result

Errors in console and no data in the table.

The first error is:
ERROR ReferenceError: Hammer is not defined

and then a lot of this:
Error: Multiple components match node with tagname igx-grid-cell

Expected result

Normal behaviour of table population

Attachments

[MaartenGDev]

This is caused by the Angular 9 migration that removes the HammerJS import in main.ts(Check the Hammer error in the stacktrace). This can be fixed by adding the module to app.module.ts:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, 
+ HammerModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

Or adding the following in main.ts(not recommended because it prevents tree-shaking it):

import 'hammerjs';

patched main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ import 'hammerjs';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

[rkaraivanov]

@lorenzo-iovino
Also, you can always consult our update guide for major versions.

[lorenzo-iovino]

Thanks, it resolved the problem!