Custom Angular Libraries

Creating custom Angular libraries allows you to encapsulate and reuse code across multiple applications. This guide covers the basics of setting up and using custom Angular libraries.

Creating a New Library

First, create a new Angular workspace and generate a library using the Angular CLI:

ng new my-workspace --create-application=false
cd my-workspace
ng generate library my-lib

Developing the Library

Develop the library by adding components, services, and modules. Here is an example of adding a component to the library:

// projects/my-lib/src/lib/my-lib.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-my-lib',
  template: `
My Library Component!
`,
  styles: []
})
export class MyLibComponent implements OnInit {
  constructor() { }

  ngOnInit(): void { }
}

Exporting the Library

Ensure that the library components, services, and modules are exported from the library module:

// projects/my-lib/src/public-api.ts
export * from './lib/my-lib.service';
export * from './lib/my-lib.component';
export * from './lib/my-lib.module';

// projects/my-lib/src/lib/my-lib.module.ts
import { NgModule } from '@angular/core';
import { MyLibComponent } from './my-lib.component';

@NgModule({
  declarations: [MyLibComponent],
  imports: [],
  exports: [MyLibComponent]
})
export class MyLibModule { }

Building the Library

Build the library using the Angular CLI:

ng build my-lib

Using the Library in an Application

After building the library, you can use it in an Angular application by adding it as a dependency. First, add the path to the library in the tsconfig.json of the application:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "my-lib": [
        "dist/my-lib"
      ]
    }
  }
}

Then, import and use the library module in your application:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MyLibModule } from 'my-lib';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MyLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.html

Publishing the Library

To share the library with others, you can publish it to npm. First, ensure you are logged in to npm:

npm login

Then, publish the library:

cd dist/my-lib
npm publish

Key Points

Conclusion

Creating custom Angular libraries is a powerful way to encapsulate and reuse code across multiple applications. By setting up, developing, building, and using custom libraries, you can enhance the modularity and maintainability of your Angular projects. Happy coding!