Solving error mismatch beetwen Angular versions

Today want present to you a lite development tool called “RepairMismatch”, that aid to me integrating recent angular packages in a Angular 4 project. May be many readers are think “it is complex?”, and I will say “well, depends”.

One year ago I was working in a Angular 4 project, and this year the work team needed update some features, then emerge the question “We have time for update the project to Angular 6, before of modify the features?”, the answer was “We think is not necessary for this”.

But later hapened that I needed use a Angular package compiled with Angular 6, and when compile the Angular 4 project with this package, on console we see a new error “ERROR in Metadata version mismatch for module …”, and we ask us, what happened here?

Searching on internet I found the answer “Usually this happen because of that Angular 4 compiler cannot understand metadata files version 4 of Angular packages (Angular 5+), only can read metadata files version 3 (Angular 4).”

One solution is upgrade your Angular 4 project to 5 or higher and maybe the best, but not always is easy. The other solution knew is change version number of metadata files from 4 to 3 in the packages compiled with Angular 5+.

RepairMismatch is a utility (node module) for repair error in metadata version mismatch between versions of Angular. This solution use the second approach for solve this problem.

Installation and a example of use

Installation:

npm i @jagcolombat/repair-mismatch --save-dev

Configure:
The module repairMismatch receive like parameter one object with three properties: modules, useState and mismatch.

modules: This property is required and expect a string array of node modules name´s, that you have in your folder node_modules or will have after npm install. These must are modules compiled with Angular 5 or higher.

useState: This property is used for optimize the repairMismatch process. Expect a boolean value and by default is false.

mismatch: This property is used for optimize the repairMismatch process. Expect a boolean value and by default is false. This property is used on combination with property useState.

If useState is set to true, when finish the repairMismatch process, mismatch will set to true. Of this manner when you run again the repairMismatch process, this verify if already was executed process, indicated by mismatch property equal to true, and not run again.

However, if you want force rerun again repairMismatch process, and in previous repairMismatch process, you set useState to true, you need set mismatch property to false for this new process.

On other hand, if you want always that execute repairMismatch process ignore mismatch property and rerun the process set useState to false.

Example of use:

1. In an Angular 4 project install repair-mismatch module

npm i @jagcolombat/repair-mismatch --save-dev

2. Create a file JavaScript, for example rpmm.js, and input the following snippet code:

const rpmm = require('repair-mismatch');
rpmm({ modules: ['ngx-vis'] });

Note: In this case i use ngx-vis@1.0.1 (compiled with Angular 6) and I want to use this in an Angular 4 project.

3. In package.json of your Angular 4 project in section script add the following:

 "prestart": "node rpmm.js"

4. When you execute npm start, for serve your angular-cli project, before is executed the script “prestart” and therefore the repairMismatch process.

This is like a first aid tool; remember that the recommended solution is update version of your Angular project.

I hope this will be useful for you, and I wait your feedback.