Angular Libraries : Adding New Components in 10 minutes

In this post we are going to show how to add new components, compile and make your library ready for importing with all the new changes!

The new component's selector was:



@Component({
  selector: 'lib-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})

The cmp2.module.ts became:



import { NgModule } from "@angular/core";
import { Cmp2Component } from "./cmp2.component";
import { MyComponentComponent } from "./my-component/my-component.component";

@NgModule({
  declarations: [Cmp2Component, MyComponentComponent],
  imports: [],
  exports: [Cmp2Component, MyComponentComponent],
})
export class Cmp2Module {}

Finally, the public-api.ts became:



/*
 * Public API Surface of cmp2
 */

export * from "./lib/cmp2.service";
export * from "./lib/cmp2.component";
export * from "./lib/cmp2.module";
export * from "./lib/my-component/my-component.component";

Now we need to compile the library to pick up new changes.

Note

✔️ When you compile libraries they compile with AOT compiler, this is why these components will run faster in your application.

To run the ng build command on your library, you need to be at the root of the folder structure.

The angular.json file, located in that root directory, is used for ng build. It contains a Projects section with each project configuration. Ng build looks in there to determine how to compile the Projects listed there.

Add the HTML

Save and observe the new changes.

The DIST Folder

It pays in more ways than one to have importable modules from your own Angular custom library. You will eventually be able to double your production by just reusing components. Your customers will like the fact that the time to render is vastly improved.

JWP 2020 Angular Libraries Adding New Components