Angular missing imports

[WesselSmit]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Preact
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/playground/?outputTab=G4VwpkA%3D&code=JYWwDg9gTgLgBAbzgIQK4xhAdnAvnAMyghDgHIA6AegCN1MsKAbYGAUzIChO2APSWHAAmbAgENUTeAVRYAxjGDY4AWQCeAYRKQsbLDAAUASkSc4cKGxiooOA2fNwAPEOAA3AHwPHcABJsmJggAQjgASTg5MRwoWThgHAAlNjEFABo4ADVUNgyAZQgWIQzoOAAZYABHVGAhYO4fcyc0DGwPdRR6bCcqFoYvHx7XTwcjAG5OXCA%3D%3D%3D

Expected Behaviour

When using a component in another component.
E.g. using a Button component in a Counter component:

<Counter>
  <Button />
  <input />
  <Button />
</Counter>

The generated angular component has a @NgModule that has the ButtonModule specified in it's imports array (which is correct). But it does not actually import the ButtonModule causing an error.

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";

import Button from "../button/button"; // <-- this line is only here if you have 'preserveImports: true' in your config

@Component({
  selector: "counter, Counter",
  template: `
    <div class="counter">
      <button ...></button>
      <input ... />
      <button ... ></button>
    </div>
  `,
  styles: [ ... ],
})
export default class Counter { ... }

@NgModule({
  declarations: [Counter],
  imports: [CommonModule, ButtonModule], // <-- this ButtonModule is never imported
  exports: [Counter],
})
export class CounterModule {}

We can use in preserveImports: true in mitosis.config.js but this results in the lite.tsx import being copied to the angular output which also does not work (as it does not actually import the module).

Actual Behaviour

The ButtonModule is never imported in the Counter component.

Even with preserveImports it does not work.

Additional Information

No response