Creating a modular plug-in for Angular may seem complex, but it's an exciting way to expand your Angular projects with reusable components!

In this guide, we'll walk you through the process of developing a small Angular application and transforming it into a plug-in that can be shared or published on npm. Whether you're building a custom greeting component or exporting your entire module, this step-by-step breakdown covers everything from setting up your Angular project to packaging and publishing your plug-in.

By the end, you'll have the tools to create and distribute your own modular Angular libraries with ease. Ready to dive in? Let’s get started!

How to develop a Modular Plug-in For angular 4

Create Small Angular Application:

1. Install angular cli:

‍
Install angular-cli by running → npm install @angular/cli -g

2. Create a angular project:

‍
Run ng new MyLibrary to create a project, move to directory through cd MyLibrary, and run ng serve for server to run, browse to localhost:4200, you will see welcome page

3. Let create small greeting application:

‍
Create a module ng generate module modules/greeting, it will create a file with directories
src/app/modules/greeting/greeting.module.ts

After that create component, run ng generate component modules/greeting → it will create four files in modules/greeting.

Replace content from modules/greeting/greeting.component.html with

Greeting My Lord!

Add CSS in modules/greeting/greeting.component.css
h1{
color: green;
text-align: center;
padding: 10px;
border: 1px solid green;
}

‍
4. Export our component from our module

‍
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
import { GreetingComponent } from ‘./greeting.component’;

@NgModule({
imports: [
CommonModule
],
declarations: [GreetingComponent],
exports: [GreetingComponent] <——– Export component
})
export class GreetingModule { }

Ensure that an application which imports our GreetingModule will be able to use our GreetingComponent. Without exports Other application cannot use our component.

‍

5. Import GreetingModule into AppModule and run application

‍

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

import { AppComponent } from ‘./app.component’;

// Import our module
import { GreetingModule } from ‘./modules/greeting/greeting.module’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GreetingModule <—– import it into ngModule
],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }

Now run ng serve and look at localhost:4200.

‍

Make app into Plug-in

‍

1. Ng-packagr

ng-packagr is a node library that can compile and package a TypeScript libtrary to Angular Package Format.
Run npm install ng-packagr –save-dev OR npm install ng-packagr, from root of your application. As ng-packagr docs, we need to add two files
ng-package.json
public_api.ts
Ng-package.json use to configure our ng-packagr, and tell it where to find public_api.ts file, which we will use to export feature modules of our component library.
In ng-package.json
{
“$schema”: “./node_modules/ng-packagr/ng- package.schema.json”,
“lib”: { “entryFile”: “public_api.ts” }
}

In public_api.ts, export GreetingModule
export * from ‘./src/app/modules/greeting/greeting.module’

Now we will add packagr script to our package.json file that we can use to tell ng-packagr to package up our library according to configuration of ng-package.json. Switch private: true in package.json to private: false so you can publish your library when you need to.

“scripts”: {
….
“packagr”: “ng-packagr -p ng-package.json” <—–
}
“private”: false <—–
‍

2. Create Package:

‍
Run cmd npm run packagr, after process complete it will create a folder dist in project root.

Locally use for development:
Move into dist folder which you just created. Run cmd npm pack, it will create a file MyLibrary-0.0.0.tgz.
Move into another project root directory in which you want to use your library, And run npm install ../relative-path/dist/MyLibrary-0.0.0.tgz
Now import your GreetingModule in AppModule of project.
And Add tag in any component.html

Publish Plug-in to npm:
Once you login to your npm account with npm login.
You can publish your component library with npm publish dist. Just be sure that you have a unique package name (hint: MyLibrary may be taken). Once published, you’ll be able to install your component library from npm with npm install my-component-library.