Ответ 1

Я предлагаю вам взглянуть на angular элементы, а точнее createCustomElement. Это поможет вам достичь именно того, что вам нужно.

Я могу дать вам краткое руководство о том, что вы можете сделать.

Мой Github Repo, например,

1) Во-первых, установите @angular/elements

npm i @angular/elements --save

2) Этот шаг включает в себя изменение вашего app.module.ts. Если вы хотите создать только набор выбранных компонентов (пользовательские средства выбора даты, числовые входы и т.д.), Вам придется на мгновение удалить bootstrap: [ ] и заменить его на entryComponents: [ ]. В entryComponents вы поместите пользовательские компоненты, которые хотите построить.

entryComponents: [MyCustomDatePickerComponent, CustomButtonComponent]

3) Теперь пришло время сказать Angular, чтобы он загрузил ваши пользовательские компоненты. Вам также нужно будет определить селектор для ваших пользовательских компонентов. Вы будете вызывать их с помощью этого селектора из любого другого приложения, где вы вводите их. Пример: <my-button-element></my-button-element>

export class AppModule {

  constructor(private injector: Injector) {}

  ngDoBootstrap() {
    const el = createCustomElement(CustomButtonComponent,
      { injector: this.injector });
    customElements.define('my-button-element', el);
    const el2 = createCustomElement(MyCustomDatePickerComponent,
      { injector: this.injector });
    customElements.define('custom-date-picker', el2);
  }
}

4) Сборка компонентов - если вы запустите ng build --prod, вы получите несколько файлов. Мы хотим объединить эти файлы в один, чтобы упростить использование и внедрение пользовательских элементов, которые мы создали. Есть два пакета, которые могут помочь нам сделать это. npm install --save-dev concat fs-extra

Создайте elements-build.js в root своего приложения и вставьте его. (Он объединит выходные данные сборки в один файл .js и .css и поместит их в папку root/elements.

const concat = require('concat');
const fs = require('fs-extra');

(async function build() {
  // Instead of /CustomElements/ put your project name - just check a dist folder to see how its formatted and make it that way
  const files = [
    './dist/CustomElements/runtime-es2015.js',
    './dist/CustomElements/polyfills-es2015.js',
    './dist/CustomElements/main-es2015.js'
  ];

  await fs.ensureDir('elements');
  await concat(files, 'elements/myCustomElements.js');
  await fs.copyFile(
    './dist/CustomElements/styles.css',
    'elements/styles.css'
  );
})();

5) В вашем package.json добавьте

"build:elements": "ng build --prod --output-hashing none && node elements-build.js",

6) Вот оно. Вы создали свои собственные элементы и можете использовать их где угодно в других приложениях Angular или даже в приложениях, отличных от Angular. Единственное, что вам нужно сделать, это импортировать только что созданные вами .js и .css. Вы даже можете использовать Input() & Выведите(), как обычно.

<custom-date-picker dateTitle="My Date Title"></custom-date-picker>

Примечание: Если вы решите импортировать его в другое приложение Angular, у вас могут возникнуть проблемы с zone.js, поскольку он будет импортирован дважды. Решение состоит в том, чтобы импортировать его только один раз (из основного приложения или из пользовательского элемента).

Ответ 2

Для повторного использования компонентов вы можете извлечь ваши компоненты в "общей" зависимости npm. Angular документ находится здесь: https://angular.io/guide/creating-libraries

Имейте в виду, что вам нужно будет создать свой библиотечный проект, а затем опубликовать пакет в реестре npm (общедоступном или частном) для использования в качестве зависимости.

Чтобы использовать компоненты Angular вне Angular, вы можете использовать Angular Elements, чтобы превратить ваши компоненты в стандартные веб-компоненты (https://angular.io/guide/elements).

Имейте в виду, что вам все еще понадобится какой-то конвейер сборки, чтобы превратить ваш Angular-код в JS.

Ответ 3

Вы ищете модуль-компоновщик для JavaScript, который компилирует небольшие кусочки кода в нечто большее и более сложное, например, в библиотеку или приложение. попробуйте RollupJS: руководство по rollup.js

Эти команды предполагают, что точка входа в ваше приложение называется main.js, и вы хотите, чтобы все операции импорта были скомпилированы в один файл с именем bundle.js.

Для браузеров:

скомпилировать с самовыполняющейся функцией, содержащей

$ rollup main.js --file bundle.js --format iife

Ответ 4

Есть много вещей, которые вам нужно сделать Я бы предложил прочитать это здесь

Также я бы предложил создать новый проект для тех общих компонентов, которые вы хотите экспортировать.

Затем используйте их в своем существующем проекте как элемент. (Вы должны ссылаться на JavaScript, файл CSS и HTML-тег для ваших компонентов). например вот так

    <link rel="stylesheet" href="https://xybot-v1-dev.web.app/dist/dlx-styles-1.0.css">

    <dlx-chat-fab 
      bot-name="Condo Bot" 
      popup-text="Hi I am your virtual concierge." 
      theme="blue_deep-orange" 
      agent="condo-dev">
    </dlx-chat-fab>

     <script type="text/javascript" src="https://xybot-v1-dev.web.app/dist/dlx-chatbot-1.0.js"></script>

и ты должен быть в порядке.

Ответ 5

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

У меня был angular проект (проект A) и проект jquery (проект B), и я хотел разделить компонент между ними. Я смог сделать это, создав пустой проект (без маршрутизатора, без дополнительных зависимостей) (проект C) и перенеся компонент из проекта A в C. Использование компонента из C в проекте A было относительно простым, поскольку они оба были угловатыми, Это было до Angular 6. Теперь в Angular 6 или около того они даже создали команду ng generate library в CLI. Также ознакомьтесь с этим ответом здесь для получения дополнительной информации.

Angular предъявляет некоторые требования, и когда вы создаете приложение, оно создает файлы в папке dist для shims, angular framework, комплекта поставщиков и кода вашего общего компонента. Если ваш общий компонент используется вашим неангулярным приложением, вам нужно будет сослаться на эти файлы, потому что ваш компонент был написан на Angular и поэтому для его работы потребуется наличие Angular. Вы также можете просто добавить Angular в свое неугловое приложение на этом этапе. Я сделал это из своего приложения jQuery, а затем использовал комбинацию отправки пользовательских событий и получения событий в Angular через Rxjs.

Ответ 6

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

Команда для создания библиотеки - ng generate library my-lib

Библиотека обычно включает в себя повторно используемый код, который определяет компоненты, службы и другие angular артефакты (каналы, директивы и т.д.), Которые вы просто импортируете в проект. Библиотека упакована в пакет npm для публикации и совместного использования, и этот пакет может также включать схемы, которые предоставляют инструкции для генерации или преобразования кода непосредственно в вашем проекте, точно так же, как CLI создает универсальное скелетное приложение с компонентом ng generate. Схема, объединенная с библиотекой, может, например, предоставить Angular CLI информацию, необходимую для создания определенного компонента, определенного в этой библиотеке.

Источник: https://angular.io/guide/creating-libraries