CODEWITHSUNDEEP
angular
r3plica
r3plica

Reputation: 13397

Angular library can't export component when multiple modules

I have created a library using the documentation here: https://angular.io/guide/creating-libraries

I now have a few components, directives and services in my library and I wanted to separate into different modules. I created the separate modules and referenced them in the public-api.ts file like this:

export * from './lib/animations/animations.module';
export * from './lib/breadcrumb/breadcrumb.module';
export * from './lib/directives/directives.module';
export * from './lib/footer/footer.module';
export * from './lib/header/header.module';
export * from './lib/loader/loader.module';

export * from './lib/animations/collapse';
export * from './lib/animations/fade';
export * from './lib/animations/fade-in-up';

Each module declares any components and exports them, for example:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HeaderComponent } from './header.component';

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

But if I try to use that in another project, it doesn't work. I can import the module fine and I can actually use the component in HTML, but if I try to use the component in the code behind I get an error:

import { HeaderComponent } from '@situlive/situ-angular-components';

public toggle(header: HeaderComponent, toggled: boolean) {
  header.toggle = toggled;
}

It tells me that my module has no exported member 'HeaderComponent', But if I removed the reference and change the method to this:

public toggle(header: any, toggled: boolean): void {
  header.toggle = toggled;
}

It works. Is there something I am missing? Do I need to export my components from the main module too?

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { HeaderModule } from './header/header.module';

@NgModule({
  imports: [CommonModule, RouterModule, HeaderModule],
  exports: [HeaderComponent],
})
export class SituAngularComponentsModule {}

Upvotes: 1

Views: 2127

Answers (1)

xrobert35
xrobert35

Reputation: 2566

export * from AType;

Allow you to export a Type and use it externaly, it as nothing to do with Angular, but you need it for typescript compilation.

If you need to have the component type reference in your external project you also need to export this component class. So add in your module .ts file or the public-api.ts

export * from HeaderComponent;

For information

the "exports" array in the module déclaration is just for the angular scope (allowing you or not to share your component across modules). For @injectable they are automatically exported, but you still need to export the class for typescript : "export * from MyService"

Upvotes: 0

Related Questions