Using AutoMapper in Angular2

[doorman02]

Hi @loedeman, thanks for the AutoMapper library. I am trying to use it with angular2 and I installed it via npm. My project is a webpack project. Do you have an example on how to use it with angular2?

Thanks!

[loedeman]

Hi doorman02,

Thanks for your question. I am currently starting an Angular (v2) project. I will give AutoMapper a shot in the project as soon as the project starts rolling smoothly. Should you be earlier, I hope you wouldn't mind keeping me posted!

Cheers, Bert

[loedeman]

I just created a basic Angular app using Angular CI. Getting AutoMapper to function correctly is quite easy, if you follow the guidelines for using an 3rd party library (https://github.com/angular/angular-cli#3rd-party-library-installation). An excerpt:

• Install the automapper-ts library using npm: npm install automapper --save
• Add the following line to the file typings.d.ts: declare module 'automapper-ts';
• Add the automapper-ts minified JS file to the scripts array in angular-cli.json: "../node_modules/automapper-ts/dist/automapper.min.js"
• Import the module created in step 2 in your module/component file: import { } from 'automapper-ts';

Now you should be able to use the automapper global variable as documented.

Ragarding typing: I discovered the AutoMapper's package.json lacks the typings property in package.json. It will be there shortly (will for sure commit it right after this post), but in the mean time you could add it yourself, just below the main property: "typings": "./dist/automapper",

Cheers, Bert

[doorman02]

Great thanks 👍

[ricardoccpaiva]

i'm i missing something ?
i'm having this error : TypeError: Cannot read property 'createMap' of undefined when trying to automapper.createMap('SourceType', 'DestinationType');

[loedeman]

Hi @ricardoccpaiva,

Are you trying to use AutoMapperTS with Angular 2 as well? It sounds like you don't have the actual automapper.min.js (or the full version, if you would rather like that) file loaded before actually using it. Did you add the automapper-ts JS file to the scripts array in angular-cli.json as I explained earlier in this thread?

Cheers!

[alejandrocoding]

File 'C:/xx/xx/node_modules/automapper-ts/dist/automapper.d.ts' is not a module.)

I just followed all your steps carefully and it seems to not be working.

[loedeman]

Hi @ialex90, could you please clarify your situation? It sounds like you are trying to import the definition file itself, which indeed is not a module. The steps mentioned above should do the trick with Angular 2 (#17 (comment)).

[alejandrocoding]

Ey @loedeman thanks for replying, I couldn't make it work and I followed those steps.

so few questions are coming to me like,
"Import the module created in step 2 in your module/component file: import { } from 'automapper-ts';"

When you mentioned that, what do you mean by 'import the module created in step2'? because in step 2 you say to write on the typings the line to declare the module for the intellisense.

Then, I got at the stage where automapper is global, what I can't make is import/use some of your samples like these:
https://github.com/loedeman/AutoMapper/wiki/Initialize

It doesn't recognize AutoMapperJs and even doing some tricks and recognizing it, the console says that error I've posted before.

Sorry to didn't explain myself before, is it clearer now?

[kmacmcfarlane]

I found that in order to get it working:

1. I needed to do this npm install --save automapper-ts instead of npm install --save automapper
2. As a webpack user, I needed to append the following to my vendor.ts file to load the automapper global: import 'automapper-ts';

[loedeman]

Hi @kmacmcfarlane, thanks for your correction, you are absolutely right, can't believe I missed that typo 😉... Cheers, Bert

[bpkinez]

If you want to use automapper-ts npm module with webpack directly instead of angular-cli you must follow these steps:

1. Install module with npm install --save automapper-ts

2. Define automapper as global variable inside plugins array in webpack.config.js:

new webpack.ProvidePlugin({
    automapper: 'automapper-ts'
})

3. In your component where you want to use automapper functionalities do following (e.g. Angular component):

import { Component } from '@angular/core';
import { } from "automapper-ts";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor() {
        var objA = { prop1: 'From A', prop2: 'From A too', prop3: 'Also from A (really)' };

        automapper
            .createMap('sourceType', 'destinationType')
            .forMember('prop1', function (opts) { opts.mapFrom('prop2'); })
            .forMember('prop2', function (opts) { opts.ignore(); })
            .forSourceMember('prop3', function (opts) { opts.ignore(); })
            .forMember('prop4', function () { return 12; })

        var objB = automapper.map('sourceType', 'destinationType', objA);

        console.log(objB);
    }
}

[loedeman]

Thanks for your help, @bpkinez !

[asanchez128]

My two cents to this conversation:

In your tsconfig.json file make sure that you have the following:

"typeRoots": [
"node_modules/@types",
"../src/typings.d.ts"
],

I did not have the typings.d.ts file included in the "typeRoots" array. HTH.

[mikelweb]

In Angular 6 there's no webpack file

If you want to use automapper-ts npm module with webpack directly instead of angular-cli you must follow these steps:

1. Install module with `npm install --save automapper-ts`

2. Define automapper as global variable inside plugins array in webpack.config.js:

new webpack.ProvidePlugin({
    automapper: 'automapper-ts'
})

1. In your component where you want to use automapper functionalities do following (e.g. Angular component):

import { Component } from '@angular/core';
import { } from "automapper-ts";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor() {
        var objA = { prop1: 'From A', prop2: 'From A too', prop3: 'Also from A (really)' };

        automapper
            .createMap('sourceType', 'destinationType')
            .forMember('prop1', function (opts) { opts.mapFrom('prop2'); })
            .forMember('prop2', function (opts) { opts.ignore(); })
            .forSourceMember('prop3', function (opts) { opts.ignore(); })
            .forMember('prop4', function () { return 12; })

        var objB = automapper.map('sourceType', 'destinationType', objA);

        console.log(objB);
    }
}

In Angular 6 there's no webpack config file... And I don't know how to include it
any clue?

[mplgn]

@mikelweb Here is how I got this to work in Angular 6:

Install from npm, be sure to use the --save option

npm install automapper-ts --save

Add the declaration in src/typings.d.ts. If the typings file does not exist, create it (it's not created by default with Angular 6 CLI)

src/typings.d.ts:

declare module 'automapper-ts';

If you added the src/typings.d.ts file, you'll need to add it to tsconfig.json typeRoots:

tsconfig.json
    "typeRoots": [
      "node_modules/@types",
      "src/typings.d.ts"
    ],

Add minified source to angular.json scripts section, which will load the script:

"scripts": [
...
"node_modules/automapper-ts/dist/automapper.min.js",
...
]

Import to your component or module:

import * as automapper from 'automapper-ts';

Use as documented:

automapper.createMap('Token', 'User')
         .forMember('firstName', (opts) => { opts.mapFrom('given_name'); })
         .forMember('lastName', (opts) => { opts.mapFrom('family_name'); } )

(Thanks @loedeman for an awesome component!)

[loedeman]

Wow, @g8rdev, Thanks a lot for your thorough explanation! Thanks a lot for helping out this way, #h5yr!

[mikelweb]

Great! Thank you so much for such a good tutorial of how to do it!!!

[misaelsz]

Angular 7 not work theses steps

[misaelsz]

the following error occurs:

Please help me