Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Angular import paths are incorrect with child components #1205

Open
1 of 12 tasks
sean-perkins opened this issue Jun 9, 2023 · 1 comment · May be fixed by #1208
Open
1 of 12 tasks

bug: Angular import paths are incorrect with child components #1205

sean-perkins opened this issue Jun 9, 2023 · 1 comment · May be fixed by #1208
Labels
bug Something isn't working

Comments

@sean-perkins
Copy link
Contributor

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/?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.
@sean-perkins sean-perkins added the bug Something isn't working label Jun 9, 2023
@samijaber
Copy link
Contributor

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)

@sean-perkins sean-perkins linked a pull request Jun 21, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(angular): import paths for child components sean-perkins/mitosis
2 participants
@samijaber @sean-perkins