Как разработать два модуля angular локально, где модуль A импортирует модуль B

При разработке двух локальных проектов в angularjs (где один импортирует другой) я просто запускал «npm link» в папке модуля B, а затем запускал «npm link module-B» в папке моего основного модуля и всякий раз, когда я менял файл в модуле BI увидит его прямо в моем модуле обслуживания браузера A.

Но с angular (4) все не так просто.

Я использую ng-packagr для создания папки dist.
Я запускаю ссылку npm внутри папки dist.
Я запускаю модуль ссылки npm-B в папке основного модуля.
Затем я запускаю ng serve --preserve -символы.

Пока все хорошо, он может понять компоненты модуля B. Но если я попытаюсь что-то изменить в модуле B, перезапущу ng-packagr, мой основной модуль «ng serve» не скомпилируется, мне придется остановить и запустить ng serve .

Я думаю, что ng-packagr сначала удаляет папку dist, и это вызывает перестройку в ng serve, которая терпит неудачу и не замечает вновь созданные файлы, которые появились после удаления папки dist.

Должны ли мы использовать ng-packagr или есть какой-то другой способ сделать многопроектную локальную разработку.

Обновление:

Если мы закомментируем этот раздел в ng-packagr.js, он не удалит папку, а браузер обновит каждый раз, когда файл изменяется и запускается ngpackagr:

return Promise.all([ /*rimraf_1.rimraf(p.dest),*/ rimraf_1.rimraf(p.workingDirectory) ]);

Но запуск ng-packagr занимает некоторое время в зависимости от размера библиотеки. Поскольку он создает все, а не только файлы, которые изменяются.


person Viktor Eriksson    schedule 18.10.2017    source источник


Ответы (1)


Хорошо, я думаю, у меня это работает. Это решение кажется гораздо более простым и не использует ng-packagr. Что я сделал:

  • В модуле B я переместил все свои @ angular-dependencies из dependencies в peerDependencies.
  • В корневую папку модуля B добавлен index.ts, содержащий:
    экспорт * из "./src/.../panel.module"
  • Запустите "npm link" из корневой папки модуля B
  • Запустите "npm link module-B" из корневой папки модуля A
  • Запустите ng serve --preserve-symlinks

Файл index.ts делает так, чтобы импорт оставался неизменным вне зависимости от того, берете ли вы модуль из репозитория npm или разрабатываете локально:
import {moduleB} from "module-b";

Я думаю, что это решение работает только для Компонентов, которые предназначены для запуска только в «родительском контейнере», например, для Проекта, использующего Компонент. Если бы у moduleB был, скажем, демонстрационный модуль / страница, я думаю, что нужно было бы разбить его на два шага: сначала демонстрационный модуль как отдельный npm-проект и компонентный модуль в Child-npm-Project.

person Viktor Eriksson    schedule 23.10.2017
comment
Я пытаюсь сделать то же самое с локальной разработкой angular и общими библиотеками и т. Д. У вас есть github, который показывает больше о том, как у вас эта настройка? - person Greg Foote; 02.01.2018
comment
Извините, не банкомат. Но как только у меня будет время исправить один, я его выложу - person Viktor Eriksson; 08.01.2018
comment
Какие версии angular-cli и npm вы используете? Поскольку с угловой версией 5.2.4 и npm версией 5.6.0, после ng serve, что приводит к ERROR in ./node_modules/module-b/index.ts Module build failed: Error: C:\my-workspace\module-a\node_modules\module-b\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property. Очевидно, Typescript стал строже, как описано здесь. - person Markus Pscheidt; 13.02.2018
comment
@MarkusPscheidt У меня та же проблема. Удалось ли это исправить? - person Nico Van Belle; 14.02.2018
comment
@NicoVanBelle К сожалению, пока нет. - person Markus Pscheidt; 15.02.2018