不同模块之间共享angular个组件

Question

Can i share component from module 1 in module 2 and share component from module2 in module 1?

I have two modules, module 1 is copy_role and module 2 is assign_role.

• Module 1 copy_role has two components.

• component 1 is copy-user-role and

• component 2 is copy-user-module

• Module 2 assign_role has one component ie assign-user-role

I am able to share component assign-user-role in module1 copy_role, same way i would like to use component 2 copy-user-module present in module1 in module2 assign_role, i am getting below error

 Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Maximum call stack size exceeded
    at C:\code\UI_APPLICATIONS_WS\test\test_sec\node_modules\@ngtools\webpack\src\ivy\loader.js:77:18

× Failed to compile.

Is this the right way or am i doing any mistake here?

Answer 1

The "Maximum call stack size exceeded" happens because you try to import module1 in module2 and vice-versa. Angular will try to import modules in an infinite loop resulting with this error, as I could reproduce in this StackBlitz

Given that you cannot declare a component in 2 modules, there are 2 usual solutions:

• Create a shared module and put all your reusable components in it (suitable for small projects)
• Create a mono-component module for each reusable component (better as you will only import module for components you will actually use, resulting in lighter modules.

For example, with the mono-component module:

Define the component:

@Component({
  selector: 'app-shared-component',
  template: '<div>Shared Component</div>',
})
export class MySharedComponent {}

Declare it in a module and export it:

@NgModule({
  imports: [],
  declarations: [MySharedComponent],
  exports: [MySharedComponent],
})
export class MySharedComponentModule {}

Then you can import it in 2 different modules:

@Component({
  selector: 'app-component-1',
  template: '<h1>Component 1</h1><app-shared-component></app-shared-component>',
})
export class MyComponent1 {}

@NgModule({
  imports: [MySharedComponentModule],
  declarations: [MyComponent1],
  exports: [MyComponent1],
})
export class Module1 {}


@Component({
  selector: 'app-component-2',
  template: '<h1>Component 2</h1><app-shared-component></app-shared-component>',
})
export class MyComponent2 {}

@NgModule({
  imports: [MySharedComponentModule],
  declarations: [MyComponent2],
  exports: [MyComponent2],
})
export class Module2 {}

Then import those 2 modules and use them:

@NgModule({
  imports: [BrowserModule, FormsModule, Module1, Module2],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Working StackBlitz here

Answer 2

I cannot answer concerning your "Maximum call stack size exceeded at" error.

However, if you want to reuse the same component in multiple modules, you could create a new module called "SharedModules" and declare the components in it.

You can then import the "SharedModules" inside module1 and module2. You will then have access to both component in module1 and module2.

Here is the angular Doc concerning Sharing modules: Documentation