Angular 2 multiple components declaration

Question

I'm working on a generic Ionic 2 app which consist in loading and displaying multiple components on the first page.

Each add-ons need to be easily created and implemented in the app very easily. So I created a file named "addon-declaration.ts". Inside this file, I exported all my components :

export { MyFirstAddon } from './components/addon1/first.addon';
export { MySecondAddon } from './components/addon2/second.addon';
export { MyThirdAddon } from './components/addon3/third.addon';

So my question is how to import all my components directly on "app.module.ts" declarations field ?

I already tried this but it's not working :/

import * as ModuleHandler from '../models/addons/addon-declaration';

@NgModule({
  declarations: [
    MyApp,
    ModuleHandler <--- Not working
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

It's working nice if I import them one by one :

import { MyFirstAddon } from'../components/addon1/first.addon';
import { MySecondAddon } from'../components/addon2/second.addon';
import { MyThirdAddon } from'../components/addon3/third.addon';

@NgModule({
      declarations: [
        MyApp,
        MyFirstAddon, <--- Working well
        MySecondAddon,
        MyThirdAddon
      ],

Modules are not declared but imported imports:[ModuleHandler], Then in the ModuleHandler export your components to be usable in other modules. — Stubbies
– Stubbies, Commented Dec 30, 2016 at 13:40

Günter Zöchbauer · Accepted Answer · 2016-12-30 13:40:22Z

4

Create a feature module that exports your components and directives

@NgModule({
  declarations: [MyFirstAddon, MySecondAddon, MyThirdAddon],
  exports: [MyFirstAddon, MySecondAddon, MyThirdAddon]
})
export class MyAddonModule {}

Add that module to imports of other modules where you want to use your addons

import { MyAddonModule } from './components/my-addon-module';

@NgModule({
  declarations: [
    MyApp,
    ModuleHandler <--- Not working
  ],
  imports: [
    IonicModule.forRoot(MyApp), MyAddonModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})

answered Dec 30, 2016 at 13:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Comments

Jasper de Jager · Accepted Answer · 2016-12-30 13:40:00Z

1

declarations: [
   MyApp,
   ModuleHandler.MyFirstAddon,
   ModuleHandler.MySecondAddon,
   ModuleHandler.MyThirdAddon
]

or use ngModule that exports them and import the module.

answered Dec 30, 2016 at 13:40

Jasper de Jager

1165 bronze badges

Comments

Shobhit Sharma · Accepted Answer · 2017-11-15 10:54:23Z

1

Create a index.ts inside that folder where your all addon files are placed and then export all files like :

export * from './first.addon';
export * from './second.addon';
export * from './third.addon';
.....

then after you need to import all the addons files in your app.module.ts like :

import * as allAddons from './addons_files';

at the end you need to use allAddons object like :

@NgModule({
    declarations: [
      // all-addons
      allAddons.FirstAddon,
      allAddons.SecondAddon,
      allAddons.ThirdAddon
    ]
})
export class AppModule() {
}

answered Nov 15, 2017 at 10:54

Shobhit Sharma

4934 silver badges11 bronze badges

Collectives™ on Stack Overflow

Angular 2 multiple components declaration

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related