CODEWITHSUNDEEP
javascripttypescriptangularamd
Tomasz Polecki
Tomasz Polecki

Reputation: 306

Import AMD module into the Angular 2 TypeScript module

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?

Upvotes: 2

Views: 2407

Answers (1)

Ajey
Ajey

Reputation: 8202

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',
    }
  }
});

Upvotes: 1

Related Questions