Как создать и использовать библиотеку Angular 18
Проект, над которым я работаю, требует разделения некоторых компонентов на общую библиотеку. Я использую Angular 18 с автономными компонентами. Я нашел в Интернете много ответов/статей по этим проблемам, но, похоже, ни одна из них не ответила на мой вопрос и не исправила проблемы сборки.
Я начинаю этот эксперимент с новыми, в основном пустыми проектами Angular, просто чтобы посмотреть, смогу ли я заставить его работать, прежде чем делать это с реальным кодом проекта.
В идеале это будет храниться в частном репозитории NPM или, возможно, где-нибудь в git.
Вот что я сделал (имена не очень удачные, извините):
Создайте новую папку под названием «test», затем перейдите в нее.
cd test
Создайте рабочую область библиотеки.
ng new libcd lib
Создать проект библиотеки.
ng g library test-lib
Команда генерации добавляет пример компонента, поэтому я буду использовать его для тестирования. В данный момент я больше ничего не добавляю в библиотеку.
Построить библиотеку.
ng build
Упакуйте библиотеку.
cd projects/test-libnpm pack
Это создает test-lib-0.0.1.tgz.
Теперь, вернувшись в родительский каталог test, добавьте еще один тестовый проект для использования библиотеки lib.
ng new testcd test
Установите модуль локальной библиотеки:
npm i {path-before-test}/test/lib/projects/test-lib -S
(Я также пробовал {pah-before-test}/test/lib/projects/test-lib/test-lib-0.0.1.tgz напрямую)
Я вижу, что файлы из упакованной библиотеки находятся в node_modules.
Теперь в app.component.ts этого тестового проекта попробуйте импортировать компонент из библиотеки lib.
import { TestLibComponent } from 'test-lib';
Это приводит к ошибке линтинга на test-lib: Cannot find module 'test-lib' or its corresponding type declarations.
Я пробовал некоторые хакерские вещи с tsconfig.js и tsconfig.app.js, которые можно найти в других ответах на аналогичные проблемы, но, во-первых, они не кажутся вещами, которые я действительно хочу изменить, например, изменение цели модуля ts. Также попробовал добавить пути к папкам в node_modules и установить для baseUrl значение «./». Это не решает проблему.
Я также пробовал импортировать компонент прямо из test-lib/src/public-api. Это устранит ошибку линтинга, но приведет к фактической ошибке компиляции: File 'node_modules\test-lib\src/public-api.ts' is missing from the TypeScript compilation.
Что я делаю не так?
Ответы 2
Здесь две проблемы. Во-первых, ng build собирает только приложение, а не библиотеку. По сути, у вас есть два проекта в репозитории: приложение и библиотека. А поскольку вы сначала создали приложение, это проект по умолчанию, если проект не указан. Чтобы собрать библиотеку, вам нужно указать проект, запустив ng build test-lib.
Во-вторых, вы упаковываете исходные файлы, а не встроенную библиотеку. Вместо того, чтобы паковать projects/test-lib, нужно паковать dist/test-lib.
Дальнейшее чтение: https://angular.dev/tools/libraries/creating-libraries#publishing-your-library
@jmarkyston, это потому, что вы создаете приложение, а не библиотеку. Чтобы собрать библиотеку, нужно запустить ng build test-lib. Обновил свой ответ.
Я вижу сейчас. Большое вам спасибо за вашу помощь!
Измените свой cd projects/test-lib -> cd <path-to-your-dist>/test-lib и бегите npm pack.
После этого из вашего нового углового приложения запустите:
npm install ../<path-to-your-dist>/test-lib-0.0.1.tgz
Затем обязательно обновите tsconfig.json в новом приложении, включив в него test-lib путь:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"paths": {
"test-lib": ["../node_modules/test-lib"]
}
},
}
и обновите свой tsconfig.app.json, как показано ниже:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
],
"exclude": [
"node_modules",
"dist",
"test",
"**/*spec.ts"
]
}
Теперь вы можете обратиться к своей библиотеке в новом созданном вами угловом приложении.
Это то, что я постоянно вижу в других статьях, но не получил четкого ответа. Когда я запускаю ng build в библиотеке, он выводит данные на dist, но файла package.json нет, поэтому npm pack не работает. Есть ли у вас какие-либо предложения по этому поводу?
Это то, что я постоянно вижу в других статьях, но не получил четкого ответа. Когда я запускаю
ng buildв библиотеке, он выводит данные на dist, но файла package.json нет, поэтомуnpm packне работает. Есть ли у вас какие-либо предложения по этому поводу?