Dependency injection via. Webpack

Best Practices
1

Does anyone know or can provide info how to inject services into aurelia-di via. Webpack?

Scenario:
Production: Use DataBackendService
Dev: Use DataBackendServiceStub

It’s currently implemented in the main.ts like

if (Config.Stub) {
        aurelia.container.registerSingleton(DataBackendService, DataBackendServiceStub)
}

But I want to get rid of all dependencies in the production release.

1 Like
2

Add 2 files

// data-backend.ts
export class DataBackendService { };

and

// data-backend-stub.ts
export class DataBackendService { };

Consume wherever necessary

import { DataBackendService } from './data-backend';

@autoinject
export class Consumer {
  constructor(dataBackendService: DataBackendService) { }
}

In your webpack.config.js

plugins: [
  new NormalModuleReplacementPlugin(/data-backend/gi, `data-backend${argv.mode==='development' ? '-stub' : ''}`)
]
8 Likes