Внедрение архитектуры плагинов/систем плагинов/сменных фреймворков в Angular 2, Angular 4 или Angular 5

Ответ 1

Пример приложения с рабочей плагиновой системой (спасибо Gijs за создание github repo!) https://github.com/PacktPublishing/Mastering-Angular-2-Components/tree/master/angular-2-components-chapter-10 на основе eBook Освоение Angular 2 компонента

• для расширения основных компонентов приложения
• файловая система (для простого добавления каталогов/файлов плагинов без редактирования каких-либо основных конфигурационных файлов или необходимости перекомпилировать ваше приложение!)
• Загрузка и динамическое использование плагинов
• создание рудиментарного менеджера плагинов для активации/деактивации плагинов на лету

Cheers, Никлас

Ответ 2

То, что вы ищете, - это ленивая загрузка модуля. Вот пример этого: http://plnkr.co/edit/FDaiDvklexT68BTaNqvE?p=preview

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
    <a [routerLink]="['/']">Home</a> | 
    <a [routerLink]="['/app/home']">App Home</a> |
    <a [routerLink]="['/app/lazy']">App Lazy</a>

    <hr>
    <button (click)="addRoutes()">Add Routes</button>

    <hr>
    <router-outlet></router-outlet>
  `
})
export class App {
  loaded: boolean = false;
  constructor(private router: Router) {}

  addRoutes() {
    let routerConfig = this.router.config;

    if (!this.loaded) {
      routerConfig[1].children.push({
        path: `lazy`,
        loadChildren: 'app/lazy.module#LazyModule'
      });

      this.router.resetConfig(routerConfig);
      this.loaded = true;
    }
  }
}

Лучший... Том

Ответ 3

Я сделал взлом для загрузки и скомпилировал другие модули во время начальной загрузки, но я не решил проблему циклических зависимостей

 const moduleFile: any = require(`./${app}/${app}.module`),
                    module = moduleFile[Object.keys(moduleFile)[0]];

 route.children.push({
     path: app,
     loadChildren: (): Promise<any> => module
 });
 promises.push(this.compiler.compileModuleAndAllComponentsAsync(module));

то в AppModule добавьте это:

{
        provide: APP_INITIALIZER,
        useFactory: AppsLoaderFactory,
        deps: [AppsLoader],
        multi: true
},

Ответ 4

Я искал плагинную систему в angular 2/4 тоже для разработки среды RAD для корпоративного приложения на работе. После некоторых исследований я решил реализовать коллекцию компонентов pseudo- Angular, хранящихся в базе данных (но может быть в файловой системе).

Компоненты, хранящиеся в базе данных базы данных, основаны на ng-dynamic и реализация основного компонента похожа на это:

declare var ctx: any;

@Component({
    selector: 'my-template',
    template: `
<div>
    <div *dynamicComponent="template; context: { ctx: ctx };"></div>
</div>
  `,
    providers: [EmitterService],

})

export class MyTemplateComponent implements OnMount, AfterViewInit, OnChanges {


    // name
    private _name: string;
    get name(): string {
        return this._name;
    }
    @Input()
    set name(name: string) {
        this._name = name;        
        this.initTemplate();
    }

    template: string;
    ctx: any = null;

    private initTemplate() {

        this.templateSvc.getTemplate(this.name).subscribe(res => {
            // Load external JS with ctx implementation
            let promise1 = injectScript(res.pathJs);
            // Load external CCS
            let promise2 = injectScript(res.pathCss);

            Promise.all([promise1, promise2]).then(() => {

                // assign external component code
                this.ctx = ctx; //

                // sets the template
                this.template = res.template;

                this.injectServices();

                if (this.ctx && this.ctx.onInit) {
                    this.ctx.onInit();
                }

            });

        });

    }

Внешний код javascript похож на компоненты angular:

var ctx = {

// injected    
_httpService: {},
_emitterService: null,

// properies
model: {
    "title": "hello world!",
},


// events
onInit() {
    console.log('onInit');
},

onDestroy() {
    console.log('onDestroy');
},

onChanges(changes) {
    console.log('changes', changes);
},

customFunction1() {
    console.log('customFunction1');
},

childTemplateName: string = 'other-component'; 

};

И шаблоны компонентов похожи на angular templates:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<input [(ngModel)]="ctx.model.title" type="text" />

И также может быть вложен:

<a (click)="customFunction1()">{{ ctx.model.title }}</a>
<my-template [name]="childTemplateName"></my-template>

Хотя это не идеально, разработчики пользовательских компонентов имеют аналогичную структуру, чем в angular2/4.

Ответ 5

Это можно сделать "вручную". Поскольку webpack ничего не знает о модуле внешних модулей (plug-ins), он не может включать их в пакеты (ы). Так что я сделал, это посмотреть на код, сгенерированный webpack, и я нашел эти пироги кода в main.bundle.js:

var map = {
"./dashboard/dashboard.module": ["../../../../../src/app/dashboard/dashboard.module.ts","dashboard.module"]}; 

Давайте рассмотрим, что содержит этот массив:

• "./dashboard/dashboard.module" - это URL-адрес маршрутизации модуля, который мы хотим использовать для ленивой загрузки: {path: 'dashboard', loadChildren: './dashboard/dashboard.module # DashboardModule '}
• "../../../../../src/app/dashboard/dashboard.module.ts" - это точка входа (contructor) берет из
• "dashboard.module" - фактическое имя файла без chunk.js(например: dashboard.module.chunk.js)

Итак, теоретически, если вы добавите запись в свойство карты, настройте свою маршрутизацию и следуйте шаблону, вы можете иметь подключаемую систему. Теперь задача состоит в том, как добавлять или удалять записи из этого свойства карты. Очевидно, что это невозможно сделать из кода angular, это должно быть сделано для внешнего инструмента.

Ответ 6

Я попытался реализовать архитектуру плагина с использованием ABP, Angular и ASP.NET Core: https://github.com/chanjunweimy/abp_plugin_with_ui

В принципе, я разработал плагины Angular, используя другое приложение Angular, затем я динамически добавляю их вместе.

Дополнительная информация о том, как я ее достигаю:

У меня есть приложение 2 angular -cli, 1 является основным приложением Angular cli, а другое - плагином Angular cli. Проблема, с которой мы сталкиваемся в подходе архитектуры angular -cli, заключается в том, как мы их интегрируем.

Прямо сейчас, что я сделал, я запускал ng-build на обоих приложениях и помещал их в папку "wwwroot", которая затем размещалась на сервере ASP.NET core 2.0. Простейший репозиторий, который показывает эту идею, - это Angular Несколько приложений: https://github.com/chanjunweimy/angular-multiple-app

abp_plugin_with_ui - это репозиторий, который работает над созданием плагина, содержащего как бэкэнд, так и Angular cli. Для бэкэнд я использовал фреймворк aspnetboilerplate, интерфейс которого разработан с использованием нескольких приложений angular -cli.

Чтобы основное приложение было интегрировано с приложением plugin, мы должны запустить "ng-build" на обоих приложениях (обратите внимание, что мы также должны изменить на href приложения плагина), затем мы перемещаем построенный содержимое приложения plugin Angular cli, в основную папку "wwwroot" приложения. После достижения всего этого, мы можем запустить "прогон dotnet" для обслуживания веб-приложения ASP.NET Core 2.0 для размещения статических файлов, созданных "ng build".

Надеюсь, это поможет. Любые комментарии приветствуются! ^^