2016-06-20 4 views
1

У меня есть следующий модуль AMD определен в файле «test.js»:модуля импорт AMD в угловой модуль 2 Машинописи

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'.

Мне нужно иметь доступ к функции «ссылка» от моего модуля AMD внутри моего модуля Angular 2.

Любые идеи?

+0

Почему нет t обновить/перенести ваш модуль angular1.x в «angular2» с помощью ngForward https://github.com/ngUpgraders/ng-forward – AngJobs

+0

Я не могу обновить этот модуль, поскольку это «директива атрибута». Вместо создания нового компонента Angular 2 мы хотели бы повторно использовать тот же код, который уже присутствует в версии 1, импортируя модуль AMD в TypeScript. – ptomaszi

ответ

1

Вот Demo о том, как использовать существующие устаревшие модули AMD с угловыми 2.

[Примечание: Я изменил вашу функцию мало для этой демонстрационной цели]

AMD мод -

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

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

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

И это система 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', 
    } 
    } 
}); 
+0

Я пытаюсь демонстрационный плункер, и он не работает – henry74

+0

@ henry74 - работает на меня. Можете ли вы сказать мне, какая ошибка? – Ajey

+0

Я что-то упускаю или нажимаю на соответствующую кнопку по каждому имени «Brad [Say Hello]», который должен изменить заголовок Hello Angular2 ... потому что нажимать на любую из кнопок, кажется, ничего не делает для меня. – henry74

Смежные вопросы