bug: Angular import paths are incorrect with child components

[sean-perkins]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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

Reproduction case

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFATQkWIjgBhABbMWCipAB26TfGJkKcAOQceAYxWsjkiegAes%2BGxI5kTeCWSazMbprgAsgCe6uAQ2roAFGDkYKgAlIgScHBm4ajwANqaOCDoADRwGDAAcrnoALpwALwoGNh46JFU2OgAbuhU8TYpUOgwyFD%2BkckpcAA8LMBtAHyjYxPAmmDIMPMLqaio1QgI6xupEEzQAFzUfSxU%2BftjhIQ3KW04TMjoOzl59wcp4co4mgBzN4ISLtHQwRLVGZFfplPKgjq6Di4KBAmAcJ4vdDxL4bHhzA7jZSqUJacFwfE3AAS6CYxwAhHAAJKpf5wKBeOBLOAAJXQOB8hQAaq9CpgjsAWIVoHAADLAACOjBY9PW4x4U1mo26EkIQA%3D%3D%3D

Expected Behaviour

An additional import statement (or the existing one replaced) should import the generated module of the component, instead of the component class.

+import { ChildComponentModule } from "./child";
-import { ChildComponent } from "./child";

Actual Behaviour

The generated output is missing a necessary import for the Angular module:

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule, ChildComponentModule],
  exports: [MyComponent],
})

ChildComponentModule is not imported in the generated output.

Additional Information

Angular standalone components could be a solid replacement for modules to simplify the generated output.

[samijaber]

This is the code that generates Mitosis component imports:

https://github.com/BuilderIO/mitosis/blob/a3d65cad88d4a08460c09ef25cd7173d92093a21/packages/core/src/helpers/render-imports.ts#L154-L161

We actually have an importMapper here that can be passed as an option by generators, and is passed by the Angular generator:

https://github.com/BuilderIO/mitosis/blob/a3d65cad88d4a08460c09ef25cd7173d92093a21/packages/core/src/generators/angular.ts#L464-L471

Easiest way would be to set a default value for options.importMapper in the DEFAULT_OPTIONS: https://github.com/BuilderIO/mitosis/blob/a3d65cad88d4a08460c09ef25cd7173d92093a21/packages/core/src/generators/angular.ts#L279

So that it imports the correct thing (depending on whether options.standalone is true or false)