Angular2 access submodule component

Question

I have an Angular2 application with submodules:

├───app (module)                                 
│   ├───authentication (module)                 
│   │   ├───components                  
│   │   │   ├───login                   
│   │   │   ├───sign-in                 
│   │   │   ├───sign-up                 
│   │   │   ├───socials-callback        
│   │   │   └───socials-sign-in         
│   │   ├───models                      
│   │   └───services                    
│   ├───components                      
│   │   └───nav-bar                     
│   ├───home (module)                           
│   ├───shared (module)                          
│   │   ├───components                    
│   │   │   └───search-dropdown         
│   │   └───services                    
│   └───user (module)                             
│       ├───models                      
│       └───services

Each components are declared in the module_name.module.ts file (of their module). Each modules files are imported in the app.module.ts file.

Here is my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import ...

import { SharedModule }    from './shared/shared.module';

@NgModule({
  imports: [
    AppRoutingModule,
    ...
    SharedModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My shared.module.ts file:

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

import { SearchDropdownComponent } from './components/search-dropdown/search-dropdown.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SearchDropdownComponent
  ]
})
export class SharedModule { }

When I try to access to SearchDropdownComponent from a template of my app module, I have an error telling my that there is no component corresponding to it.

But when I add the SearchDropdownComponent import directly on my app.module.ts file, it works.

Isn't it possible to access to a component of a sub module? I am doing something wrong?

Ronald Zarīts · Accepted Answer · 2016-10-20 18:36:01Z

10

To make a component available outside the module, add it the module's exports declaration.

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

import { SearchDropdownComponent } from './components/search-dropdown/search-dropdown.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    SearchDropdownComponent
  ],
  exports: [
    SearchDropdownComponent
  ]
})
export class SharedModule { }

API Reference: NgModule.exports

Also note that a component can belong to only one module.

answered Oct 20, 2016 at 18:36

Ronald Zarīts

12.9k9 gold badges41 silver badges43 bronze badges

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

6 Comments

Ben Over a year ago

Does that mean that if I have a module A with two submodules B and C, if I export B component in module A, it cannot be used in module C?

Ronald Zarīts Over a year ago

You're probably referring to the statement "a component can belong to only one module" - that's true. It means that a component x can "belong" (appear in the declarations) of either module A, B or C. But this has nothing to do with being able to use it - to use a component x in another module, you import the module that exports the component x. Let's say you want to use a component that is declared in module B. You export it from B, and import module B in modules A and C.

Adrian Moisa Over a year ago

Had the same issue, applied this fix and it worked. However, why is it necessary to duplicate declarations in exports? Is this a performance optimisation?

Ronald Zarīts Over a year ago

@AdrianMoisa, you may want, for instance, to have some components internal to the module - in that case you would not add them to exports and that's one reason why the there are separate properties.

Adrian Moisa Over a year ago

@RonaldZarīts You mean similar to public/private for class methods?

|

Collectives™ on Stack Overflow

Angular2 access submodule component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related