#angular #typescript #gulp #systemjs #angular-components
#angular #typescript #глоток #systemjs #angular-компоненты
Вопрос:
Я новичок в Angular2, и мне интересно узнать, есть ли возможность повторного использования целых наборов компонентов презентации из одного приложения в другом приложении?
Например, у меня есть приложение Angular 2 под названием MyApp, и в нем у меня есть несколько общих компонентов, которые я создал, они расположены в папке app / components / common, и каждый содержит TypeScript, Sass и HTML-файл.
Я использую Gulp для компиляции TypeScript в JS и Sass в CSS.
Теперь я сообщаю, что эти общие компоненты могут быть общими для других моих приложений Angular 2, и поэтому я хочу использовать их в отдельном приложении Angular 2 под названием MyOtherApp.
Я хочу иметь возможность извлекать все общие компоненты из MyApp и использовать их в MyOtherApp.
Возможно ли это? Если да, то каков наилучший подход к этому типу совместного использования компонентов?
Как я уже сказал, я использую Gulp для сборки / запуска, а также System.js для настройки конфигурации приложений Angular.
При необходимости я могу поделиться некоторым кодом из того, что я пробовал, но я не уверен, чем полезно поделиться, поэтому, пожалуйста, запросите, что может быть полезным, и я поделюсь.
Ответ №1:
Я думаю, что наиболее общий способ — создать отдельную библиотеку, которая публикует NgModule — точно так же, как это делают Angular, библиотека Angular Material 2 и другие. Однако это требует больше усилий для настройки сценария сборки для библиотеки и усложняет отладку.
Другой вариант — создать единый проект TypeScript для всех приложений с разными файлами точек входа с функцией начальной загрузки Angular для каждого проекта
Комментарии:
1. спасибо, можете ли вы предоставить ссылку или дополнительную информацию о том, почему библиотеку может быть сложнее отлаживать? Если библиотека является собственным автономным проектом Angular, можно ли ее отлаживать как таковую? Вы имеете в виду, что отладка библиотеки в приложении, в которое она импортируется, становится затруднительной?
2. Да, у вас может быть автономное приложение в библиотеке, как здесь github.com/angular/material2/tree/master/src/demo-app Однако будет сложнее отлаживать проблемы в ваших приложениях с помощью библиотеки — я бы предпочел имитировать проблемы в приложении внутри библиотеки и отлаживать их там
3. Спасибо @Rem, было бы проще обслуживать внутреннее приложение Angular внутри основного приложения angular? Что я хочу сделать, так это иметь место, где я могу запустить, скажем, guld serve components, и это загрузит приложение, которое демонстрирует, какие общие компоненты доступны.
4. Да, я использую webpack, и там мне нужно изменить только файл точки входа, который включает в себя ng bootstrap, я думаю, что это не должно быть сложно и с systemjs (просто посмотрите на material2 — они сделали это с помощью gulp)
Ответ №2:
Я упорядочиваю свои компоненты следующим образом:
/routes
/route1/
route1component.ts
/route1child1
/route1child2
/route2/
route2component.ts
/route2child1
/route2child2
/apponents (project-level-reuse, must be used in at least 2 places with the app to be promoted to an apponent)
/project-reusable-component
/components (cross-project-level-reuse, used across multiple projects)
/cross-project-reusable-component
Давайте предположим, что используется Git. Теперь в «компонентах» я обычно могу делиться ими между проектами, используя подмодули Git, чтобы повторно используемые «компоненты» жили в своем собственном репозитории и могли быть включены в любой проект в качестве подмодуля.