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
A can use B. However, AppModule Can only see A and what it exports — jriver27
Huh, you're right. It actually works. Weird. The problem appears to be sitting somewhere else then. Thanks! — fortuneNext

jriver27 jriver27 · Accepted Answer · 2018-01-10T16:41:24

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 { ... }

Import component from sub-module in Angular

1 Answers