Import AMD module into the Angular 2 TypeScript module

Question

I have the following AMD module defined in the "test.js" file:

define(
    'myModule',
    function () {
    'use strict';

    return function (module) {

        function myModule(translator) {
            return {
                restrict: 'A',
                link: link
            };

            function link(scope, element, attrs) {                
            }
        }

        return myModule;
    };
});

Then I load this module using System.JS and module loads without any issues.

My question is how can I include that module in my Angular 2 TypeScript module definition?

import myModule = require('myModule');

The above will not work as it will complain about cannot find 'myModule'.

I need to be able to access the "link" function from my AMD module inside my Angular 2 module.

Any ideas?

Why not upgrade/migrate your angular1.x module to "angular2" using ngForward github.com/ngUpgraders/ng-forward — null canvas
– null canvas, Commented Jun 20, 2016 at 13:01
I cannot upgrade that module as it is "attribute directive". Instead of creating a new Angular 2 component we would like to re-use the same code that is already present in version 1 by importing AMD module into the TypeScript. — Tomasz Polecki
– Tomasz Polecki, Commented Jun 20, 2016 at 14:03

Ajey · Accepted Answer · 2016-06-25 05:21:01Z

1

Here is the Demo on how to use existing AMD legacy modules with Angular 2.

[Note: I have changed your function a little for this demo purpose]

AMD mod -

define(
  'myModule',
  function() {
    'use strict';

    return function(module) {
        return {
          restrict: 'A',
          link: link
        };

        function link(scope, element, attrs) {
          console.log("Link function called");
        }
    };
  });

And this is the System Js config -

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    app: "./src",
    myModule: './myModule.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    legacy: {
      defaultExtension: 'js',
    }
  }
});

answered Jun 25, 2016 at 5:21

Ajey

8,25212 gold badges66 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

henry74 Over a year ago

I'm trying the Demo plunker and it doesn't appear to be working

Ajey Over a year ago

@henry74 - working for me. Can you tell me whats the error?

henry74 Over a year ago

Am I missing something or is clicking on the associated button by each name "Brad [Say Hello]" supposed to change the Hello Angular2 header...because clicking on any of the buttons does not appear to do anything for me.

Ajey Over a year ago

The question is how to import legacy AMD modules. It has nothing to do for a click. As you see, in app.ts we call our AMD module funciton - console.log(myModule().link());

Collectives™ on Stack Overflow

Import AMD module into the Angular 2 TypeScript module

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related