С угловой 7 ...
Поскольку ng7 и ng CLI 7, мы можем придерживаться предпочтительного метода разработки Angular Library следующим образом.
- Создайте рабочее пространство и используйте для флага
--create-application значение false.
- Создайте свою библиотеку в своем рабочем пространстве.
- Создайте проект test / sandbox в своем рабочем пространстве, чтобы протестировать библиотеку по мере ее разработки.
- Используйте поддерево git, чтобы переместить папку
/dist/ вашей библиотеки в отдельное хранилище, которое вы можете использовать в качестве источника для распространения вашей новой библиотеки (внутренне или публично через npm и т. Д.)
Это делает несколько вещей.
1. Сохраняет независимость вашего проекта библиотеки и песочницы, а также генерирует сквозной (e2e) проект тестирования в вашей рабочей области.
2. Хранит все ваши проекты вместе, но независимо.
Так, что это меняет точно? Это «в основном», как мы делаем вещи.
Имейте в виду, вам нужно будет добавить внешнюю схему / библиотеку в ваш проект песочницы, а не в ваше рабочее пространство. Я считаю, что в ng6 это было не так, так как в ng6 вы одновременно создали рабочее пространство и проект, а затем вам пришлось сделать некоторую магию переименования. В ng7 вы используете флаг --create-application, установленный на false, а затем создаете свой проект песочницы / dev. Тем не менее, когда вы используете ng add с целью добавления внешней библиотеки / схемы в ваш проект песочницы (например, угловой материал), вы будете использовать флаг --project= с командой ng add. Давайте пройдемся по шагам, теперь, когда мы [более] объяснили все.
ПРИМЕЧАНИЕ. Я всегда создаю репо в своем источнике (gitlab / github / bitbucket / и т. Д.), А затем клонирую его в мой локальный каталог, прежде чем что-либо делать, я предполагаю, что вы делаете то же самое.
В демонстрационных целях мы будем называть эту библиотеку «Демо-библиотекой», а мой репозиторий будет называться «demo-workspace»
- Выполнить
git clone $ssh_url_for_repo_here
- CD в ваше недавно клонированное хранилище рабочей области
cd demo-workspace
- Используйте ng new для создания вашего рабочего пространства БЕЗ проекта и в том же каталоге
ng new demo-workspace --directory=./ --create-application=false
- Это создаст угловое рабочее пространство. Он будет похож на проект, но ничего не изменится, но потерпит неудачу, если вы наберете
ng serve
- В той же папке (ROOT вашего репозитория рабочей области) сгенерируйте вашу библиотеку, включая нужный префикс) с
ng generate demo-library или ng g demo-library --prefix=demo.
- Это создаст папку «проекты» внутри вашей папки рабочего пространства. Он поместит вашу новую библиотеку в папку «проекты».
- Затем вы запустите
ng build demo-library, чтобы запустить первоначальную сборку новой библиотеки, которая создаст папку dist в корне вашего рабочего пространства.
- Затем вы создадите свой проект песочницы, который вы будете использовать при разработке и тестировании вашей угловой библиотеки с помощью команды
ng generate и желаемых флагов, что-то вроде этого ng g application demo-sandbox --style=scss --routing=false
- Это создаст обычный угловой проект, следуя инструкциям вашего флага, и поместит вновь сгенерированный проект в папку проектов вашей рабочей области
demo-workspace/projects/demo-sandbox
- После того, как ваш проект сгенерирован, вы можете подать его со стандартным
ng serve, и он появится на порте 4200, для этого не нужно включать флаг --project=, он примет его правильно.
- Теперь вы наконец добавите схему Angular Material в свой проект песочницы с помощью команды
ng add и с помощью флага --project=, чтобы определить, в каком проекте Angular Material должен выполняться (опять же, все это находится в каталоге вашего родительского рабочего пространства) ng add @angular/material --project=demo-sandbox
- Вы заметите, что ваша «демо-песочница» на самом деле не имеет package.json, потому что она использует package.json из рабочей области. Все отделено, но на самом деле это не так.
- Наконец добавьте Angular Material как одноранговую зависимость так же, как @smnbbrv предложил свой ответ ...
Затем добавьте «@ angular / material» в peerDependencies `projects / demo-library / src / package.json (просто скопируйте строку с @ angular / material из вашего основного package.json).
Я добавляю зависимости @ angular / cdk, @ angular / animations и hammerjs вместе с @ angular / material лично.Я хорошо разбираюсь в деталях, плюс вы заметите, что в "peerDependencies" он явно имеет как @ angular / common, так и @ angular / core, а не просто один и предполагает другое.
Когда вы закончите с этим, вы можете запустить команду
ng build, чтобы перестроить ваш проект демо-библиотеки, создав тем самым новую папку 'dist /' в вашем проекте рабочей области, которая также вызовет вашу текущую обслуживаемую демо-sandbox 'проект для восстановления самого себя.