Angular CLI generated library - can't import components from it's module

Question

So I've made a simple Angular library using CLI ng g library <library-name> and I'm trying to import a component from it's module. I'm importing components.module in my app module in the imports array, but I want to be able to import a components class from this module to another component, simply by writing:

import {MyComponent} from ...;

But I can't do that - my IDE is saying that this Module has no exported members with the name of my component, and when I open open it looks like this:

export declare class ComponentsModule {
}

and public_api.d.ts {

export * from './lib/components.service';
export * from './lib/components.component';
export * from './lib/components.module';

Also, here is the library-name.d.ts file:

/**
* Generated bundle index. Do not edit.
*/
export * from './public_api';
export { ApiErrorComponent as ɵa } from './lib/modals/api-error/api-error.component';
export { ConfirmationModalComponent as ɵb } from './lib/modals/confirmation- modal/confirmation-modal.component';
export { InfoModalComponent as ɵc } from './lib/modals/info-modal/info- modal.component';

My module source file before ng build:

import {NgModule} from '@angular/core';
import {ComponentsComponent} from './components.component';
import {ApiErrorComponent} from './modals/api-error/api-error.component';
import {ConfirmationModalComponent} from './modals/confirmation-modal/confirmation-modal.component';
import {InfoModalComponent} from './modals/info-modal/info-modal.component';

@NgModule({
  imports: [],
  declarations: [
    ComponentsComponent,
    ApiErrorComponent,
    ConfirmationModalComponent,
    InfoModalComponent,
  ],
  exports: [
    ComponentsComponent,
    ApiErrorComponent,
    ConfirmationModalComponent,
    InfoModalComponent,
  ],
})
export class ComponentsModule {
}

Why doesn't it work and why I can't import any of these components? It was auto generated from Angular CLI using ng build library-name. In the package I also have few directiories beside "lib" - ems2015, esm5, fesm5, fesm2015 and bundles, but I thought that I will be able to just import my module and use any component from it wherever I like - but it look like they are private or something and the documentation on generating and building libraries using CLI is not so good.

Will apppreciate all the help.

Kohei Arai · Accepted Answer · 2018-11-15 08:08:40Z

2

I hope you find a solution by then. I came across the same problem and let me share my solution.

Modify your public_api.d.ts in your library to include all your custom components. So in your case, it should be like:

export * from './lib/modals/api-error/api-error.component';
export * from './lib/modals/confirmation- modal/confirmation-modal.component';
export * from './lib/modals/info-modal/info- modal.component';

Then, run ng build <library-name> When library-name.d.ts looks like this, all your components are exported.

export * from './public_api';

To import components in another module, do like this:

import {NgModule} from '@angular/core';
import {ComponentsComponent} from './components.component';
import {ApiErrorComponent} from 'library-name';
import {ConfirmationModalComponent} from 'library-name';
import {InfoModalComponent} from 'library-name';

answered Nov 15, 2018 at 8:08

Kohei Arai

8919 silver badges8 bronze badges

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

3 Comments

ciekawy Over a year ago

would it be possible to have one library but group it inside so then I can do: import { SomeService } from '@myOrg/lib/services'; and import { SomeEntity } from '@myOrg/lib/model' ?

Rahul Singh Over a year ago

i did the same but it says cannot find module , how will the new module know the where abouts of the built module

Vallerious Over a year ago

I could not import the component after exporting it this way. As a workaround I import it with the full path after the name of the library. i.e. import { MyComponent } from "my-lib/path/to/component"

Eric Soyke · Accepted Answer · 2023-08-10 15:01:29Z

0

I had followed this nice little guide to create a library to test adding it to my local npm registry (Verdaccio). https://jasonwatmore.com/post/2020/06/16/angular-npm-how-to-publish-an-angular-component-to-npm

But when I tried to import the library's module in my consuming app it couldn't find it, even though I could see the folder was in my node_modules. The problem was when I published it after the ng build, I had missed the step to be in the library project's dist/my-library-name folder. Once I published a newer version from the correct location, I was able to import the module into my consuming app.

answered Aug 10, 2023 at 15:01

Eric Soyke

1,0871 gold badge17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Angular CLI generated library - can't import components from it's module

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related