No provider for "NgComponentOutlet"

Question

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/[email protected]/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 :(

Answer 1

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

@angular/[email protected]
@angular/[email protected]

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/[email protected]";
import { NgComponentOutlet as outlet2 } from "@angular/[email protected]";
 

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 [email protected] which depends on Angular 9

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