Angular 5 - загружать модули (которые неизвестны во время компиляции) динамически во время выполнения

Может ли Angular 5 загружать модули / компоненты, которые неизвестны во время компиляции, но во время выполнения динамически?

Я думаю, это не сработает с использованием webpack, но, возможно, с использованием system.js?

РЕДАКТИРОВАТЬ:

Вся идея состоит в том, чтобы создать приложение на основе плагинов, в котором отдельные плагины помещаются в папку плагинов, angular выберет их автоматически, без необходимости перекомпилировать и развертывать все приложение angular. Где плагины - это отдельные функциональные возможности. Конечно, есть навигация по маршрутам и т. Д. Означает, что как только angular понимает, что есть новый плагин, он должен добавить некоторую динамическую навигацию, чтобы пользователь мог переходить к плагину и т. Д.


person user2818430    schedule 02.02.2018    source источник


Ответы (2)


Что ж, хотя здесь есть сложности, вы можете попробовать это. Я думаю, это зависит от вашей кодовой базы. Маршрутизатор предоставляет свойство config, содержащее его текущую конфигурацию, и метод resetConfig(routes: Routes) для сброса конфигурации. Вы можете начать с этого и добавлять, скажем, компоненты на лету.

Однако компоненты должны быть доступны. Возможно, создается динамически, как упоминалось в другом ответе. В качестве альтернативы ваша конфигурация может включать что-то вроде этого:

constructor(private router: Router) {}

private addPlugin(routePath, pluginName, pluginPath) {
    const currentConfig = this.router.config;
    currentConfig.push({
        path: routePath,
        loadChildren: `precompiled-modules/${pluginPath}#${pluginName}`,
    });
    this.router.resetConfig(currentConfig);
}

Вам нужно будет каким-то образом получить pluginPath и pluginName - возможно, вычислить его по соглашению, может быть, вспомогательный сервер lil, который получит это, может быть, его массив предварительно настроен и уже загружен или что-то подобное. Я также предполагаю, что у вас будет действительно хорошая тестовая система, чтобы убедиться, что ваши плагины «совместимы». И, наконец, научите webpack / systemjs готовить модули. В общем, это возможно, но требует некоторой заделки.

Тем не менее, Angular 6 не за горами, а вместе с ним и Angular Elements. Элементы предоставят способ компилировать ваши модули как веб-компоненты и «экспортировать» их, чтобы их можно было использовать где угодно (не обязательно в приложениях Angular). Подумайте о плагинах jQuery - есть база jQuery.min.js, которую вам нужно загрузить, но кроме этого вы больше не думаете об этом, вы просто используете свои новые элементы. То же самое и с Angular Elements - вы экспортируете то, что в основном является веб-компонентом. Есть «загрузчик» (эквивалент jquery.min.js) и ваш комплект Element. Но тогда ваш компонент - это просто еще один узел HTML со свойствами, атрибутами, привязками, событиями, вас больше не волнует, как и о входных данных.

Возможно, стоит подождать, взглянуть и решить для себя.

person Zlatko    schedule 19.02.2018
comment
У вас это работает во время выполнения? Я пробовал несколько решений, но webpack (cli) создает файлы фрагментов для каждой ссылки на модуль, упомянутой в свойстве loadChildren. Если бы я расширил маршрутизатор, когда я уже во время выполнения, я получаю исключение «модуль не найден» и приложение не работает. Angular Elements выглядит действительно многообещающим для загрузки элементов на лету! Но в нашем проекте это в основном маршрутизация к новым и / или обновленным «Модулям». - person Lars Meijdam; 03.05.2018
comment
Нет, на производственной сборке не пробовал. Что касается Angular Elements, он сейчас там, но это довольно большие пакеты (например, 1 МБ). Что касается веб-пакета, вам нужно создать конфигурации и немного поиграть, чтобы получить соответствующие пакеты, которые можно было бы загрузить таким образом, и вы должны научить основной пакет этим дополнениям. Это, вероятно, потребует и некоторой ручной работы. Вероятно, в большинстве случаев это не стоит того, но если вы один из тех случаев, когда оно того стоит, то также стоит возиться со всем этим вручную. - person Zlatko; 03.05.2018
comment
Спасибо! Я углублюсь в это подробнее, а пока я разместил вопрос по этому поводу тоже stackoverflow.com/questions/50149016/. Действительно, что касается AE, они все еще довольно большие по размеру файла, но все еще довольно «молоды» :) - person Lars Meijdam; 03.05.2018

Вы можете посмотреть динамическую загрузку компонентов: https://angular.io/guide/dynamic-component-loader

Это позволяет вам динамически добавлять компоненты во время выполнения.

person DeborahK    schedule 02.02.2018
comment
Будет ли это работать для этого сценария, когда я создаю свое приложение angular, развертываю его, а затем создаю один единственный компонент, помещаю его в папку приложения, и приложение angular выберет его без необходимости перекомпилировать все приложение и повторно развернуть? - person user2818430; 02.02.2018
comment
P.S. Спасибо за отличные курсы Angular на Pluralsight :) - person user2818430; 02.02.2018
comment
Вы видели здесь обсуждение: stackoverflow.com/questions/41438198/ - person DeborahK; 02.02.2018
comment
Я создал репозиторий на github с решением, которое может помочь. Он использует 6 библиотек Angular и 1 базовое приложение, которые лениво загружают связанные библиотеки UMD; github.com/lmeijdam/angular-umd-dynamic-example Если у вас есть любые предложения, пожалуйста, не стесняйтесь добавлять! - person Lars Meijdam; 09.05.2018