Conditional module imports in Angular

Whenever you’re introducing third-party services to your Angular application there are cases that you need those services only for development, testing or production. To keep your builds as fast and small as possible you want to import those services conditionally.

Photo by WEB AGENCY on Unsplash

The best examples are:

• You’re using ngrx/store and the ngrx/store-devtools module. You want to use ngrx/store-devtools only in development and prevent it from being imported in production.
• You’re using a production logging service like logrocket and want to initiate this service only while in production, not while doing development.

Since initiating logging services is quite specific to the service you’re using i will not go into that. You can however follow the same pattern that importing ngrx/store-devtools only in development, will use. Importing ngrx/store-devtools only in development can be done like this:

The trick

We define an array named dev and import/configure our storeDevtoolsModule in that array. We then check if we’re in production using the NODE_ENV variable. If we are in production, we clear the dev array again. This dev array is imported into the module declaration using the spread operator. When using the spread operator in an array it allows you to easily place an expanded version of an array into another array. This is demonstrated in the example below:

I hope this little trick helps you to do conditional module imports.

Thanks for reading. Please hit the clap button if you liked this article. Any feedback? Let me know. Also check my other articles:

• https://hackernoon.com/manage-your-observable-subscriptions-in-angular-with-help-of-rx-js-f574b590a5cb
• https://hackernoon.com/understanding-creating-and-subscribing-to-observables-in-angular-426dbf0b04a3
• https://hackernoon.com/managing-large-s-css-projects-using-the-inverted-triangle-architecture-3c03e4b1e6df
• https://hackernoon.com/understanding-map-filter-and-reduce-in-javascript-5df1c7eee464
• https://hackernoon.com/an-angular-2-webpack-setup-for-development-and-production-3ea8bcc35e24

Follow me on Medium or twitter and let’s connect on LinkedIn