Angular 17 refuses to instance component

I cannt reproduce it with anything, and I’m completely out of explanations for why it coudl be happening… I have the following component (with sideElementIs3d set to true, so it shows the threes-js app):

<div>
   <img src="assets/img/thumb/square.jpg" alt="">
   <div *ngIf="!sideElementIs3d" [ngStyle]="{'background-image':' url(assets/img/right.png)'}">
   </div>
   <app-three-js-interactive *ngIf="sideElementIs3d"></app-three-js-interactive>
</div>

And the app-three-js-interactive component:

<canvas #canvas></canvas>

I have spent roughly 5 hours now, trying to figure out why the app-three-js-interactive is not created, and my HTML inspector just looks like this with absolutely nothing inside the component. No constructor call, no ngInit, no ngAfterViewInit, nothing…

enter image description here

Even after removing all the code from the component it still does not instantiate anything


@Component({
  selector: 'app-three-js-interactive',
  templateUrl: './three-js-interactive.component.html'
})
export class ThreeJsInteractiveComponent implements AfterViewInit {

  @Input() scene!: THREE.Scene;

  @ViewChild('canvas', { static: false }) canvasRef!: ElementRef<HTMLCanvasElement>;

  dog!: AnimationController;

  constructor(private canvasParentRef: ElementRef, private threeService: ThreejsProviderService) { 
    console.log("help!")
  }

  ngAfterViewInit(): void {
    console.log("help!")
  }

The module is declared in the app.module.ts and I’ve done everything I can think of to get it working but I am completely out of ideas, if I make a new component it works just fine, but this one component just does not want to be created in the place I am trying. It does work in a different location which is puzzling me even more… Does anyone have any idea why this is happening, or any other info you need to help me figure out what is going on…