Angular Examples

[ChrisMancini]

Hi,

Having experience in .net and AutoMapper, I am happy to have found this project for TS/JS! Thank you!

I am experimenting with this package and was curious about the recommended approach to using AutoMapper within an Angular application.

Does anybody know of an example of an Angular application with multiple feature modules (that are lazily loaded)? In particular I am interested in :

• Registration of the Mapper into the Injector at the root scope
• Organization of mappings (createMetadataMap()) across feature modules
• Definition of Profiles across feature modules
• When/where the mappings are registered
• When/where the profiles are added to the mapper

I have been unsuccessful in my attempt at this and was hoping somebody knows of an example that I can compare my approach to.

Thanks!

[nartc]

Hi @ChrisMancini , thanks for taking interests in this library.

At the moment, I haven’t given Angular integration much thoughts as I primarily use this package on the server-side (in the same nature as .NET) with @automapper/nestjs

That said, if there is interest in an official integration with Angular (eg: @automapper/angular) then I’m happy to look into it. And as you said, the integration needs to be carefully crafted due to the fact that you can lazy-load feature modules and such in Angular. More details can be discussed further here. I’m all ears to all suggestions.

As of right now, I’d suggest to load everything as soon as possible. The Mapping creations (createMetadataMap, if you use Interfaces, and createMap()) are one-time costs and we’d want to have the Mapping configurations available as soon as we need them to.

[ChrisMancini]

Being relatively new to Angular, I am certain there are better ways to do this. A lot is omitted for brevity.

I register the Mapper like this:

export const MAPPER = new InjectionToken<Mapper>('Mapper');

const autoMapperFactory = (): Mapper =>
  createMapper({
    name: 'Global Mapper',
    pluginInitializer: pojos,
    namingConventions: {
      source: new PascalCaseNamingConvention(),
      destination: new CamelCaseNamingConvention(),
    },
  });

@NgModule({
...
providers: [{ provide: MAPPER, useFactory: autoMapperFactory}]
})
export class AppModule{}

For feature modules I tried this:

@NgModule(...)
export class FeatureModule {
  constructor(@Inject(MAPPER) mapper: Mapper) {
    // Create Mappings here...
    // Add Profiles here...
  }
}

Then in services:

export class MyService {
  constructor(@Inject(MAPPER) private _mapper: Mapper) { }
  
  // Convert objects in various methods here
}

I have the route configured like this to lazily load a feature module.

RouterModule.forRoot([
...
{
  path: 'testing',
   loadChildren: () => import('feature-module').then((module) => module.FeatureModule)
}

When I navigate to the route I get this...

ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'FeatureModule' before initialization
ReferenceError: Cannot access 'FeatureModule' before initialization

I don't know the best way to load all of the Mappings from across all of the feature modules. The best I can tell the only way to execute code during module initialization is in the constructor (it feels wrong though).

PS. As I am writing this, I happen to be watching your video on Component Store with beeman.dev. Really enjoying it!

[nartc]

I'll give it a look as soon as I can. Thanks for the kind words on Component Store videos <3