0

I have an Angular 11 application, which imports @angular/material, @ngx-translate, and a lib called icell-data-table.

Downloading the example project from the github page I was able to start it witout any problems on my local environment.

But upon extracting it to a Stadckblitz demo, I have encountered a strange error:

Error in /turbo_modules/@angular/compiler@11.1.1/bundles/compiler.umd.js (3057:21)
Template parse errors:
No provider for NgComponentOutlet ("onentTemplate [cellTemplate]="'componentTemplate'" let-row="row" let-col="col" let-idx="rowIdx">
[ERROR ->]<ng-container
*ngComponentOutlet="col.component; ndcDynamicInputs: getComponentInputs(row, col);"): ng:///DataTableModule/CellTemplatesComponent.html@23:2

The Stackblitz project can be found here. Any ideas about what is missing from it?

Update 1: as @yurzui pointed out, there were incompatible dependencies in icell-data-table and Angular 11. I have updated the lib with a proper dependency to ng-dynamic-component, which is now the Angular11 version (^8.0.0) of now.

But the stackblitz example still displays the error :(

ForestG
  • 17,538
  • 14
  • 52
  • 86

1 Answers1

1

The problem here is that in stackblitz you have two versions of @angular/common package.

@angular/common@11.1.1
@angular/common@9.1.13

The former is used when Angular is registering providers, the latter comes into play when it is time to resolve provider.

Let's take a look at why Angular can't resolve that NgComponentOutlet token. Here's a simple explanation:

import { NgComponentOutlet as outlet1 } from "@angular/common@11.1.1";
import { NgComponentOutlet as outlet2 } from "@angular/common@9.1.3";
 

const providers = new Map();
providers.set(outlet1, 'Any value');

console.log(providers.has(outlet2)); // false

The NgComponentOutlet class is defined in both bundles and they even look the same but since Angular uses Map object to resolve providers it fails due to in Map key equality is based on the sameValueZero algorithm

Now, why do we have two versions of Angular package in stackblitz. That because @i-cell/data-table uses ng-dynamic-component@6.1.0 which depends on Angular 9

So, once you solve this versions incompatibility you should get smth like Forked Stackblitz

yurzui
  • 205,937
  • 32
  • 433
  • 399
  • I will look into the said lib and update the dependency properly next week, awesome that you pointed that out! Just for curiosity: can you please tell me what did you exactly update in the forked example to make it work in it's current state? – ForestG Feb 06 '21 at 08:12
  • 1
    I intercepted save http request and substituted incompatible dependencies – yurzui Feb 06 '21 at 08:41
  • I have updated the `icell-data-table` project to depend on the proper version of `ng-dynamic-component@8.0.1` and published the new version of the lib. However, the problem still persists :( – ForestG Feb 08 '21 at 10:15
  • Now the problem is that stackblitz resolves dependencies for ng-dynamic-component as `@angular/common@11.1.2` but you're running `11.1.1` version. – yurzui Feb 08 '21 at 10:30
  • 1
    https://stackblitz.com/edit/icell-datatable-demo-ng11-8gxpft?file=src%2Fapp%2Fapp.component.ts I updated `@angular/core` and `@angular/common` to 11.1.2, replaced AppComponent selector with `my-app` and added `RouterModule.forRoot([])`to root NgModule – yurzui Feb 08 '21 at 10:33
  • really appreciate that you went ahead and fixed it. Although it seems to have some minor visual issues, it's working now - thanks for the help! – ForestG Feb 08 '21 at 12:21