Taiga UI select not working in angular 16

I have a problem when using select from taiga ui. The project uses Angular 16 and taiga ui 3.87ю

When opening the select the following error occurs

ERROR Error: Portals cannot be used without TuiPortalHostComponent
at get safeHost (taiga-ui-cdk-abstract.js:390:19)
at TuiDropdownPortalService.add (taiga-ui-cdk-abstract.js:398:21)
at TuiDropdownDirective.toggle (taiga-ui-core-directives-dropdown.js:109:56)
at Object.next (taiga-ui-core-abstract.js:41:71)
at ConsumerObserver.next (Subscriber.js:91:33)
at SafeSubscriber._next (Subscriber.js:60:26)
at SafeSubscriber.next (Subscriber.js:31:18)
at distinctUntilChanged.js:14:28
at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
at OperatorSubscriber.next (Subscriber.js:31:18)


I used the official documentation to install taiga ui and for used selecet.`

Project Dependencies:

"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/cdk": "^16.0.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"@taiga-ui/cdk": "^3.87.0",
"@taiga-ui/core": "^3.87.0",
"@taiga-ui/icons": "^3.87.0",
"@taiga-ui/kit": "^3.87.0",
"@taiga-ui/styles": "^3.87.0",
"@tinkoff/ng-dompurify": "^4.0.0",
"rxjs": "~7.8.0",
"taiga-ui": "^3.87.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
}


App.module

@NgModule({
declarations: [
AppComponent
],
imports: [
FormsModule,
ReactiveFormsModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
TuiRootModule,
TuiDialogModule,
TuiAlertModule,
TuiSelectModule,
TuiDataListWrapperModule
],
providers: [{provide: TUI_SANITIZER, useClass: NgDompurifySanitizer}],
bootstrap: [AppComponent]
})
export class AppModule { }


Template with select

<form [formGroup]="testForm">
<tui-select formControlName="testValue">
<tui-data-list-wrapper
*tuiDataList
[items]="items"
></tui-data-list-wrapper>
</tui-select>
</form>



Component with select


export class AppComponent {
testForm = new FormGroup({
testValue: new FormControl(),
});

items = ['1', '2'];
}



What could be the problem?

Continue reading...