Imported Modules seems to be not accessible in dynamic components created

Question

i'm stuck on it since few hours now and i don't know what to do, here is my problem.

So, i'm using mapboxgl for creating map with popups binded to markers.

I had a first issue which was the html code of the popup when i was doing this :

let newPopup = mapboxgl.Popup().setHTML('<div (click)="openAlert()"</div>');

The angular code couldn't be interpreted by angular, so no directive and events were working. To fix that i decide to switch to dynamic components with a ComponentFactoryResolver.

Now that part works fine but all of my modules seems to be not accessible anymore like my MaterialModules. I explain :

Here is how i create my new PopupComponent in my map.component.ts:

constructor(public resolver: ComponentFactoryResolver, public injector: Injector) {
  mapboxgl.accessToken = environment.mapbox.accessToken;
  this.factory = this.resolver.resolveComponentFactory(PopupComponent);
}

ngOnInit() {

  this.map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v10',
    zoom: 14,
    center: ['50.6008333333', '26.2111111111']
  });

  const component = this.factory.create(this.injector);

  const newmarker = new mapboxgl.Marker().setLngLat([50.6008333333, 26.2111111111]).addTo(this.map);
  const newPopup = new mapboxgl.Popup().setDOMContent(component.location.nativeElement);
  newmarker.setPopup(newPopup);
  newmarker.togglePopup();
}

My popup.component.ts is really simple and barely doing nothing for now :

import { Component, Input } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';


@Component({
 selector: 'app-popup',
 templateUrl: './popup.component.html',
 styleUrls: ['./popup.component.css']
})

export class PopupComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry
      .addSvgIcon(
        'bar', sanitizer.bypassSecurityTrustResourceUrl('/assets/icon/bar.svg'));
  }
}

Here is the popup.component.html with nothing special :

<div class="popup-pict"></div>
<div class="popup-info">
  <div class="popup-titlediv">
    <span>Place Name</span>
      <mat-icon svgIcon="bar"></mat-icon>
      <mat-form-field>
        <input matInput placeholder="Input">
      </mat-form-field>
  </div>
</div>
<div class="popup-seemore">See more</div>

and here is finally my map.module.ts :

import { NgModule } from '@angular/core';

import { SharedModule } from '../shared/shared.module';

import { MapRoutingModule } from './map-routing.module';

import { MapComponent } from './map.component';
import { SearchboxComponent } from './searchbox/searchbox.component';
import { PopupComponent } from './popup/popup.component';

@NgModule({
  imports: [SharedModule, MapRoutingModule],
  declarations: [MapComponent, SearchboxComponent, PopupComponent],
  entryComponents: [PopupComponent]
})

export class MapModule {

}

You can notice in the html code of my popup that i use a "<mat-icon>" which a way to display svg icons in material but it's invisible. I also use a "<mat-form-field>" of material, this one is visible and have the correct style but no animations are working, it acts like a classic input.

I precise that in my SharedModule, i have my MaterialModule and in my MapComponenti have some materials directive that are working well. It seems that this is the fact of dynamically create a component who is producing this issue. I also have others module that are not working too.

I don't know what to do, i find no issues like this on google and no example of someone who is using code from a module (like FormsModule) in a dynamic component to compare and see what i'm doing wrong.