Angular 4 How do I use another modules components in a sibling modules component

Question

So just a little background, I am using Angular 4 and the AngularCli. The following is how my folders are structured:

app helper-components helper-components.module.ts views admin admin.module.ts views.module.js

So basically the admin directory has a few view components. helper-components directory has a bunch of components for structural parts of the site like navigation. Inside admin directory are the actual views of the admin section of the website. Essentially I want to expose the components from helper-components directory for use inside of the view components in the admin directory.

I've read docs that say you need to import the module into the component you want to use it in. I tried importing the HelperComponentsModule into both the ViewsModule and the AdminModule. I've also tried importing it into the AppModule.

I continue to get the error that the component I am trying to use from the HelperComponentsModule, is not a known element.

Answer 1

You need to explicitly export the components of the HelperComponentsModule, that you want to use in other modules.

Have a look at the Sharing Modules docs:

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ],
 exports:      [ CustomerComponent, NewItemDirective, OrdersPipe,
                 CommonModule, FormsModule ]
})