Как упаковать угловой компонент вместе со всеми зависимыми компонентами и сервисами в angular7, чтобы использовать его в других угловых приложениях

Question

Я работаю над приложением, в котором я разработал компонент, который отображается в розетке маршрутизатора и в котором есть другой вложенный компонент. Наряду с этим он использует собственную службу в методе ngOnInit () для извлечения данных из серверной части. Я хочу, чтобы этот компонент был упакован. Так что его можно использовать в другом угловом приложении без особых настроек.

Ниже приведен код компонента:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { RSService } from './details.service';
import { Term } from './Term';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'rs-details',
  templateUrl: './details.component.html',
  styleUrls: ['./details.component.css']
})
export class DetailsComponent implements OnInit, OnDestroy {

    terms: Term[];
    rowGroupMetadata: any;
    rowData: any;
    private sub: Subscription;

    constructor(private rsService: RSService, private _route: ActivatedRoute) { }

    ngOnInit() {
        this.sub = this._route.params.subscribe(
            params => {
                const id = +params['id'];
                this.rsService.getRS(id).then(terms => {
                    this.terms = terms;
                    this.updateRowGroupMetaData();
                });
            });
        console.log('in Product details ngOnInit');
    }
    ngOnDestroy(): void {
        this.sub.unsubscribe();
        console.log('in ngOnDestroy');
    }
    updateRowGroupMetaData() {
      this.rowGroupMetadata = {};
      if (this.terms) {
          for (let i = 0; i < this.terms.length; i++) {
              this.rowData = this.terms[i];
              let SectionName = this.rowData.SectionName;
              if (i === 0) {
                  this.rowGroupMetadata[SectionName] = { index: 0, size: 1 };
              } else {
                  let previousRowData = this.terms[i - 1];
                  let previousRowGroup = previousRowData.SectionName;
                  if (SectionName === previousRowGroup) {
                    this.rowGroupMetadata[SectionName].size++;
                  } else {
                    this.rowGroupMetadata[SectionName] = { index: i, size: 1 };
                  }
              }
          }
      }
  }
}





The goal is to reuse this component without much configuration in other angular application.
Anyone came across the same scenario please point me in right direction.

Answer 1

Для упаковки компонентов Angular и их повторного использования в других приложениях Angular вы можете использовать ng-packagr .Это даже позволяет вам публиковать вашу библиотеку в реестре npm.
Для получения дополнительной информации просто посмотрите документацию.