Importing Automapper into a angular2 webpack project

I am trying to use the ts automapper libary in an Angular2 webpack project but not sure how to import it or include it. An example how to accomplish this would be great.

There maybe be better way to work with this library, however, what I have done in my project is this

   /** test.component.ts
    ** Please note that you need to change Path as this is referenced to my node_module and probably it's different in your end. 
   **/

/// <reference path="../../../../node_modules/automapper-ts/dist/automapper.d.ts" />  

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'test-component',
})
export class TestComponent implements OnInit {
  private jsonObj;
  constructor() {
    automapper.map("JSON", "newType", this.jsonObj);
  }

  ngOnInit() {
  }
}

Keep in mind I have amended tsconfig.json file to get that to work.

"moduleResolution": "node",

to

"moduleResolution": "classic",

Using AutoMapper in Angular2 · Issue #17 · loedeman/AutoMapper , conversation (in case you are using Angular CLI): In addition to following the instructions outlined here Importing Automapper into a angular2 webpack project​  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 angula

Why can't I import from AutoMapper (TS) and generate a Require , I am trying to use the ts automapper libary in an Angular2 webpack project but not sure how to import it or include it. An example how to accomplish this would  Finally, checking in the entire workspace (if that is what you did) into your Git repository isn’t a good idea – what you should be doing is checking in just the project. If you can, I would strongly recommend you redo the initial commit, committing just the project, and abandoning the commit of the workspace directory. Hope this helps.

My two cents to this conversation:

In your tsconfig.json file make sure that you have the right path for your typings.d.ts file

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

Otherwise you might get some nasty "automapper is not defined" errors.

how to publish angular 2 typescript library on npm - angular - html, I am trying to use the ts automapper libary in an Angular2 webpack project but not sure how to import it or include it. An example how to accomplish this would  It would be nice, if I can import a previously created Angular2-eclipse project (or create a new one with existing source) into workspace. In this case 'ng init' should not run, but an optional 'npm install' would be useful. The motivati

  1. install "automapper-ts" package with yarn or npm

  2. import package:

    import "automapper-ts";

  3. use autommaper as it's described in documentation:

    automapper.initialize(...) or automapper.createMap(...) etc.

Using SASS with Webpack, Angular and Visual Studio, This post shows how to use SASS with Webpack and Angular 2 in Visual Studio. Add the SASS packages as required in the project npm packages.json file. import { Component, OnInit } from '@angular/core' ; achecker.ca · Angular · automapper · balsamiq · bitbucket · bootstrap 4 · chocolatey · Docker  Angular + Webpack - How to add global CSS styles to Angular with webpack The below steps show how to quickly add a global LESS / CSS stylesheet to your Angular application using Webpack. To find out how to setup an Angular app with Webpack see Angular 7 Tutorial Part 2 - Create Base Project Structure & Webpack Config .

Use ASP.NET Core SignalR with TypeScript and Webpack , js to import the SignalR client JavaScript. Create a new src directory in the project root to store the project's client-side assets. Create src/index. Overview. Updated 2018-11-07 for Angular 7.x Previous versions: 2018-10-12 for Angular 6.1.0 and webpack 4.20.2 (original post on 2016-06-01, then updated on 2017-03-14 for anglar 4.0.0.rc.3 and webpack 2.x and on 2017-12-13 for Angular 5.1.0 with Webpack 3.x)

Integrate Monaco editor with Angular – Tony's Tech Blog, Today post I will show you guys how to integrate Monaco Editor into your Angular First I will generate new project using Angular CLI The start script will use extra webpack config because since Angular 7 they don't import { Component, AfterViewInit, ElementRef, ViewChild } from "@angular/core" ;. Dismiss Join GitHub today. GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

Package, To enable experimental support for metadata decorators in your TypeScript project, you must add "experimentalDecorators": true to your tsconfig.json file. Hi can you provide a Typescript + npm example using either a web project (Angular 2+ or Aurelia) or Node.JS, does not really matter which one as the code to "import" it would be similar. #25 <- this is very close to the issue i'm actually having, i'm currently developing a Aurelia web app.

Comments
  • Thanks for your suggestion. Are you using webpack? If you reference it like this, are you getting all the intellisense in automapper?
  • Yes I am using Webpack, as far as I work with yes it's working ok. give it a try.
  • I'd like to add that, in your module/component import 'automapper-ts/dist/automapper';