Schematic to integrate prettier,commit-lint and husky in angular application

vimal patel — Sun, 12 Dec 2021 13:06:58 +0000

Every single developer has his/her own preferences when its come to IDE and everyone has there own set of configuration in it.

To make sure our code repository is having the same consistenty there are few tools which we can use in our project.

Prettier : This is an opinionated code formatter.
Commit-lint : This checks if your commit messages meet the conventional commit format.
Husky : Easy to configure Git Hooks.

To configured each of these library in your project there are many steps you need to follow.

Doing this redudent task for every single project can be a pain.

For that I have created this package using angular schematics which will do the integration and configuration of these packages in your angular application.

Open your project workspace folder in your command prompt and run below schematic command.

ng add @ng-vim/devtools

That's all.
All above things are configured in your angular application. You can modify the configuration as per your needs.

Github source-code:- https://github.com/patelvimal/ng-vim-devtools
Follow Me on Twitter:- https://twitter.com/patel_vimal

Suggestions are welcome to improve this package.

How to use angular library locally with Hot Module Reload

vimal patel — Wed, 14 Apr 2021 15:04:52 +0000

We can create angular library for reusability and there are many different ways to use it in your angular application.

One of them is is to use "npm link" command to link your library and application. However there are some drawbacks in that approach.

The biggest one is if you make any changes in your library you need to build your library again and again we is very not a very productive way. In this article I will explain how to use --watch command with ng build to overcome that drawback.

Steps to create angular library

Use below Angular CLI commands to generate Angular library project. ```

ng new ngx-shared-lib --create-application=false
cd my-workspace
ng generate library ngx-shared-lib


* Navigate to library workspace and use below commands to build library project.

ng build --watch


We are building the library project in "watch" mode so that any code changes will reflect in target application instantly.

* Use below Angular CLI commands to generate Angular Application.

ng new ngx-sample-app


* Navigate to angular application created above and install the library using below commands.

npm install file://C://angular-local-lib-example//ngx-shared-lib//dist//ngx-shared-lib"


Replace library path with physical path of your local system where library is created.

* Run below commands to serve your application.

ng serve


That's all...

Now **make any code changes in your library and save it.**
It will automatically reflect in your target application as we have run the library in "watch" mode.

You can find the sample code base in this github repository.

  
    
      
      
        patelvimal
       / 
        angular-local-library-example
      
    
    
      Example on how to use angular library locally with HMR

DEV Community: vimal patel

Schematic to integrate prettier,commit-lint and husky in angular application

How to use angular library locally with Hot Module Reload

Steps to create angular library

patelvimal / angular-local-library-example

Example on how to use angular library locally with HMR