I have components as follows

S1 (stand-alone)

N1 (Non standalone) Base component auth-Module

Now I am using S1 in Base component and N1 in S1 and getting the circular dependency. Can you please help resolve it.

I have components as follows

S1 (stand-alone)

N1 (Non standalone) Base component auth-Module

Now I am using S1 in Base component and N1 in S1 and getting the circular dependency. Can you please help resolve it.

• angular
• typescript
• angular-standalone-components

3 Answers 3

Use Dependency Injection to Break the Cycle

Instead of directly importing N1 in S1, refactor N1 into a service and inject it into S1 instead of using it as a component.

First of all i think you have to make your ni component standalone as well.

Things you may understand

1: use the di instead of direct import

2: make an common service for repeating thing like we create for mui components

3: use lazy loading with nested routing in you project

In the BaseComponent add the import with forwardRef, this will help you avoid circular dependencies error.

@Component({
  ...
  imports: [
    ...
    forwardRef(() => S1Component),
    ...
  ],
  ...
})
BaseComponent {
  ...