将AMD模块导入Angular 2 TypeScript模块

时间:2016-06-20 12:21:06

标签: javascript typescript angular amd

我在“test.js”文件中定义了以下AMD模块:

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

    return function (module) {

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

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

        return myModule;
    };
});

然后我使用System.JS加载此模块并加载模块而没有任何问题。

我的问题是如何在Angular 2 TypeScript模块定义中包含该模块?

import myModule = require('myModule');    

上述方法无效,因为它会抱怨无法找到'myModule'。

我需要能够从我的Angular 2模块中的AMD模块访问“链接”功能。

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

以下是关于如何将现有AMD传统模块与Angular 2一起使用的Demo

[注意:为了演示目的,我已经改变了一些功能]

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");
        }
    };
  });

这是System Js配置 -

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