Create an Angular modular plugin

Create an Angular modular plugin

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.


Subscribe to our Newsletter.

Thank you! Your subscription has been added to our newsletter!
Oops! Something went wrong while submitting the form.

Related Blogs.

What is Material Design Lite and what are its advantages?
logos
What is Material Design Lite and what are its advantages?
MDL stands for "Material Design Lite". It is a free and open source library used for website's designing and its a look like material design.
SEO with Angular – Angular Universal
logos
SEO with Angular – Angular Universal
SEO is an abbreviation of Search Engine Optimization. Here, you will learn how to do SEO with Angular for a web page.
Difference between Functional and Object Oriented Programming
logos
Difference between Functional and Object Oriented Programming
These are two very popular programming paradigms in software development that developers design and program to. Read more to find out.
How to use Font Awesome for your website?
logos
How to use Font Awesome for your website?
Font Awesome helps adding scalable and beautiful icons on a web page. Let's teach you how to use awesome fonts for your site.
JQuery: The Write Less, Do More
logos
JQuery: The Write Less, Do More
jQuery is a (write less or do more) lightweight JS library that simplifies programming with JavaScript. Know more about the benefits of using jQuery in this blog.
Cross Browser Compatibility Issues
logos
Cross Browser Compatibility Issues
What is Cross Browser issue? They usually occur in various web applications. Learn to solve these cross browser compatibility issues in this blog post.
How To Add Flash Messages in AngularJS?
logos
How To Add Flash Messages in AngularJS?
Is something wrong with adding flash messages in AngularJS? Read this guide to get professional advice.
Angular 4 FORMS Confusion
logos
Angular 4 FORMS Confusion
Many people are often stuck with the Angular 4 forms confusion. But no need to worry because this solution will work for you.
Publish Subscribe pattern
logos
Publish Subscribe pattern
Nowadays, Web Applications are set to target maximum relevant users as they can. In order to do so, an application must have these qualities.
Dependencies issue when one signal is used with google maps (React native)
logos
Dependencies issue when one signal is used with google maps (React native)
Problem Statement: Google maps work fine when used alone but it get dependency issue when one signal is added to the project.
Setup Redis on AWS
logos
Setup Redis on AWS
This tutorial will help you in setting up redis on AWS. Follow these steps to configure the redis through Amazon Linux.
React Native Facebook Login?
logos
React Native Facebook Login?
This guide provides examples of using the Facebook Login Button and Login Manager components in your React Native applications.

07 — Contact Us

heading glow
glow

Take the road to {digital transformation} with our top-notch software development services.

map
2 West Canal Bank Road, Lahore ,Pakistan
500 Grant Street, Downtown, Suite 2900,Pittsburgh, PA 15219, USA
3 Dalmeny Ave Huddersfield, Huddersfield, HD4 5NN, UK
DSO-IFZA , IFZA Properties, Dubai Silicon oasis, UAE
Don’t like the forms? Drop us a line via email.
Hello@phaedrasolutions.com
no-img
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Pakistan
2 West Canal Bank Road, Lahore ,Pakistan
UK
500 Grant Street, Downtown, Suite 2900, Pittsburgh, PA 15219, USA
dubai
3 Dalmeny Ave Huddersfield, Huddersfield, HD4 5NN, UK
america
DSO-IFZA , IFZA Properties, Dubai Silicon oasis, UAE