Guide to update Taiga UI v4 -> v5

Review all changed code lines. Some of them contain new code comments (something like // TODO: (Taiga UI migration) ). In most cases these comments contain instructions how to manually migrate some deleted entities by new alternative. You can find out that your codebase now contains some imports from @taiga-ui/legacy . This package is a transitional state for many outdated entities before their full removal. Everything you find inside this package in the 5th major release will be removed in the 6th one. So, you can just continue to use them for a while. However, some of those components already have modern alternatives – they will be marked by comment with @deprecated tag (most IDEs displays the such entities as stricken-through). We strongly recommend to replace them by new alternatives as soon as possible!

Troubleshooting

We don't include any code formatting in our schematics on purpose. Otherwise, it will drastically slow down the overall process of schematics execution. So, use well-optimized prettier/eslint rules and power of your IDEs .

If you are WebStorm user. Just make right click on the root folder with the codebase of your recently migrated application. Choose "Optimize imports" from the context menu. It will automatically remove all unused imports across all the files in that folder.

If you are Visual Studio Code user. Use an Folder source actions extension to trigger built-in Organize Imports action in all files recursively in the root folder with the codebase of your recently migrated application.

Taiga UI depends on many other Taiga Family packages .

Yarn and NPM with enabled legacy-peer-deps config do not automatically install transitive peer dependencies. It means that you should manage them manually . Explore package.json of every used Taiga UI package. Find their peerDependencies and ensure that they are installed and their versions are compatible with constraints from Taiga libraries.

Nx < v22 has a known issue with ng migrate command. Bump Nx version or just run npm install followed by

Migration schematics recursively traverse every file and directory. This operation can be memory-intensive. If you encounter this error, try increasing the memory limit for the Node.js process.

For example:

The syntax for defining environment variables varies by OS and shell!
The command below is for Unix-based systems and Nx CLI.

If the problem persists – report the issue

Manually update all Taiga UI's packages to v5 (i.e. just change versions inside your package.json by yourself without any console commands and then run npm install ).
Check that node_modules/@taiga-ui/cdk/package.json contains the 5th major version

Execute:

Taiga UI

GitHub StackBlitz

Guide to update Taiga UI v4 -> v5

On this page

Before you update

Updating

Troubleshooting