аюсь создать веб-приложение, которое поддерживает плагины, среда Angular 2 (пока), Typescript 2.1 и Webpack 2. У меня есть несколько точек расширения (слотов), где плагины могут рисовать свой контент: в основном у меня есть компонент который может содержать некоторый другой компонент, известный во время выполнения (идею см. в главе 10 «Освоение компонентов Angular 2», иТАК + plunker о том, как компилировать и «рисовать» во время выполнения компонент Angular)

Вот чего я хочу добиться:

// in plugin.service.ts
loadPlugin(url)
{
    return System.import('absolute OR relative ?? plugin base path' + name)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

...

//content of the plugin file being imported
export default class HeaderButtonsPlugin {
    constructor() {}
    //useful things about the plugin
}

Я импортирую модули во время выполнения, используяSystem.import из Webpack, хотя я знаю, что это устарело, AFAIK это единственный способ динамического импорта модулей с использованием машинописи, так какimport еще не поддерживается самой машинописью (ссылкаВот). (есть ли другие способы сделать это?)

Теперь, просто для тестирования системы, я включил каталог плагинов в тот же корень приложения (каталог src), используя дерево каталогов ниже; имейте в виду, что это заставляет веб-пакет знать во время компиляции о существовании кода плагина, и упаковать и плагин, и приложение в один и тот же набор пакетов - это упрощение для проверки возможностей архитектуры плагина; вот дерево папок:

- src
    - app
        - core
            - plugin.service.ts
    - plugins
        - pluginA
            - pluginA.plugin.ts

таким образом, если я импортируюpluginA.plugin.ts сSystem.import('relativePathToPluginA') все работает как положено: система может загружать и компилировать компонент плагина, а также использовать его.

Нов реальном сценарии плагин не должен быть известен во время компиляции, поэтому я создал новый проект с помощью angular-cli и добавил каталог pluginA, а затем сослался на него в его app.module. Затем я собрал проект и перенес вывод js в папку, скажемD:\pluginDist\, Тогда я сослался наmain.bundle.js из метода loadPlugin выше, как в примере ниже (с url = 'main.bundle.js')

loadPlugin(url)
{
    return System.import('D:\\pluginDist\\' + url)
           .then((pluginModule) => {
               const Plugin = pluginModule.default;
               // then use the plugin
    });
}

Я не знаю, является ли ссылка на основную границу правильной (мне определенно не хватает концепций некоторых веб-пакетов), но это как минимум строительный артефакт, поэтому я попробую. Вот так у меня ошибкаUnhandled Promise rejection: Cannot find module 'D:\pluginDist\main.bundle.js'. ; Zone: angular ; Task: Promise.then ; Value:

Другие тесты, которые я сделал, были

переносить файлы * .ts в проекте плагина, вообще пропуская веб-пакет, просто набравtsc в командной строке и попробуйте импортироватьpluginA.plugin.ts Результат транспиляции у меня был такой же, как и выше.

поместите результат js (как из веб-пакета, так и из простой передачи tsc) в папку, где веб-сервер разработки фактически обслуживает файлы (.tmp), а затем ссылаетесь на них по относительному пути: это приводит к остановке веб-пакета во время компиляции, потому что из-за Конечно, он не находит файлы в дереве каталогов проекта во время упаковки.

Теперь я не знаю, куда идти, у вас есть какой-нибудь совет?

Чего я хочу добиться, так это динамически загружать с помощью webpack и typcript модуль js, который не известен во время компиляции.