CODEWITHSUNDEEP
angularangular13
The Dark Knight
The Dark Knight

Reputation: 5585

Type AgGridModule does not have 'ɵmod' property

I am currently upgrading my application from Angular 12 to Angular 13. I am using webpack 5, ag-grid 15.0.0 and ag-grid-angular 15.0.0. Now my compilation happens properly as far as the app is concerned . However , when the app tries to load in browser , I see this issue coming up : Type AgGridModule does not have 'ɵmod' property. .

enter image description here

Can anyone let me know as to what is wrong here ?

Upvotes: 1

Views: 1069

Answers (1)

The Dark Knight
The Dark Knight

Reputation: 5585

After a lot of research, I figured out that we needed to move away from ag-grid : 15 to latest version of these products : "ag-grid-angular": "^28.0.0", "ag-grid-community": "^28.0.2" . Post that, I had to make appropriate changes to the application code in the files which were using earlier version of the ag-grid.

The reason why NG 13 behaves weirdly with these packages is because 3rd party libs are not normally ivy compatible unless the authors of such libraries have made compatible ivy libraries available to you and you are using those .There are basically 2 ways to resolve such issues :

  1. Upgrade to latest version . Make appropriate changes in your application code after reading the docs .

  2. Use the postinstall script : ngcc so that after installation of libraries , ngcc can convert the 3rd party libraries into ivy compatible format . Sometimes ngcc may fail to identify your 3rd party library . In that case, create a file called : ngcc.config.js and add the following lines of code in there :

module.exports = {
  packages: {
    'your-3rd-party-library': {
      entryPoints: {
        '.': {}
      }
    },
  },
};

This will enable ngcc to find your library and process it to ivy compatible one . Remember , the ngcc.config.js must be kept in the same location as in package.json.

Output of ngcc when it processes non ivy compatible 3rd party libs :

Processing legacy "View Engine" libraries:
- angular-draggable-droppable [fesm2015/esm2015] (git+https://github.com/mattlewis92/angular-draggable-droppable.git)
- angular-resizable-element [fesm2015/esm2015] (git+https://github.com/mattlewis92/angular-resizable-element.git)
- @ng-idle/core [fesm2015/esm2015] (git+https://github.com/moribvndvs/ng2-idle.git)
- ng2-completer [es2015/esm2015] (oferh/ng2-completer)
- ngx-order-pipe [es2015/esm2015] (git+https://github.com/VadimDez/ngx-order-pipe.git)
Encourage the library authors to publish an Ivy distribution.

Note : The above 2 solutions will also work when we come across modules which are failing with the error : does not have emod property

Upvotes: 2

Related Questions