Import component from sub-module in Angular

Question

So I've got my AppModule, module A, module B which is a submodule to A and component X declared in B.

My goal is to make X available app-wide (also in components like pages).

From my understanding, B needs X in declarations and exports, A needs B in imports and exports and AppModule needs A in imports. But the component X is unknown. What am I missing?

Thanks

Your description should work. Where do you use X component? stackblitz.com/edit/angular-uwwwrs?file=app%2Fapp.module.ts See also stackoverflow.com/questions/39601784/… — yurzui
– yurzui, Commented Jan 10, 2018 at 16:46
A can use B. However, AppModule Can only see A and what it exports — jriver27
– jriver27, Commented Jan 10, 2018 at 16:59
Huh, you're right. It actually works. Weird. The problem appears to be sitting somewhere else then. Thanks! — fortuneNext
– fortuneNext, Commented Jan 11, 2018 at 10:42

Liam · Accepted Answer · 2019-03-21 15:03:58Z

1

I think you are looking for a SharedModule.

https://angular.io/guide/ngmodule-faq#sharedmodule

SharedModule

Create a SharedModule with the components, directives, and pipes that you use everywhere in your app. This NgModule should consist entirely of declarations, most of them exported.

The SharedModule may re-export other widget modules, such as CommonModule, FormsModule, and NgModules with the UI controls that you use most widely.

...

import { NgModule } from '@angular/core';
import { XComponent } from './XComponent';

@NgModule({
  declarations: [XComponent],
  exports: [XComponent]
})
export class ModuleX { }

@NgModule({
...
  imports: [
    ModuleX
  ]
...
})
export class AppModule { ... }

edited Mar 21, 2019 at 15:03

Liam

30k28 gold badges143 silver badges206 bronze badges

answered Jan 10, 2018 at 16:41

jriver27

8805 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fortuneNext Over a year ago

Well you could call my module A "SharedModule", but that doesn't solve the problem...

jriver27 Over a year ago

@fortuneNext I wouldn't make A a SharedModule. I would create a new Module X that exports ComponentX and import it into AppModule. This should solve your problem. "My goal is to make X available app-wide (also in components like pages)."

Collectives™ on Stack Overflow

Import component from sub-module in Angular

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related