Нет провайдера для "NgComponentOutlet"
У меня есть приложение Angular 11, которое импортирует
@angular/material
,
@ngx-translate
и библиотека под названием icell-data-table .
Скачав пример проекта со страницы github, я смог запустить его без каких-либо проблем в моей локальной среде.
Но при извлечении его в демо Stadckblitz я столкнулся со странной ошибкой:
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
С проектом Stackblitz можно ознакомиться здесь . Есть идеи, чего в нем не хватает?
Обновление 1: как указал @yurzui, в
icell-data-table
и Angular 11. Я обновил библиотеку с правильной зависимостью от ng-dynamic-component, которая теперь является версией Angular11 (^8.0.0).
Но пример stackblitz по-прежнему отображает ошибку :(
1 ответ
Проблема здесь в том, что в stackblitz у вас есть две версии
@angular/common
упаковка.
@angular/common@11.1.1
@angular/common@9.1.13
Первый используется, когда Angular регистрирует провайдеров, второй вступает в игру, когда пришло время разрешить провайдера.
Давайте посмотрим, почему Angular не может разрешить этот токен. Вот простое объяснение:
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
класс определен в обоих пакетах, и они даже выглядят одинаково, но поскольку Angular использует объект для разрешения поставщиков, он терпит неудачу из-за
Map
равенство ключей основано на алгоритме sameValueZero
Теперь, почему у нас есть две версии пакета Angular в stackblitz. Это потому что
@i-cell/data-table
использует
ng-dynamic-component@6.1.0
который зависит от Angular 9
Итак, как только вы решите несовместимость этих версий, вы должны получить что-то вроде Forked Stackblitz.