Dynamic Plugins

Please refer to this guide if you haven't set up environment files yet.

Angular provides the ability to have a different environment file loaded for development as compared to production or other build targets. We can use this to improve our application bundling when it comes to development only packages. In NGXS the packages that are mainly useful only for development mode are the @ngxs/devtools-plugin and @ngxs/logger-plugin. Typically you would only want to use these packages during development and not in production.

Let's look at the code below:

// environment.ts
import { withNgxsLoggerPlugin } from '@ngxs/logger-plugin';
import { withNgxsReduxDevtoolsPlugin } from '@ngxs/devtools-plugin';

export const environment = {
  production: false,
  plugins: [withNgxsLoggerPlugin(), withNgxsReduxDevtoolsPlugin()]
};

This means that these plugins will be used only when Angular uses environment.ts file, but in the production build it will be replaced with environment.prod.ts file (or any other configuration you use). If you already figured out the environment.prod.ts file will contain plugins property that equals empty array, the code would look as follows:

// environment.prod.ts
export const environment = {
  production: true,
  plugins: []
};

All we have left to do is to import the environment file and reference plugins property in the app config provideStore():

import { provideStore } from '@ngxs/store';
import { withNgxsRouterPlugin } from '@ngxs/router-plugin';

import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [provideStore([], ...[withNgxsRouterPlugin(), ...environment.plugins])]
};

This approach will reduce your production bundle size, as these packages are only needed during development.