Angular packages are used to share the same functionality to multiple angular application.
Getting started
Below command will create empty workspace. while selecting the package name always select some unique and meaning full name.
ng new package_name --create-application=false
Navigate to project folder using below command.
cd package_name
Then generate library using below command.
ng generate library package_name
This will create library files inside project folder
for example if you want build package of custom directive or custom pipe then create custom directive using ng generate command
ng g directive name_of_the_directive
// for custom pipe
ng g pipe name_of_the_pipe
Write all you you logic inside pipe or directive, and also we have mention the file in App.module.ts
And also we have to import the newly added file in the public-api.ts file.
Build package
Building the package is similar to angular application build process.
ng build --prod
this will create the dist folder inside your application.
Test your package locally
we can use npm link to test our package before going to publish.
below are the step to link you package to angular application
- Build the application using
ng build --prod
. - Go to dist/package_name folder using the command line.
- Use
npm link
This allows you to reference package_name locally. - Go to you Angular Application where you want to install the package run the below command.
npm link package_name
this will create the symbolic link between the the package_name and your angular Application.
- In angular.json file inside architect -> build -> option add the this
"preserveSymlinks": true
this will keep the link between package and application alive. - Then import your package module inside you Angular application app.module.ts and test you package.
import {NgxNumberonlyDirectiveModule} from 'ngx-numberonly-directive'
@NgModule({
declarations: [
],
imports: [
NgxNumberonlyDirectiveModule,
],
providers: [ ],
bootstrap: [AppComponent]
})
Publish your package
below are the step to publish your npm package.
- Build the application using
ng build --prod
. - Go to dist/package_name folder using the command line.
- You have to login into your npm account using
npm login
. - Use
npm publish
to publish your npm package.
Write package information and usage guidelines.
It is very import to write information of the package and usage and installation guidelines. yo have to write all you usage guidelines inside README.md
file
Every time before publishing the package please change the version inside package.json file other wise it will throw error. Also you can Add keyword and license related to your package inside package.json.
Top comments (0)