ساخت کتابخانه انگولار با Angular CLI — از صفر تا صد

۲۰ بازدید
آخرین به‌روزرسانی: ۰۷ بهمن ۱۳۹۸
زمان مطالعه: ۱۰ دقیقه
ساخت کتابخانه انگولار با Angular CLI — از صفر تا صد

با معرفی انگولار 6 مشخص شد که بسیاری از بهبودهای صورت گرفته مدیون Angular CLI هستند. یکی از بهترین این بهبودها ادغام Angular CLI با ng-packagr برای تولید و ساخت کتابخانه‌های انگولار بود. ng-packagr یک ابزار عالی است که از سوی «دیوید هرجس» (David Herges) ساخته شده و کتابخانه انگولار را به Angular Package Format تبدیل می‌کند.

در این مقاله با جزییات مراحل ایجاد یک کتابخانه انگولار آشنا می‌شویم. ضمناً برخی قواعدی که به شروع به کار صحیح یک کتابخانه کمک و از بروز مشکلات جلوگیری می‌کنند را با هم مرور خواهیم کرد.

مقدمه

زمانی که از ng new استفاده می‌کنیم، Angular CLI یک «فضای کاری» (workspace) جدید برای ما می‌سازد. در این فضای کاری انگولار ما دو پروژه داریم:

پروژه کتابخانه

این همان کتابخانه کامپوننت‌ها و سرویس‌ها است که می‌خواهیم ارائه کنیم. در واقع این همان کدی است که می‌توان به عنوان مثال روی npm منتشر کرد.

پروژه اپلیکیشن

این پروژه برای تست کتابخانه استفاده می‌شود. برخی اوقات این اپلیکیشن به عنوان مثالی در مستندات و کاربرد نمونه کتابخانه مورد استفاده قرار می‌گیرد. یک پروژه سوم نیز وجود دارد که تست سر به سر است و Angular CLI به طور پیش‌فرض برای ما تولید می‌کند، اما در این راهنما نیازی به آن نداریم. اکنون که درکی کلی از فضای کاری انگولار یافته‌ایم، برخی اهداف خاص‌تر این راهنما را مرور می‌کنیم.

اهداف

  • استفاده از Angular CLI برای ایجاد یک فضای کاری با همان نام کتابخانه انگولار مورد نظر یعنی example-ng6-lib
  • ما یک اپلیکیشن تست برای کتابخانه example-ng6-lib خود به نام example-ng6-lib-app خواهیم داشت.
  • در فضای کاری example-ng6-lib یک کتابخانه انگولار به نام example-ng6-lib ایجاد می‌کنیم.
  • در کتابخانه انگولار یک پیشوند به صورت enl داریم که اختصاری برای حروف ابتدایی عبارت «Example Ng6 Library» است.
  • ما کتابخانه example-ng6-lib خودمان را با ایمپورت کردن به صورت یک کتابخانه در اپلیکیشن example-ng6-lib-app تست خواهیم کرد.

انگولار 6

مواردی که در ادامه می‌آیند در صورت استفاده از انگولار نسخه 6 باید مورد توجه قرار گیرند.

  • شماره نسخه Angular CLI با انگولار تطبیق یافته است و از نسخه 1.7 به نسخه 6.0.0 رسیده است.
  • فایل پیکربندی Angular CLI یعنی Angular-cli.json با فایلی به نام Angular.json عوض شده است.
  • Angular CLI هم اینک یک فضای کاری تولید می‌کند که مستقیماً از وجود چندین پروژه پشتیبانی می‌کند.

ایجاد یک فضای کاری انگولار

نخستین هدف ما ایجاد یک فضای کاری انگولار به نام example-ng6-lib است.

برای انگولار 7

در انگولار 7 یک فلگ بسیار مفید به نام ‎–createApplication اضافه شده است. اگر از انگولار 7 استفاده می‌کنید باید از رویکردی که در این مقاله (+) توصیف شده است پیروی کنید و نه از رویکرد مناسب انگولار 6 که در ادامه آمده و در آن فضای کاری تغییر نام داده می‌شود.

برای انگولار 6

به دلیل طرز کار پروژه‌ها در انگولار 6 باید فضای کاری انگولار را به روشی نسبتاً نامعمول ایجاد کنیم. ما باید یک فضای کاری به نام example-ng6-lib-app ایجاد کنیم و سپس نام آن را به example-ng6-lib تغییر دهیم:

ng new example-ng6-lib-app
rename example-ng6-lib-app example-ng6-lib
cd example-ng6-lib
ng serve

اگر لازم است از اینترنت اکسپلورر هم پشتیبانی شود، باید این مقاله (+) را نیز مطالعه کنید. زمانی که به این آدرس در مرورگر برویم:

http://localhost:4200/

می‌بینیم که اپلیکیشن آغازین انگولار مشاهده می‌شود.

کتابخانه انگولار

پیکربندی انگولار 6 در فایل angular.json

پیش از آن که اقدام به ایجاد کتابخانه خود بکنیم، نگاهی سریع به فایل پیکربندی انگولار 6 یعنی angular.json خواهیم داشت. در نسخه 6 انگولار فایل قدیمی angular-cli.json با angular.json عوض شده است. ضمناً محتوای آن کمی تغییر یافته است. نکته مهمی که دیده می‌شود شیء Projects است. این شیء یک مدخل برای هر پروژه دارد.

1"projects": {
2  "example-ng6-lib-app": {
3    ...
4  },
5  "example-ng6-lib-app-e2e": {
6    ...
7  }
8},

در حال حاضر ما دو پروژه داریم:

example-ng6-lib-app

این اپلیکیشنی است که از آن برای تست کتابخانه خود استفاده می‌کنیم.

example-ng6-lib-app-e2e

این پروژه پیش‌فرض برای تست سر به سر است. در این مقاله می‌توان این پروژه را کاملاً نادیده گرفت. به خاطر داشته باشید که گفتیم Angular CLI پروژه‌ای به نام example-ng6-lib-app ایجاد می‌کند.

سپس اپلیکیشن پیش‌فرض برای ما به نام example-ng6-lib-app ایجاد می‌شود. بدین ترتیب می‌توانید نام پروژه خود را به صورت example-ng6-lib تعیین کنید. زمانی که کتابخانه ما ایجاد شد می‌بینیم که پروژه دیگری به شیء پروژه اضافه شده است.

نکته: توجه کنید که در انگولار 6 همواره باید فضای کاری خود را به نام library-app سازید و سپس نام آن را به کتابخانه‌تان تغییر دهید.

ایجاد یک ماژول کتابخانه

اینک می‌توانیم یک کتابخانه جدید به نام example-ng6-lib در فضای کاری خود بسازیم:

ng generate library example-ng6-lib --prefix=enl

توجه کنید که ما از فلگ ‎–prefix استفاده می‌کنیم، زیرا می‌خواهیم کامپوننت‌های کتابخانه ما متمایز بمانند. اگر چنین کاری نکنیم Angular CLI از نام پیش‌فرض lib استفاده می‌کند.

نکته: همواره در زمان ایجاد کتابخانه از یک پیشوند برای نام‌گذاری استفاده کنید.

یکی از بهترین نکات در مورد دستور generate در Angular CLI این است که همواره به ما اعلام می‌کند که کدام فایل‌ها از این دستور تأثیر می‌پذیرند:

$ ng generate library example-ng6-lib --prefix=enl

CREATE projects/example-ng6-lib/karma.conf.js (968 bytes)
CREATE projects/example-ng6-lib/ng-package.json (191 bytes)
CREATE projects/example-ng6-lib/ng-package.prod.json (164 bytes)
CREATE projects/example-ng6-lib/package.json (175 bytes)
CREATE projects/example-ng6-lib/src/test.ts (700 bytes)
CREATE projects/example-ng6-lib/src/public_api.ts (191 bytes)
CREATE projects/example-ng6-lib/tsconfig.lib.json (769 bytes)
CREATE projects/example-ng6-lib/tsconfig.spec.json (246 bytes)
CREATE projects/example-ng6-lib/tslint.json (317 bytes)
CREATE projects/example-ng6-lib/src/lib/example-ng6-lib.module.ts (261 bytes)
CREATE projects/example-ng6-lib/src/lib/example-ng6-lib.component.spec.ts (679 bytes)
CREATE projects/example-ng6-lib/src/lib/example-ng6-lib.component.ts (281 bytes)
CREATE projects/example-ng6-lib/src/lib/example-ng6-lib.service.spec.ts (418 bytes)
CREATE projects/example-ng6-lib/src/lib/example-ng6-lib.service.ts (142 bytes)
UPDATE angular.json (4818 bytes)
UPDATE package.json (1724 bytes)
UPDATE tsconfig.json (471 bytes)

در ادامه خلاصه‌ای از کارهایی که دستور تولید کتابخانه انجام داده است را می‌بینید:

  • یک پروژه جدید به نام example-ng6-lib برای کتابخانه ما در angular.json اضافه کرده است.
  • وابستگی‌های ng-packagr را به فایل ما اضافه کرده است.
  • یک ارجاع به مسیر ساخت example-ng6-lib در فایل tsconfig.json اضافه کرده است.
  • منابعی برای کتابخانه در projects/example-ng6-lib ایجاد کرده است.

در ادامه به بررسی عمیق‌تر هر کدام از موارد فوق می‌پردازیم.

پروژه example-ng6-lib در angular.json

اگر به فایل angular.json نکاه کنیم به طور خاص متوجه می‌شویم که در شیء projects اینک پروژه جدیدی به نام angular.json داریم.

1"projects": {
2  "example-ng6-lib-app": {
3
4  },
5  "example-ng6-lib-app-e2e": {
6
7  },
8  "example-ng6-lib": {
9    "root": "projects/example-ng6-lib",
10    "sourceRoot": "projects/example-ng6-lib/src",
11    "projectType": "library",
12    "prefix": "enl",
13    "architect": {
14      "build": {
15        "builder": "@angular-devkit/build-ng-packagr:build",
16        "options": {
17          "tsConfig": "projects/example-ng6-lib/tsconfig.lib.json",
18          "project": "projects/example-ng6-lib/ng-package.json"
19        },
20        "configurations": {
21          "production": {
22            "project": "projects/example-ng6-lib/ng-package.prod.json"
23          }
24        }
25      },
26      "test": {
27        "builder": "@angular-devkit/build-angular:karma",
28        "options": {
29          "main": "projects/example-ng6-lib/src/test.ts",
30          "tsConfig": "projects/example-ng6-lib/tsconfig.spec.json",
31          "karmaConfig": "projects/example-ng6-lib/karma.conf.js"
32        }
33      },
34      "lint": {
35        "builder": "@angular-devkit/build-angular:tslint",
36        "options": {
37          "tsConfig": [
38            "projects/example-ng6-lib/tsconfig.lib.json",
39            "projects/example-ng6-lib/tsconfig.spec.json"
40          ],
41          "exclude": [
42            "**/node_modules/**"
43          ]
44        }
45      }
46    }
47  }
48},

در کد فوق برخی عناصر کلیدی که باید توجه داشت به صورت زیر هستند:

  • Root: این عنصر به پوشه root پروژه ما اشاره می‌کند.
  • sourceRoot: این عنصر به ریشه سورس کد واقعی کتابخانه اشاره دارد.
  • projectType: این عنصر تعیین می‌کند که این یک کتابخانه (library) است در حالی که دو پروژه دیگر از نوع application هستند.
  • Prefix: این همان پیشوند مشخص‌کننده ای است که در سلکتورهای کامپوننت خود استفاده می‌کنیم. به خاطر داشته باشید که ما هنگام تولید کتابخانه از enl استفاده کرده‌ایم. شما احتمالاً با پیشوند app آشنا هستید که به ما اعلام می‌کند کدام کامپوننت‌ها به اپلیکیشن اصلی ما تعلق دارند.
  • Architect: این شیء بخش‌هایی دارید که شیوه مدیریت build ،test و lint پروژه‌ها را از سوی Angular CLI تعیین می‌کنند. توجه کنید که در بخش build، سازنده از ng-packagr استفاده می‌کند.

وابستگی ng-packagr در package.json

زمانی که کتابخانه خود را می‌سازیم، Angular CLI متوجه می‌شود که به ng-packagr نیاز دارد. بنابراین آن را در devDependencies در فضای کاری ما در فایل package.json اضافه می‌کند:

"ng-packagr": "^3.0.0-rc.2",

مسیر build در tsconfig.json

زمانی که example-ng6-lib را تست می‌کنیم عموماً می‌خواهیم آن را مانند یک کتابخانه ایمپورت کنیم و نه این یک مجموعه فایل دیگر را به عنوان بخشی از اپلیکیشن خود داشته باشید. به طور معمول زمانی که از یک کتابخانه شخص ثالث استفاده می‌کنیم از دستور npm install برای توزیع آن در پوشه node-modules بهره می‌گیریم.

با این حال example-ng6-lib در پوشه node-modules قرار نمی‌گیرد، زیرا در یک زیرپوشه در پوشه dist فضای کاری ساخته شده است. Angular CLI این پوشه را به tsconfig.json اضافه می‌کند تا امکان ایمپورت آن به صورت یک کتابخانه وجود داشته باشد.

مسیری که اضافه می‌شود به صورت زیر است:

1"paths": {
2  "example-ng6-lib": [
3    "dist/example-ng6-lib"
4  ]
5}

سورس‌های example-ng6-lib

پوشه src کتابخانه ما در مسیر projects/example-ng6-lib قرار دارد. در این کتابخانه Angular CLI یک ماژول جدید با یک سرویس و یک کامپوننت می‌سازد. ضمناً اگر دقت کنیم چند فایل دیگر نیز به شرح زیر وجود دارند:

  • package.json: این همان فایل package.json است که به صورت خاص برای کتابخانه ما طراحی شده است. این فایلی است که به همراه کتابخانه ما به صورت یک پکیج npm منتشر می‌شود. زمانی که افراد کتابخانه ما را با استفاده از npm نصب کنند، این مورد به عنوان وابستگی آن ذکر خواهد شد.
  • public_api.ts: این فایل به عنوان فایل مدخل ما است. این فایل بخش‌هایی از کتابخانه که از دید بیرونی قابل مشاهده هستند را مشخص می‌سازد. اکنون شاید بپرسید آیا این وظیفه دستور export در ماژول‌ها نیست؟ آری چنین است اما قضیه کمی پیچیده‌تر از این است. ما در ادامه این موضوع را بیشتر بررسی می‌کنیم.
    نکته: در Angular CLI 7.3 این فایل به public-api.ts تغییر نام یافته است.
  • ng-package.json: این همان فایل پیکربندی برای ng-packagr است. در زمان قدیم ما باید با محتوای آن آشنا می‌بودیم. اینک به لطف Angular CLI کافی است بدانیم که به ng-packagr اعلام می‌کند کجا می‌تواند فالی مدخل را پیدا کند و کجا باید کتابخانه را بسازد.

build کردن کتابخانه

پیش از آن که بتوانیم از کتابخانه جدیداً ایجاد شده خود استفاده کنیم باید آن را build کنیم:

ng build example-ng6-lib

دستور فوق کتابخانه ما را در پوشه زیر می‌سازد:

example-ng6-lib-app\dist\example-ng6-lib

از نسخه 6.1 به بعد انگولار همواره یک build پروداکشن برای کتابخانه تولید می‌کند. اگر همچنان از انگولار 6.0 استفاده می‌کنید، باید در زمان ساخت کتابخانه از فلگ prod-- استفاده کنید.

استفاده از کتابخانه در اپلیکیشن

یکی از ایده‌های اصلی ساخت یک کتابخانه این است که به صورت معمول اپلیکیشنی داریم که به همراه کتابخانه ساخته می‌شود و با استفاده از آن می‌توانیم کتابخانه را تست کنیم. در مثال مورد بررسی، اپلیکیشن ساخته شده example-ng6-lib-app نام دارد که به همراه کتابخانه مورد استفاده قرار خواهیم داد.

در ادامه یک تست ساده با استفاده از کتابخانه در example-ng6-lib-app اجرا می‌کنیم. به این منظور ماژول example-ng6-lib را ایمپورت می‌کنیم. سپس کامپوننت پیش‌فرض را که Angular CLI برای ما در کتابخانه ساخته است نمایش می‌دهیم.

ایمپورت کردن ماژول example-ng6-lib

در ادامه AppModule را در مسیر src\app\app.module.ts اصلاح می‌کنیم. ExampleNg6LibModule را به آرایه impoerts اضافه کنید. IDE شما احتمالاً فکر می‌کند که این کار به تلاش برای ایمپورت کردن مستقیم فایل کمک می‌کند. اما شما نباید این کار را انجام دهید، بلکه باید ماژول را در اپلیکیشن با استفاده از نام کتابخانه به صورت زیر ایمپورت کنید:

import { ExampleNg6LibModule } from 'example-ng6-lib';

دلیل این که دستور فوق کار می‌کند این است که وقتی کتابخانه را با نامش ایمپورت می‌کنیم، Angular CLI ابتدا به مسیرهای tsconfig.json و سپس به مسیرهای node_modules نگاه می‌کند.

نکته: همواره در اپلیکیشن تست کتابخانه را با نام و نه با فایل‌های منفرد ایمپورت کنید.

فایل app.module.ts شما اینک باید چیزی مانند زیر باشد:

1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5import { ExampleNg6LibModule } from 'example-ng6-lib';
6
7@NgModule({
8  declarations: [
9    AppComponent
10  ],
11  imports: [
12    BrowserModule,
13    ExampleNg6LibModule
14  ],
15  providers: [],
16  bootstrap: [AppComponent]
17})
18export class AppModule { }

نمایش دادن کامپوننت example-ng6-lib

برای این که همه چیز ساده بماند کافی است کامپوننت تولیدشده پیش‌فرض را از کتابخانه خود به قالب AppComponent در مسیر اضافه کنیم. کافی است نیمه پایینی قالب AppComponent را با کد زیر عوض کنید:

<enl-example-ng6-lib></enl-example-ng6-lib>

اینک فایل src\app\app.component.html باید چیزی مانند زیر باشد:

1<div style="text-align:center">
2  <h1>
3    Welcome to {{ title }}!
4  </h1>
5  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
6</div>
7<h2>Example</h2>
8<enl-example-ng6-lib></enl-example-ng6-lib>

اجرای اپلیکیشن

همانند همیشه می‌توانیم اپلیکیشن خود را با اجرای دستور زیر اجرا کنیم:

ng serve

اینک اگر به مسیر زیر در مرورگر برویم:

http://localhost:4200/

با نتیجه تست کامپوننت خود از کتابخانه مواجه می‌شویم:

کتابخانه انگولار

بسط کتابخانه

اکنون که می‌دانیم چگونه کتابخانه‌هایی برای خودمان بسازیم و اپلیکیشن‌ها را با استفاده از کامپوننت‌هایی از این کتابخانه‌ها اجرا کنیم، نوبت آن رسیده است که کتابخانه خود را بسط دهیم و ببینیم در کامپوننت‌های دیگر چه کارهایی می‌توانیم انجام دهیم. مراحل کار به شرح زیر هستند:

  1. یک کامپوننت جدید در کتابخانه خود ایجاد کنید.
  2. این کامپوننت را به ماژول exports کتابخانه اضافه کنید.
  3. کامپوننت را به فایل مدخل اضافه کنید.
  4. کتابخانه را پس از ایجاد تغییرات فوق مجدداً build کنید.
  5. از کامپوننت جدید در اپلیکیشن خود استفاده کنید.

ایجاد یک کامپوننت کتابخانه

زمانی که کامپوننتی برای کتابخانه خود می‌سازیم از فلگ ‎–project برای اعلام این نکته به Angular CLI استفاده می‌کنیم که می‌خواهیم این کامپوننت را در پروژه کتابخانه خود ایجاد کنیم. در ادامه یک کامپوننت ساده به نام foo در کتابخانه خود ایجاد می‌کنیم:

ng generate component foo --project=example-ng6-lib

Angular CLI کارهایی که انجام داده است را دقیقاً به ما گزارش می‌دهد:

CREATE projects/example-ng6-lib/src/lib/foo/foo.component.html (22 bytes)
CREATE projects/example-ng6-lib/src/lib/foo/foo.component.spec.ts (607 bytes)
CREATE projects/example-ng6-lib/src/lib/foo/foo.component.ts (257 bytes)
CREATE projects/example-ng6-lib/src/lib/foo/foo.component.css (0 bytes)
UPDATE projects/example-ng6-lib/src/lib/example-ng6-lib.module.ts (347 bytes)

اکنون یک کامپوننت جدید در کتابخانه خود داریم و Angular CLI نیز آن را به آرایه declarations ماژول کتابخانه در فایل زیر اضافه کرده است:

projects\example-ng6-lib\src\lib\example-ng6-lib.module.ts

اکسپورت کردن کامپوننت از ماژول کتابخانه

ما باید کامپوننت Foo را به اکسپورت‌های ماژول کتابخانه اضافه کنیم. اگر این کار را نکنیم با خطای تحلیل قالب مواجه می‌شویم که در زمان تلاش برای گنجاندن کامپوننت در اپلیکیشن خطایی به صورت زیر اعلام می‌کند:

"enl-foo" is not a known element

بنابراین در فایل example-ng6-lib.module.ts، اقدام به افزودن FooComponent به آرایه exports می‌کنیم. اینک ExampleNg6LibModule باید چیزی مانند زیر باشد:

1import { NgModule } from '@angular/core';
2import { ExampleNg6LibComponent } from './example-ng6-lib.component';
3import { FooComponent } from './foo/foo.component';
4
5@NgModule({
6  imports: [
7  ],
8  declarations: [
9    ExampleNg6LibComponent,
10    FooComponent
11  ],
12  exports: [
13    ExampleNg6LibComponent,
14    FooComponent
15  ]
16})
17export class ExampleNg6LibModule { }

افزودن کامپوننت به فایل مدخل

همچنان که پیش‌تر اشاره کردیم، پروژه کتابخانه ما یک «فایل مدخل» (entry file) دارد که API عمومی آن را به صورت زیر تعریف می‌کند:

projects\example-ng6-lib\src\public_api.ts

ما باید خط زیر را به فایل مدخل اضافه کنیم تا به ng-packagr اعلام کنیم که این کلاس کامپوننت باید برای کاربران کتابخانه افشا شود:

export * from './lib/foo/foo.component';

شاید فکر کنید که این کار زائد است، چون ما قبلاً کامپوننت خود را در export های ماژول قرار داده‌ایم. این گفته صحیح است که عنصر <enl-foo></enl-foo> در قالب اپلیکیشن ما حتی بدون افزودن به فایل مدخل قابل استفاده است. اما کلاس FooComponent خودش نیز نمی‌تواند اکسپورت شود.

اگر تست زیر را اجرا کنید موضوع را بهتر متوجه می‌شوید. یک ارجاع به کلاس FooComponent به نام fooComponent: FooComponent; اضافه کنید. در فایل app.component.ts فایل foo.component را به فایل مدخل اضافه نکنید. سپس کتابخانه را مجدداً build کنید. زمانی که دستور ng serve را وارد کنید به سرعت با خطای زیر مواجه می‌شوید:

Module has no exported member 'FooComponent'

بنابراین قاعده کار چنین است که در مورد کامپوننت‌ها باید از export برای پدیدار ساختن عنصر استفاده کرد و همچنین آن را به فایل مدخل اضافه کرد تا کلاس نمایانی ایجاد شود.

پس از افزودن خط کد لازم برای کامپوننت جدید، فایل مدخل public_api.ts باید مانند زیر باشد:

1/*
2 * Public API Surface of example-ng6-lib
3 */
4
5export * from './lib/example-ng6-lib.service';
6export * from './lib/example-ng6-lib.component';
7export * from './lib/example-ng6-lib.module';
8export * from './lib/foo/foo.component';

build مجدد کتابخانه

پس از این که تغییرات لازم داده شد، باید کتابخانه خود را با دستور زیر مجدداً build کنیم:

ng build example-ng6-lib

ما این کار را به صورت دستی اجرا می‌کنیم. با این حال Angular CLI نسخه 6.2 یک کارکرد build افزایشی ارائه کرده است. هر بار که فایلی تغییر می‌یابد Angular CLI یک build جزئی اجرا می‌کند که فایل‌های اضافه شده را ملحق می‌کند. برای استفاده از این کارکرد نظارتی جدید باید از دستور زیر استفاده کنید:

ng build example-ng6-lib –watch

استفاده از کامپوننت کتابخانه جدید

در نهایت عنصر <enl-foo></enl-foo> را به عنوان خط آخر فایل app.component.html اضافه کنید. این فایل باید اینک چیزی مانند زیر باشد:

1<div style="text-align:center">
2  <h1>
3    Welcome to {{ title }}!
4  </h1>
5  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
6</div>
7<h2>Example</h2>
8<enl-example-ng6-lib></enl-example-ng6-lib>
9<enl-foo></enl-foo>

دستور ng serve را اجرا کنید و به آدرس زیر در مرورگر بروید:

http://localhost:4200/
کتابخانه انگولار

چنان که می‌بینید کامپوننت جدید کتابخانه که خودمان ساحتیم نیز کار می‌کند.

بدین ترتیب به پایان بخش اول این راهنمای ساخت کتابخانه‌های انگولار می‌رسیم. در بخش بعدی با روش ساخت، پکیج کردن و استفاده عملی از کتابخانه‌ها در اپلیکیشن‌های دیگر آشنا خواهیم شد. برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
blog.angularindepth
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *