Menu
I have two Modules with components which use each other. So I have to import "word" in "test" and "test" in "word" --> throw an error... How can I do ?
Module "test":
@NgModule({
declarations: [
AppTest1Component,
AppTest2Component,
],
imports: [
AppWordModule,
],
exports: [
AppTest1Component,
AppTest2Component,
],
})
export class AppTestModule {
}
Module "word":
@NgModule({
declarations: [
AppWordComponent,
],
imports: [
AppTestModule,
],
exports: [
AppWordComponent,
],
})
export class AppWordModule {
}
I import each other because of the template. The template of test1.component.ts calls word.component.ts et the template of word.component.ts calls test1.component.ts.
test1.html
<div class="app-word"></div>
word.html
<div class="app-test1"></div>
I tried to use a SharedModule but I don't achieve it...
519
In simplest terms, a circular import occurs when module A tries to import and use an object from module B, while module B tries to import and use an object from module A. We'll run the code from run.py, which just imports a.py. As you can see, we get an exception as soon as b.py tries to import a.py.
Changing the name of the Working file different from the module which is imported in the script can avoid the Circular Imports problem. Import the module: Avoid importing objects or functions from a module that can cause Circular Imports. It is good to import the whole module to avoid the Circular Import.
In some scenarios, we can duplicate the required code and solve circular dependency. Or we can create a new service and move that code to that new service to avoid circular dependency.
A circular dependency is when one of your modules imports another modules, which directly or via other modules imports the first module. Examples: Direct reference: A -> B -> A. // a.js import { b } from './b.js' // b.js import { a } from './a.js'
Maybe you can use content projection with ng-content directive to compose nested components, but it depends how you need to compose them, in example
// ComposeModule
@NgModule({
imports: [
CommonModule,
AppWordModule,
AppTestModule
],
declarations: [CompositionComponent],
exports: [CompositionComponent]
})
export class ComposeModule { }
// composition.component.html
<app-word>
<app-child-one header>
<app-word body>
</app-word>
</app-child-one>
<app-child-two body>
<app-word body>
</app-word>
</app-child-two>
</app-word>
// AppWordModule
@NgModule({
imports: [
CommonModule
],
declarations: [ WordComponent ],
exports: [ WordComponent ]
})
export class AppWordModule { }
// word.component.html
<div class="header">
<h2>app-word:header</h2>
<ng-content select="[header]"></ng-content>
</div>
<div class="body">
<h2>app-word:body</h2>
<ng-content select="[body]"></ng-content>
</div>
// AppTestModule
const COMPONENTS = [
ChildOneComponent,
ChildTwoComponent
]
@NgModule({
imports: [
CommonModule
],
declarations: [
...COMPONENTS
],
exports: [
...COMPONENTS
]
})
export class AppTestModule { }
// child-one.component.html
<div class="header">
<h2>app-child-one:header</h2>
<ng-content select="[header]"></ng-content>
</div>
<div class="body">
<h2>app-child-one:body</h2>
<ng-content select="[body]"></ng-content>
</div>
// child-two.component.html
<div class="header">
<h2>app-child-two:header</h2>
<ng-content select="[header]"></ng-content>
</div>
<div class="body">
<h2>app-child-two:body</h2>
<ng-content select="[body]"></ng-content>
</div>
You need to solve the problem architecturally.
You can either create a module that has both functionalities ... since they seem so closely coupled, it would be my first preference, or else you can break up the modules even more so that the features of one module that are required by the other are in their own module.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
