Совместное использование компонентов с помощью частной библиотеки в Angular
Задумывались ли вы о совместном использовании компонентов во многих проектах? Но вы не хотите копировать и вставлять код в каждый проект, чтобы избежать дублирования кода. Если цель состоит в том, чтобы совместно использовать компоненты, утилиты и т.д. Я думаю, что эта статья поможет вам ответить на ваш вопрос. Потому что я хочу рассказать о verdaccio.
Verdaccio - это простой, не требующий конфигурации локальный частный реестр NPM. Для начала работы не нужна целая база данных. Verdaccio поставляется из коробки с собственной крошечной базой данных и возможностью проксирования других реестров (например, npmjs.org), что также вводит кэширование загруженных модулей по пути.
Легкий Node.js реестр частных прокси | Verdaccio
В этом уроке мы создадим проект, как на изображении ниже.
Прежде всего, нам необходимо установить verdaccio.
npm i -g verdaccio
После этого давайте запустим verdaccio и посмотрим на некоторые конфигурации.
verdaccio
Затем, в терминале будет показано следующее
Просто откройте http://localhost:4873/ , чтобы показать страницу по умолчанию verdaccio
Установка verdaccio в локальном окружении уже завершена. Далее мы настроим проект, который хотим опубликовать.
Я использую этот проект на ветке private library, которая берется из основной ветки.
GitHub - afifalfiano/angular-tutorial-blogs at private-library .
Затем я хочу сгенерировать разделяемый модуль в виде библиотеки.
ng g library shared-library
Затем создадим простой компонент для совместного использования. Убедитесь, что созданный компонент назначен модулю shared-library.
ng g c header --module=shared-library.module.ts
Затем обновите файл header.component.html.
<div class="header"> <p>{{title}}</p> <div class="menu"> <ng-container *ngFor="let item of menuList"> <a [href]="item.link" rel="noreferrer noopener">{{item.title}}</a> </ng-container> </div> </div>
После этого обновите стиль header.component.html.
.header { margin: 0; background: lightblue; border-radius: 5px; display: flex; justify-content: space-between; font-family: sans-serif; align-items: center; @media screen and (max-width: 475px) { flex-direction: column; } p { &:first-child { padding: 10px; margin: 0; font-weight: 600; font-size: 18px; } } .menu { display: flex; @media screen and (max-width: 475px) { flex-direction: column; justify-content: center; align-items: center; } a { text-decoration: none; color: #000; padding: 10px; transition: .9s; &:hover { transition: .9s; color: #fff; padding: 10px; background-color: rgb(0, 98, 245); border-radius: 5px; } } } }
Также обновите файл typescript в файле header.component.ts
import { Component, Input } from '@angular/core'; @Component({ selector: 'app-header', templateUrl: './header.component.html', styleUrls: ['./header.component.scss'] }) export class HeaderComponent { @Input() title!: string; @Input() menuList: {link: string, title: string}[] = []; }
Результат выглядит следующим образом, это не причудливый дизайн, а только для того, чтобы показать реальный компонент.
Не забудьте обновить shared-library.module.ts
import { NgModule } from '@angular/core'; import { SharedLibraryComponent } from './shared-library.component'; import { HeaderComponent } from './header/header.component'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [ SharedLibraryComponent, HeaderComponent ], imports: [ CommonModule ], exports: [ HeaderComponent ] }) export class SharedLibraryModule { }
Также обновите public-api.ts, чтобы он стал выглядеть так
/* * Public API Surface of shared */ export * from './lib/shared-library.service'; export * from './lib/shared-library.component'; export * from './lib/shared-library.module'; export * from './lib/header/header.component';
Я уже выложил ветку на github
GitHub - afifalfiano/angular-tutorial-blogs at private-library .
Далее мы зарегистрируем частную библиотеку в verdaccio.
Выполните эту команду для сборки проекта
ng build shared-library
После этого добавьте пользователя в реестр verdaccio
npm adduser --registry http://localhost:4873
После создания пользователя, давайте опубликуем частную библиотеку, выполнив эту команду, убедитесь, что при запуске npm publish вы должны находиться в папке dist/shared-library.
Вы можете выполнить эту команду, чтобы изменить каталог на dist/shared-library
cd dist/shared-library
Затем просто опубликуйте библиотеку
npm publish --registry http://localhost:4873
Для приватной библиотеки версии вы можете изменить версию в package.json, и не забудьте добавить журнал изменений markdown для документирования функции.
Частная библиотека уже опубликована. Далее мы хотим установить ее в angular другого проекта.
Я использую этот проект с веткой using-private-library из основной ветки.
GitHub - afifalfiano/angular-tutorial-blogs at using-private-library
Если мы выполним эту команду, возможно, мы получим какую-то ошибку или успех, но не нашу частную библиотеку.
Эта ошибка связана с тем, что npm install ссылается на npmjs.
Итак, чтобы решить эту проблему, нам нужно зарегистрировать нашу частную библиотеку verdaccio. Создайте файл .npmrc и добавьте этот скрипт.
registry=http://localhost:4873
Таким образом, я снова устанавливаю свою частную библиотеку
npm install shared-library
Если вы все еще получаете ошибку в своем проекте, попробуйте следующее решение
Мы успешно установили частную библиотеку
В левой части отображается запрос verdaccio, а в правой - процесс установки частной библиотеки.
Чтобы убедиться, что частная библиотека была установлена. Просто проверьте файл package.json и наведите курсор на библиотеку angular-tutorial-blogs.
Затем нам нужно попробовать заголовок компонента, который мы создали, на частной библиотеке.
Затем откройте app.module.ts и импортируйте общую библиотеку модуля.
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { SharedLibraryModule } from 'shared-library'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, SharedLibraryModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
После этого попробуем вызвать многократно используемый компонент из разделяемой библиотеки. Откройте файл app.component.html и обновите его.
<app-header [title]="'Hello'" [menuList]="[{link: '/', title: 'Home'}, {link: '/product', title: 'Product'}]"></app-header> <router-outlet></router-outlet>
Результат использования общего компонента выглядит следующим образом
Мы только что закончили этот учебник по angular и verdaccio.
Ветка уже выложена в мой репозиторий на GitHub.
GitHub - afifalfiano/angular-tutorial-blogs at using-private-library
Мы можем получить некоторые преимущества от этой библиотеки для публикации нашей частной библиотеки, например, некоторые компании имеют системы проектирования и нам нужно создать частную библиотеку, потому что система проектирования используется только внутренними компаниями.
Еще одно преимущество - мы можем избежать дублирования кода, если у нас есть несколько проектов с одинаковым пользовательским интерфейсом, темой или функцией.
Надеюсь, эта статья оказалась полезной для вас, и спасибо. Если у вас есть какие-либо замечания или предложения, просто ответьте на эту статью или напишите по адресу [email protected].
#Angular #Verdaccio #SharedLibary #PrivatePackage #TutorialAngular
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.