Component in angular not loading after declaring it in shared.module.ts

Question

I have component called "graph" that was being used in only one component. Now I want to use it in another component too, so I put it in shared.module.ts and deleted it from the "declarations" section of the previous module, but now the "graph" component just won't render

My shared.module.ts now looks like this

@NgModule({
    declarations: [
      SelectFilterComponent,
      MapMenuComponent,
      NameValueElementComponent,
      GraphComponent // This is the graph component in question
    ],
    imports: [
      CommonModule,
      // And a bunch of imports
    ],
    exports: [
      SelectFilterComponent,
      CommonModule,
      // Bunch of exports
      GraphComponent // And here it is in the export
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class SharedModule {
    static forRoot():ModuleWithProviders<SharedModule>{
      return {
        ngModule:SharedModule,
        providers: [// Providers]
      };
    }
  }

This is a snippet of a template that uses GraphComponent

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 w-full mt-8">
       <div graph // The selector in the graph.component.ts is div[graph]
              bunch of bindings and css
       ></div>
</div>

And this is the module that previously had GraphComponent in its "declarations"

@NgModule({
  declarations: [
    // Bunch of components, obviously not including GraphComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: ':id', component: MeteoStationContainerComponent}
    ]),
    SharedModule,
    // Bunch of modules
  ],
  providers: [// And a provider]
})
export class MeteoStationDetailModule { }

I was expecting it to work because I thought that putting a module in shared.modules magically makes said module available for everyone that uses SharedModule in their imports.

GraphComponent simply doesn't render, it's as if it wasn't even in the template because the console gives no errors.

We are using lazy loading if this is of any help.

Please forgive me if I missed crucial information as I spent all afternoon trying to fix this and I'm tired. Let me know if you need more info or if you need to see other components

EDIT: I forgot to include that we are using plotlyjs in angular. After some more debugging, I noticed that the component actually loads, but the data, config and layout bindings are not present when checking out the HTML of the loaded page. So now the question is, how to I pass these 3 pieces of data to plotly when the component that uses plotly is in shared.module?

Answer 1

Turns out I had to include PlotlyModule in shared.module.ts, declare PlotlyModule.plotlyjs = PlotlyJS; using these imports

import { PlotlyModule } from 'angular-plotly.js';
import * as PlotlyJS from 'plotly.js-dist-min';

Now the graphs load correctly, but I have another issue with routing which I believe is unrelated to this thread. Thank you Amr Saatan for your answer