×
  • Best Way To Build And Publish Angular Library (v10)

  • 01 – Generate an Angular Library

    Lesson List

    In this lesson, we will see how to Generate an Angular library using angular CLI inside the angular project or workspace. before that let’s first set up the angular project.

    Generate an Angular library

    With the Angular CLI (command-line interface) it to so easy to manage the library.
    Before leading to it first will create an angular project and then will create a library into this particular application so that we can first use locally and then publish to a global repo over npm.
    So let us create any normal angular application first:

    bash
    
    ng new angular-library-demo
    

    now inside our application will run the command to generate the library project.

    bash
    
    # go to project folder
    cd angular-library-demo
    # generate library
    ng g library news-twentyfour
    
    Note: The news-twentyfour is the name of our library project and this name should be in lowercase.

    Generate an Angular library - terminal
    Now as you can see above after running the command it generates some file and also updates the file i.e.
    package.json, angular.json, tsconfig.json
    of our main angular application.

    Changes in Project

    Let us see what changes are been done after generating the new library in our existing angular project setup.


    Project Folder
    library - Project Folder
    As you can see it has created a new library ‘news-twentyfour’ under the projects folder of our workspace.


    Changes made inside angular.json
    angular.json changes
    It has added our library project ‘news-twentyfour’ configuration to the ‘projects’ parameter.


    Changes made inside package.json and tsconfig.json:
    package.json changes
    package.json

    package.json changes
    tsconfig.json
    Here it stores the output path (dist) where our library will be compiled and stored.

    Generate an Angular library
    .
    .

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept