Gerard Simpson Gerard Simpson - 1 month ago 6
TypeScript Question

Angular2, Include module of components rather than all components seperately

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
.

Please let me know if you need more information to help me solve this problem.

Answer

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.