Angular 13 upgrade - Error: Unknown keyword formatMinimum

Problem

I recently upgraded my Angular project from version 12 to version 13 for our massive project at Ascenda.

After the upgrade, I ran into an error when I tried to build the project.

Error: Module build failed(from ./node_modules/mini-css-extract-plugin/dist/loader.js):

Error: Unknown keyword formatMinimum
    at get (/build/node_modules/ajv-keywords/dist/index.js:25:15)
    at ajvKeywords (/build/node_modules/ajv-keywords/dist/index.js:10:13)
    at Object.<anonymous> (/build/node_modules/webpack/node_modules/schema-utils/dist/validatejs:65:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/build/node_modules/webpack/node_modules/schema-utils/dist/indexjs:6:5)

As we can see, the error is related to the formatMinimum keyword in the ajv-keywords package.

The interesting problem is that the error only occurs on CI/CD when you delete the node_modules folder and reinstall the dependencies.

Investigation

First, to understand what is going on, we need to know where ajv-keywords is used in the node_modules folder.

npm ls ajv-keywords

As we can see, there are two versions of ajv-keywords in the node_modules folder.

• [email protected] is used by schema-utils.
• [email protected] is used by webpack and other packages.

We can clearly see npm indicated that our adj-keywords version is invalid in two places.

Where by [email protected] is required, however [email protected] is installed.

npm deduped

On the above screenshot, we can see that npm has indicated that adj-keywords was deduped.

But what is npm deduped?

deduped is short for “deduplicated” (duplicates were removed).

According to the npm documentation, npm dedupe is used to remove duplicate packages.

Searches the local package tree and attempts to simplify the overall structure by moving dependencies further up the tree, where they can be more effectively shared by multiple dependent packages.

In other words, it looks if multiple packages have the same dependencies (meaning the same packages and version range) and “points” them to the same package.

Meaning on our example above, despite many packages requiring [email protected], npm will only install this package once. Instead of installing it multiple times.

Solution

To solve this problem, we need to execute npm update to update the npm packages.

It will result in the package-lock.json file being updated and you will need to commit the changes.

npm update

After the update, we can see that the ajv-keywords version is correct without the invalid warning anymore.

Conclusion

npm update is a helpful command to update the npm packages that you might need to use when you encounter the npm deduped problem.

After resolving this problem, Our team at Ascenda also decided two things:

• Upgrade the Angular project to version 14 straight away. Our first attempt at Angular 14 upgrade also failed due to the same npm deduped issue.
• Use Yarn instead of npm to manage the dependencies.

The Angular team recommends using Yarn to manage the dependencies as well.