Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Errors adding to declarations array with later versions of Angular #21

Open
StevenFewster opened this issue Jan 13, 2021 · 4 comments
Open

Comments

@StevenFewster
Copy link

StevenFewster commented Jan 13, 2021

Hi,
I've followed as per the README and am encountering the same issues as the person below. I've reviewed all closed issues in case this is a known issue already resolved but couldn't find anything specifically relating to Angular versions 9+ (I'm using 10).

Cannot declare 'CalendarHeatmap' in an NgModule as it's not a part of the current compilation angular2 calendar heatmap

https://stackoverflow.com/questions/60834457/importing-angular2-calendar-heatmap-causes-jit-compilation-error

Error is:
Cannot declare 'CalendarHeatmap' in an NgModule as it's not a part of the current compilation.

So following other suggestions, I attempted something like https://stackoverflow.com/questions/60248428/angular-app-cannot-compile-after-update-from-v8-to-v9 (see below) and used MyCalendarHeatmap in the declarations. This just prints out the div (unsurprisingly).

@Component({
  selector: 'calendar-heatmap',
  template: `<div #heatmap></div>`
})
export class MyCalendarHeatmap extends CalendarHeatmap {}

I see recent questions (so am assuming people using relatively recent Angular versions) so thinking someone must have a workaround?

thanks

UPDATE: FIXED

Just needed to use the right hook.
For anyone else needing the info, I've added the full error message above.
I plonked the below directly above my @NgModule declaration, but you may wish to extract it out to a shared module and then import that module for neatness.

@Component({
  selector: 'calendar-heatmap',
  template: `<div #root></div>`
})
export class MyCalendarHeatmap extends CalendarHeatmap {}

Haven't used this fully yet, but it looks great - thanks!

@PlastMan420
Copy link

PlastMan420 commented Feb 25, 2021

I'm getting this

Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (angular2-calendar-heatmap) which declares CalendarHeatmap has not been processed correctly by ngcc, or 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 tried that method but it started showing more nonsense.

@StevenFewster
Copy link
Author

StevenFewster commented Feb 25, 2021

It's not a module, it's a component, and should be in the declarations array of the module you want to use it in OR in a shared module (which also exports it) if you want to use it in multiple places - not in the imports array.

@PlastMan420
Copy link

It's not a module, it's a component, and should be in the declarations array of the module you want to use it in OR in a shared module (which also exports it) if you want to use it in multiple places - not in the imports array.

I missed this one. thanks a lot

@pushpendrabol
Copy link

It's not a module, it's a component, and should be in the declarations array of the module you want to use it in OR in a shared module (which also exports it) if you want to use it in multiple places - not in the imports array.

i am trying to implement as what you said. but i do not show anything on DOM. can you please help me out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants