bug: Angular import paths are incorrect with child components

I am interested in helping provide a fix!

Yes

Which generators are impacted?

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.

This is the code that generates Mitosis component imports:

mitosis/packages/core/src/helpers/render-imports.ts

Lines 154 to 161 in a3d65ca

    
           if (importMapper) { 
        
             return importMapper(component, theImport, importedValues, componentsUsed); 
        
           } 
        
           return importValue 
        
             ? `import ${isTypeImport ? 'type' : ''} ${importValue} from '${path}';` 
        
             : `import '${path}';`;

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

mitosis/packages/core/src/generators/angular.ts

Lines 464 to 471 in a3d65ca

    
               ${renderPreComponent({ 
        
                 component: json, 
        
                 target: 'angular', 
        
                 excludeMitosisComponents: !options.standalone && !options.preserveImports, 
        
                 preserveFileExtensions: options.preserveFileExtensions, 
        
                 componentsUsed, 
        
                 importMapper: options?.importMapper, 
        
               })}

Easiest way would be to set a default value for options.importMapper in the DEFAULT_OPTIONS:

mitosis/packages/core/src/generators/angular.ts

Line 279 in a3d65ca

const options = initializeOptions('angular', DEFAULT_OPTIONS, userOptions);

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


	if (importMapper) {
	return importMapper(component, theImport, importedValues, componentsUsed);
	}

	return importValue
	? `import ${isTypeImport ? 'type' : ''} ${importValue} from '${path}';`
	: `import '${path}';`;

	${renderPreComponent({
	component: json,
	target: 'angular',
	excludeMitosisComponents: !options.standalone && !options.preserveImports,
	preserveFileExtensions: options.preserveFileExtensions,
	componentsUsed,
	importMapper: options?.importMapper,
	})}