angular2-calendar-heatmap icon indicating copy to clipboard operation
angular2-calendar-heatmap copied to clipboard

Errors adding to declarations array with later versions of Angular

Open StevenFewster opened this issue 3 years ago • 4 comments

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!

StevenFewster avatar Jan 13 '21 12:01 StevenFewster

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.

PlastMan420 avatar Feb 25 '21 07:02 PlastMan420

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.

StevenFewster avatar Feb 25 '21 09:02 StevenFewster

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

PlastMan420 avatar Feb 25 '21 18:02 PlastMan420

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.

pushpendrabol avatar Jan 06 '23 06:01 pushpendrabol