2

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

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

1 Answers1

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 { ... }
Liam
  • 22,818
  • 25
  • 93
  • 157
jriver27
  • 677
  • 4
  • 17
  • Well you could call my module A "SharedModule", but that doesn't solve the problem... – fortuneNext Jan 11 '18 at 10:33
  • @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)." – jriver27 Jan 11 '18 at 13:10