Prepare your Angular application with example data without deploying it to production

angular-example-data.ts

import { Storage } from '@capacitor/storage'

import * as ME from 'src/data/me.json'

import { STORAGE_KEY_ME_DATA } from './app/models/auth'

/**
 * Prepare the application for development by pushing some example
 * data into the cache. See {@link main.ts} for implementation details.
 */
export async function init() {
  await Storage.set({
    key: STORAGE_KEY_ME_DATA,
    value: JSON.stringify(ME),
  })
}

main.ts

import { enableProdMode } from '@angular/core'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'

import { AppModule } from './app/app.module'
import { environment } from './environments/environment'

if (environment.production) {
  enableProdMode()
}

if (!environment.production) {
  import('./angular-example-data').then((x) => x.init())
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(() => console.info(`Bootstrap success 🎱`))
  .catch((error: unknown) => {
    console.error('Bootstrap', error)
  })

webpack.prod.js

const webpack = require('webpack')

module.exports = async (config, argv) => {
  process.env.NODE_ENV = process.env.NODE_ENV || config.mode || argv.mode || 'development'

  //
  // Ignore our dev example data script.
  //

  config.plugins.push(
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/angular-example-data$/,
    })
  )

  return config
}