Angular2, Include module of components rather than all components separately

Question

I would like to bundle multiple components into a module (Widget1Module), and then inject that module into another module (AdminModule), giving all components in AdminModule access to the components in the Widget1Module.

I want to do this is to avoid the declarations array in the AdminModule from growing large and unmanageable, please see below for a more in-depth explanation of my problem.

I have a module file like so:

import { CommonModule } from '@angular/common';
import { RoutingModule } from './admin-routing.module';

import { Declaration1 } from "./declaration1.component";
import { Declaration2 } from "./declaration2.component";
import { Declaration3 } from "./declaration3.component";

    @NgModule({
    imports: [
        CommonModule,
        RoutingModule,

    ],
    declarations: [
        Declaration1,
        Declaration2,
        Declaration3,
    ]
    })

export class AdminModule {}

I would like to create a component (Widget1Component) that can be used inside any of the 'declaration' modules. I know that I could do something like this:

import { CommonModule } from '@angular/common';
import { RoutingModule } from './admin-routing.module';

import { Declaration1 } from "./declaration1.component";
import { Declaration2 } from "./declaration2.component";
import { Declaration3 } from "./declaration3.component";

import { Widget1 } from "./widget1.component";

    @NgModule({
        imports: [
            CommonModule,
            RoutingModule,

        ],
        declarations: [
            Declaration1,
            Declaration2,
            Declaration3,
            Widget1
        ]
        })

    export class AdminModule {}

Which would work, but as this application grows, I would like to be able to bundle all widgets into another module, and then inject that module into this module, like so:

import { CommonModule } from '@angular/common';
import { RoutingModule } from './admin-routing.module';

import { Declaration1 } from "./declaration1.component";
import { Declaration2 } from "./declaration2.component";
import { Declaration3 } from "./declaration3.component";

import { Widget1Module } from "./widget1.module";

    @NgModule({
        imports: [
            CommonModule,
            RoutingModule,
            Widget1Module
        ],
        declarations: [
            Declaration1,
            Declaration2,
            Declaration3
        ]
        })

    export class AdminModule {}

But, when I try to do something like this, I keep getting the error that the application does not know about the widgets included in the Widget1Module.

use the `exports` property of `NgModule`? – Harry Ninh Nov 04 '16 at 01:19 — Harry Ninh, Nov 04 '16 at 01:19

Stefan Svrkota · Accepted Answer · 2016-11-04T01:26:07.710

In your Widget1Module you need to export components you want to use in AdminModule, for example:

import { CommonModule } from '@angular/common';
import { Widget1Component } from "./widget1.component";

@NgModule({
    imports: [ CommonModule ],
    declarations: [ Widget1Component ],
    exports: [ Widget1Component ]
    })

export class Widget1Module {}

This way, when you import Widget1Module in AdminModule, Widget1Component will be available.

Angular2, Include module of components rather than all components separately

1 Answers1