🐞 - `TuiDocCodeComponent` doesn't work in Angular 16

[skoropadas]

Playground Link

https://stackblitz.com/edit/stackblitz-starters-nu8bci?file=src%2Fmain.ts

Description

TuiDocCodeComponent doesn't work in Angular 16 because of ngx-highlightjs dependency that doesn't support Ivy.

Angular version

16.x.x

Taiga UI version

3.30.0

Which browsers have you used?

• [X] Chrome
• [X] Firefox
• [X] Safari
• [X] Edge

Which operating systems have you used?

• [X] macOS
• [ ] Windows
• [ ] Linux
• [ ] iOS
• [ ] Android

[splincode]

It works https://stackblitz.com/edit/stackblitz-starters-38gjxm

[skoropadas]

@splincode only in your stackblitz example because it uses old angular compiler.

How to reproduce it based on your stackblitz example:

• Download your project from the stackblitz
• Update @angular-devkit/build-angular, @angular/cli, @angular/compiler-cli in the package.json to 16.x.x version
• Update typescript package in the package.json to 5.0.x version
• npm i --force
• replace import 'zone.js/dist/zone'; with import 'zone.js'; in main.ts file;
• run app ng s

How to check that the newest version fixes it:

• update the version of the ngx-highlightjs to the latest one in the package.json (9.0.0)
• npm i --force
• if you try to run app you won't see any errors but the code component will be broken because it still uses the old version of the highlighter
• but if you remove node_modules/@taiga-ui/addon-doc/node_modules/ngx-highlightjs folder and re-run the app again you will see that now it works

[skoropadas]

Why it can't work: 4.x.x version of the highlighter was compiled with ivy: false which mean it used ViewEngine compiler that was removed in the Angular 16. But the latest version uses partial mode that allows it to work with the Angular 16. I hope that will be enough.

[splincode]

@skoropadas thank you for research, we need to investigate this issue

[splincode]

Link: https://github.com/Tinkoff/taiga-ui/issues/3546