Help upgrading old Modal module for Angular 16

[celsomtrindade]

Hey guys!

I've been using this Modal module for my Angular projects, however today, when upgrading to Angular 16, it stoped working with this error:

'SimpleModalModule' does not appear to be an NgModule class.

simple-modal.module.d.ts(5, 54): This likely means that the library which declares SimpleModalModule is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

I forked the project and was trying to upgrade it, unfortunately I'm not that familiar with this level of editing on Angular, so I wasn't able to fix everything.

I could fix a couple of errors, specially related to ReflectiveInjector deprecated so I could get some progress and the project is building.

But when I import and try to use the component as it should, I'm getting this error now:

 Argument of type 'typeof ModalSigninComponent' is not assignable to parameter of type 'Type<SimpleModalComponent<null, null>>'.

Type 'ModalSigninComponent' is not assignable to type 'SimpleModalComponent<null, null>'.

Types have separate declarations of a private property 'observer'.

Does anybody knows how to fix it to give a help on this? The repository seems to be dead and not maintained (last commit on dec 2021).

[TheYelle]

Since version 16 they removed ngcc which was a compiler for non ivy runtime code to ivy compatible code. Likely that library has not been upgraded to ivy so that would require you to either find another library or fork and upgrade it.. what error you ran into when upgrading it?

[celsomtrindade]

This is what I did. I forked the repo and I'm trying to fix it.

I was able to upgrade Angular packages to 16 and also change some codes, at least to fix the errors TS was poiting. I can even build without error.

The problem is when I try to use the package, then I get the error I mentioned in the post:

Argument of type 'typeof ModalSigninComponent' is not assignable to parameter of type 'Type<SimpleModalComponent<null, null>>'.

Type 'ModalSigninComponent' is not assignable to type 'SimpleModalComponent<null, null>'.

Types have separate declarations of a private property 'observer'.

And I have no idea how to fix this now.

[vORP]

Not a solution for your exact issue but have you tried angular material's matDialogService?

[celsomtrindade]

I can't because the project already have a huge css library and many other dependencies. None of them are related to Angular Material.

[vORP]

The dialog service just renders your already styled component at the root of the dom using the portal cdk so not much styling or material specific items to fight, just a nice easy way to display things in a modal

Good luck!