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

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

Я думаю, что это не будет работать с помощью веб-пакета, но, возможно, с помощью system.js?

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

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

Источник

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) и ваш комплект элементов. Но тогда ваш компонент - это просто еще один HTML-узел со свойствами, атрибутами, привязками, событиями, вам уже все равно, так же, как вам не нужны входные данные.

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

Источник

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

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

Источник
Другие вопросы по тегам