Предыдущая статья: Создание конфигурируемого Webhook-модуля для NestJS-приложении
В этой статье я опишу создание таблички отображающей данные и формы для ее заполнения, интерфейсы строятся на компонентах от https://ng.ant.design, формы создаются и управляются с помощью https://formly.dev, для стилей используется https://tailwindcss.com, стейт машины нет.
1. Создаем пустую Angular библиотеку
В этой библиотеке лежат компоненты для отображения и работы с данными сущности Webhook.
Commands
# Create Angular library
./node_modules/.bin/nx g @nx/angular:library webhook-angular --buildable --publishable --directory=libs/feature/webhook-angular --simpleName=true --projectNameAndRootFormat=as-provided --strict=true --prefix= --standalone=true --selector= --changeDetection=OnPush --importPath=@nestjs-mod-fullstack/webhook-angular
# Change file with test options
rm -rf libs/feature/webhook-angular/src/test-setup.ts
cp apps/client/src/test-setup.ts libs/feature/webhook-angular/src/test-setup.ts
Вывод консоли
$ ./node_modules/.bin/nx g @nx/angular:library webhook-angular --buildable --publishable --directory=libs/feature/webhook-angular --simpleName=true --projectNameAndRootFormat=as-provided --strict=true --prefix= --standalone=true --selector= --changeDetection=OnPush --importPath=@nestjs-mod-fullstack/webhook-angular
NX Generating @nx/angular:library
CREATE libs/feature/webhook-angular/project.json
CREATE libs/feature/webhook-angular/README.md
CREATE libs/feature/webhook-angular/ng-package.json
CREATE libs/feature/webhook-angular/package.json
CREATE libs/feature/webhook-angular/tsconfig.json
CREATE libs/feature/webhook-angular/tsconfig.lib.json
CREATE libs/feature/webhook-angular/tsconfig.lib.prod.json
CREATE libs/feature/webhook-angular/src/index.ts
CREATE libs/feature/webhook-angular/jest.config.ts
CREATE libs/feature/webhook-angular/src/test-setup.ts
CREATE libs/feature/webhook-angular/tsconfig.spec.json
CREATE libs/feature/webhook-angular/src/lib/webhook-angular/webhook-angular.component.css
CREATE libs/feature/webhook-angular/src/lib/webhook-angular/webhook-angular.component.html
CREATE libs/feature/webhook-angular/src/lib/webhook-angular/webhook-angular.component.spec.ts
CREATE libs/feature/webhook-angular/src/lib/webhook-angular/webhook-angular.component.ts
CREATE libs/feature/webhook-angular/.eslintrc.json
UPDATE package.json
UPDATE tsconfig.base.json
> @nestjs-mod-fullstack/source@0.0.9 prepare
> npx -y husky install
install command is DEPRECATED
removed 2 packages, changed 5 packages, and audited 2726 packages in 13s
332 packages are looking for funding
run `npm fund` for details
33 vulnerabilities (4 low, 12 moderate, 17 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.
Run `npm audit` for details.
NX
Поделиться ссылкой:
Интересные статьи
Интересные статьи
Год назад у Битрикс24 появилась нативная интеграция с BI-сервисом DataLens: теперь пользователи CRM могут строить дашборд с бизнес-аналитикой за несколько кликов. Для создания таких аналитических отчё...
Доброго времени суток. При работе с Bitrix-инфраструктурой в определенный момент вы можете столкнуться с проблемой увеличения времени открытия различных страниц на вашей площадке (сайте), медленн...
В этой статье мы популярно объясняем на собственном опыте как организовать массовую выгрузку, обработку и загрузку фотографий товаров из Bitrix, используя Python и минимальное количество SQL. Для проч...
Большая часть договоров, с которыми я сталкивалась в жизни, —– распечатанные типовые шаблоны сомнительного качества со строчками для заполнения персональных данных, сроков и сумм, которые мои преподав...
Каждый уважающий себя техлид \ архитектор ПО \ руководитель разработки,должен написать в своей жизни хотя бы одну CRMнародная мудрость
Читать далее
...