How To Create Your First Angular 7 Library

In this article, we will see how to create a simple Angular 7 library step by steps. I will mainly focus on commands and configurations required for library. At the time of writing (Nov 2019), I am not an Angular 7 expert but still sharing this knowledge with you whatever I experienced while learning. I hope, This may help to beginners as explained all steps in very simple way.

If you want know in details please click here.(https://angular.io/guide/creating-libraries)

Step 1: Create an Angular Workspace with no initial application

>> ng new libraryCollection --create-application=false

Step 2: Go to newly created angular workspace "libraryCollection"

>> cd libraryCollection

Step 3: Create your first library by running below command.

>> ng generate library your-library-name --prefix your-prefix-name

Note your-library-name and your-prefix-name can be anything but make sure to use unique name, if in future you wanted to publish that on NPM or Verdaccio registry.

Once you done with Step 3, you will see your library "your-library-name" generated under directory "libraryCollection->projects->your-library-name" and below files generated in "src -> lib" directory.

• your-library-name.component.spec.ts
• your-library-name.component.ts
• your-library-name.module.ts
• your-library-name.service.spec.ts
• your-library-name.service.ts

Also one very important file will get generated i.e public-api.ts. This file is the entry point of our library to declare what components, services or modules we want to export so that can be imported from other Angular applications.

Step 4: Now we will build library using below command
>> cd libraries
>> ng build your-library-name

Once you execute above command, it will generate a built in this directory path -> libraries\dist\your-library-name
That means you have successfully built your library.

Step 5: Lastly, it's time to create a package of our library so that we can use that package from other Angular projects. It will generate a tar file under directory -> libraries\dist\your-library-name\your-library-name-0.0.1.tgz

>> cd libraries\dist\your-library-name
>> npm pack pgondane-lib

That's it. If you want to use your library package then follow these steps.

Step 1: If you already have other angular application then go to root of that application or create new app using below commands.

>> ng new new-project

Step 2: Open new project new-project\package.json file, search for keyword "rxjs" and add below line above it.

Example: 

"your-library-name": "../libraries/dist/your-library-name/your-library-name-0.0.1.tgz",
"rxjs": "~6.4.0",

Step 3: Go to root of your new project and install our library package.
>> cd new-project
>> npm install your-library-name

Step 4: Now we can import it in app.module.ts of new project

import { YourLibraryNameModule } from 'your-library-name';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    YourLibraryNameModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Step 5: Lets add our library selector tag "your-prefix-name-your-library-name" in app.component.html to display library component content.

Lets assume, your-prefix-name = webtechfunda and your-library-name = myfirstlib
then the tag will be like below.



Step 6: Run your new project by using below command and check output. you should see your library content on your new application page.

>> ng serve -o

Conclusion:

That's It Guys! At the time of writing (June 2019), I am not an Angular 7 expert but shared this knowledge with you whatever I experienced while learning. So if you have any opinions or suggestion related to this tutorial, Please feel free to comment and share your suggestions.


Check Recommended Article:
How To Publish Angular 7 Library To Verdaccio Private Registry On Localhost