How do I create an angular component as part of a library and use it in my application

Question

So I have the following situation

1. I have created an angular library ng generate library my-lib
2. I have added a simple component using Ng generate component .lib/test which creates a standalone component like so

import { Component } from '@angular/core';

@Component({
  selector: 'lib-test',
  standalone: true,
  imports: [],
  templateUrl: './test.component.html',
  styleUrl: './test.component.css'
})
export class TestComponent {

}

3. I then pack up my application by running ng build then cd ../../dist/my-lib && npm pack
4. I go to my main application and run npm install {pointTofolder}/dist/my-lib/my-lib-0.0.1.tgz
5. I go to use in my application and I get the following error

'lib-test' is not a known element:

1. If 'lib-test' is an Angular component, then verify that it is part of this module.
2. If 'lib-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

What am I missing / doing wrong? It's the most simple example of using a component in a library

Answer 1

I used these two links

1. Standalone component NG8001: 'component' is not a known element
2. https://stackoverflow.com/a/65740167/2987066

And this lead me to the following:

1. Make sure the route is importing the module the Import's and Export's of that module

    const routes: Routes = [
   {
    path: '',
    component: MyComponent,
    children: [
      {
        path: '',
        loadChildren: () => import('./routes/my/my.module').then(m => m.MyModule)
      },
    ]
   }];
   

Then make sure that the component you want to load is in both the imports and the exports of the module you just loaded above (for standalone componets)

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    TestComponent
  ],
    declarations: [

  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    TestComponent
  ]
})

If your component is not a Standalone component, you can do the same thing but import it through a module

  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    CommonUiModule
  ],
    declarations: [
  ],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule,
    CommonUiModule
  ]

And in this case CommonUiModule looks like the following

@NgModule({
  imports: [
  ],
  declarations: [
    TestComponent
  ],
  exports: [
    TestComponent
  ]

Answer 2

Your problem could be caused by following reasons:

• You didn't add export to public-api.ts in your library, like

export * from './lib/page-layout/page-layout.component';

• You didn't add TestComponent to imports in @Component directive in your main Angular application, like

@Component({
  ...
  imports: [
    ...
    TestComponent,
    ...
  ],
  ...
})
export class AppComponent {
  ...
}

• You built and added your library to dependencies incorrectly. To build library, I use

ng build

or

ng build --configuration production

and to add library to dependencies, I have entry in package.json

{
  ...
  "dependencies": {
    ...
    "angular-components": "file:../utility/feature/angular_components/dist/angular-components",
    ...
  }
  ...
}

• You may also need to add "preserveSymlinks": true, to your angular.json, like

{
  ...
  "projects": {
    "demo": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "preserveSymlinks": true,
...