Is it necessary to import Module2 into Module1 if a component from Module2 is being used in Module1, but only in the typescript and not the template? For instance, as a
@ContentChild(Component2) component2Although the application builds and runs fine when Module2 is removed from the imports list, is this considered bad practice?
In this scenario, the directive from Module2 is utilized in the typescript but not the template:
import { Directive2, Module2 } from '@org/library/module-2';
@Component({
selector: 'example',
template: `<ng-container [ngTemplateOutlet]="tpl" />`,
})
export class Component1 {
@ContentChild(Directive2, { read: TemplateRef })
tpl: TemplateRef<unknown> | null = null;
}
@NgModule({
imports: [CommonModule, Module2], // Is Module2 even needed as it's not used in the template
exports: [Component1],
declarations: [Component1],
})
export class Module1 {}
Example dependency for Module1.
@Directive({
selector: '[my-directive]',
})
export class Directive2 {}
@NgModule({
declarations: [Directive2],
exports: [Directive2],
})
export class Module2 {}
Within the Application (imports both Module1 and Module2 in AppModule):
import { Module1 } from '@org/library/module-1';
import { Module2 } from '@org/library/module-2';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, Module1, Module2],
template: `
<example>
<ng-template my-directive>
Hello World
</ng-template>
</example>
`,
})
export class App {}
bootstrapApplication(App);