CODEWITHSUNDEEP
angulartypescripttemplatesmodulecomponents
mb925
mb925

Reputation: 137

how can I use a selector of a library component?

I made a library that I'm importing into my app through a npm link. The library is made by a module,which contains component A with a selector named app-sqv. In my app I have component B and template B. In template B I would like to use the selector.

This of course is possible with an internal component, but here I'm not able to do it, maybe because with an external library there is something I'm not considering? I have imported component A into component B with the classic import statement. I also can use the function in that component, so I'm excluding importing errors.

ModuleA.ts:

import { NgModule, } from '@angular/core';
import { AppSqvComponent } from './app-sqv.component';
@NgModule({
    imports: [],
    exports: [AppSqvComponent],
    declarations: [AppSqvComponent],
    providers: [],
})
export class EmptyTextModule { }

ComponentA.ts:

@Component({
    selector:    'app-sqv',
    templateUrl: './app-sqv.component.html',
    providers:  []
})

export class AppSqvComponent { .. }

ModuleB.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ComponentB.ts

import {AppSqvComponent} from 'node_modules/viewseq';

TemplateB.html

<div>
  <h1>
    Testing Library!
  </h1>
  <app-sqv></app-sqv>
</div>

The error state that component B can't recognize the selector app-sqv.

Upvotes: 1

Views: 1775

Answers (1)

Adrita Sharma
Adrita Sharma

Reputation: 22203

You need to export component A in public_api.ts of your libary.

export * from './lib/ComponentA/component-A.component';

and import your library module in app.module:

import { MyLibraryModule } from 'my-library';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    MyLibraryModule 
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})

Upvotes: 1

Related Questions