Skip to content

Cannot create component without inserting into DOM without the deprecated ComponentFactory #45263

@PowerKiKi

Description

@PowerKiKi

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Since Angular 13 ComponentFactory.create() is deprecated. It is advertised that we should instead use ViewContainerRef.createComponent(). However the behavior between those two methods are different and cannot necessarily replace each other for all use-cases.

My use-case is to create a component dynamically, not insert it into DOM, call a few custom methods on it, and then destroy the component. But ViewContainerRef.createComponent() will always insert the newly created component into DOM, wreaking havoc in my layout.

Basically I'd like to do something like that:

private validate(component: Type<DropdownComponent>): boolean {
    const injector = Injector.create({providers: this.getMyCustomProvider(), parent: this.getMyParentInjector()});
    const factory = this.componentFactoryResolver.resolveComponentFactory<DropdownComponent>(component);

    const dropdownComponentRef = factory.create(injector);
    const result = dropdownComponentRef.instance.isValid();
    dropdownComponentRef.destroy();

    return result;
}

Was it intentional that a component cannot be instantiated without being inserted into DOM anymore ? Or should it be considered a regression in the feature set of the framework ?

Or is there an alternative API that would allow me to instantiate and destroy components without ever inserting them into DOM ?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 13.2.5
Node: 14.19.0
Package Manager: yarn 1.22.17
OS: linux x64

Angular: 13.2.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.5
@angular-devkit/build-angular   13.2.5
@angular-devkit/core            13.2.5
@angular-devkit/schematics      13.2.5
@angular/flex-layout            13.0.0-beta.38
@schematics/angular             13.2.5
ng-packagr                      13.2.1
rxjs                            7.5.4
typescript                      4.5.5

Anything else?

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions