6. Angular Playground

This tool is not much known, but it packs power.

Angular playground provides a base where you can test and play with the components in your Angular project in isolation. You can pass different parameters to the component and you will see them rendered in your browser locally.

According to the author:

Build Angular components, directives, and pipes in isolation.



Playground is a living styleguide for your Angular components, taking the components you already

wrote and providing an environment that makes it easy to visualize changes, document variations, and

fix broken UI.

7. Stackblitz

This is an online project code editor. The cool thing about Stackblitz is it’s:

VS Code editor feel.

It’s lighting-fast module installation.

Offline usage.

With Stackblitz, you can easily scaffold an Angular project in your browser and run the project all in your browser.

Stackblitz is useful during presentations, in your articles, code demos, when you want to create a quick Angular project. Instead of going to your machine to use ng commands, Stackblitz saves that for you.

Stackblitz enables you to link the project to your Github account, share the project and download the project to your machine.

8. NgRx

NGRX - Reactive State for Angula

Redux and RxJS came with their flavors and feels.

Redux brought global state management RxJS brought reactive streams to JavaScript.

NgRx combined them to provide an awesome tool for Angular devs.

According to the author(s), NgRx:

MANAGES STATE

NgRx Store provides reactive state management for Angular apps inspired by Redux. Unify the events in your application and derive state using RxJS.

ISOLATE SIDE EFFECTS

NgRx Effects gives you a framework for isolating side effects from your components by connecting observables of actions to your store.

UNLOCK PRODUCTIVITY

NgRx Schematics helps you avoid writing common boilerplate and instead focus on building your application

With NgRx, we use the Redux-style of data/state management in our Angular powered with RxJS. We use events and streams to connect to the Redux store, retrieve and update the store.

9. Codelyzer

A set of tslint rules for static code analysis of Angular TypeScript projects.

This is an Angular linter tool developed by Minko Gechev. It is installed and configured by default, when we scaffold an Angular project using ng new .

Codelyzer is built on tslint, it added style guides for building Angular applications following angular.io/styleguide.

In our Angular project, open "package.json" and look at the "scripts" section, you will see:

"scripts": {

"lint": "ng lint"

}

npm run lint command will run codelyzer on our components and files to make sure they follow Angular style guide.

Codelyzer included rules for building Angular apps, few of them are:

banana-in-box

contextual-life-cycle

decorator-not-allowed

pipe-impure

templates-no-negated-async

no-attribute-parameter-decorator

no-forward-ref

no-input-rename

no-output-on-prefix

no-output-rename

use-life-cycle-interface

use-pipe-decorator

With Codelyzer you can run the static code analyzer over web apps, NativeScript, Ionic, etc.

10. ngx-loadable

We can lazy-load Module routes in Angular, but there is no way to lazy-load non-routable components. Let’s say we have a Modal component, and we want to load when it is needed(maybe when the user presses the “Login” button), we don’t want it to be bundled to the user when the app is loaded. It should be loaded on demand. Angular has no configuration for this.

This is where ngx-loadable comes in. This tool enables us to configure and lazy-load components, modules in our Angular project.

Though, not very popular in the Angular dev ecosystem, this library is awesome and does a very good job at lazy-loading any modules, and components. This cuts down the size of the bundle delivered to the browser on the initial load.

List of articles to help you get started on ngx-loadable:

11. ngx-quicklink

Built by Minko Gechev, ngx-quicklink enables prefetching of resources in our Angular app.

Prefetching is the loading or fetching of resources (pages, assets, font files, images, video files) beforehand so that the usage of the resource becomes instantaneous. This brings a huge performance boost to our Angular apps.

ngx-quicklink utilizes:

Intersection Observer: This it uses to capture events when routerLink elements are within a specified viewport or within the visible browser viewport of a webpage. The Intersection Observer fires the event, ngx-quicklink subscribing to it, picks it up and preloads the module of the link. When the link is clicked the page will load instantly.

navigator.effectiveType property to save user data and check if the user is on slow-connection.

requestIdleCallback: To run the prefetching logic when the browser is idle.

Article by the author to help you get started on ngx-quicklink:

Honorable Mentions

StoryBook:

ngx-context:

RxJS:

@angular/cdk:

Guess.js:

Conclusion

That’s it. There go the 11 tools you should use in your Angular project.

Note: None is greater than the other, all are strong on their capacity. Having a strong knowledge of each of them will help you work out the might in each of them.

Do you have any addition to the list, or why some shouldn’t be there, or you have a problem with one, or just wanna talk? Feel free to drop in your comments, or just can just mail or DM me.

Now, code that next-billion-user app!!

Learn More