راهنمای ارتقا به انگولار ۹ — به زبان ساده

اینک زمان ارتقا به انگولار 0 به عنوان نسخه جدید این فریمورک فرانت‌اند فرا رسیده است. جدیدترین نسخه انگولار شامل قابلیت‌هایی از قبیل بهبود عملکرد، اندازه باندل کوچک‌تر و بسیاری موارد دیگر است. علاوه بر این اینک رندر کننده پیش‌فرض Ivy است. برای پیگیری این راهنمای کوتاه نسخه شما در حال حاضر باید 8.x.x باشد. ما از تگ 9.0.0 برای ارتقای وابستگی‌ها استفاده می‌کنیم.

به‌روزرسانی خودکار به انگولار ۹

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

ng update @angular/cli @angular/core

به‌روزرسانی دستی به انگولار ۹

برای به‌روزرسانی دستی به صورت زیر عمل کنید.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

برای به‌روزرسانی Angular CLI (سراسری) از دستور زیر استفاده کنید:

npm install @angular/cli@9.0.0 –g

برای به‌روزرسانی وابستگی‌های انگولار (لوکال)‌ از دستور زیر استفاده کنید:

npm install @angular/animations@9.0.0 @angular/common@9.0.0 @angular/compiler@9.0.0 @angular/core@9.0.0 @angular/forms@9.0.0 @angular/platform-browser@9.0.0 @angular/platform-browser-dynamic@9.0.0 @angular/platform-server@9.0.0 @angular/router@9.0.0

اگر از متریال دیزاین استفاده می‌کنید می‌توانید از دستور زیر استفاده کنید:

npm install @angular/cdk@9.0.0 @angular/material@9.0.0

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

npm install @angular-devkit/build-angular@0.900.1 @angular/compiler-cli@9.0.0 @angular/cli@9.0.0 @angular/language-service@9.0.0 --save-dev

برای به‌روزرسانی همه وابستگی‌های مرتبط دیگر در محیط لوکال نیز از دستور زیر استفاده می‌کنیم:

npm install core-js@latest zone.js@latest rxjs@latest

وابستگی‌های مرتبط با dev به صورت لوکال را نیز با دستور زیر به‌روزرسانی کنید:

npm install @types/jasmine@latest @types/node@latest codelyzer@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-jasmine@latest karma-jasmine-html-reporter@latest jasmine-core@latest jasmine-spec-reporter@latest protractor@latest tslint@latest webpack@latest rxjs-tslint@latest --save-dev

TypeScript + tslib (لوکال)

شما باید روی سیستم خود تایپ اسکریپت 3.6 و بالاتر را نصب داشته باشید. نسخه‌های 3.4 و 3.5 دیگر پشتیبانی نمی‌شوند. تایپ اسکریپت و tslib به عنوان یک «وابستگی همتا» (peer dependencies) با افزودن کد زیر به انتهای فایل package.json اضافه می‌شوند:

"peerDependencies": {
  "typescript": "3.6.4",
  "tslib": "1.10.0"
}

در صورتی که در این مرحله با خطایی مواجه شدید، باید package-lock.json و node_modules را حذف کرده و دستور npm install را اجرا کنید.

نکات مهم در ارتقا به انگولار ۹

در این بخش برخی نکات مهم در زمان ارتقا به انگولار نسخه 9 را با هم مرور می‌کنیم.

فیلم آموزش فریم ورک انگولار جی اس – ساخت اپلیکیشن با AngularJS در فرادرس

کلیک کنید

رندرکننده Ivy

برخی مشکلات ممکن است در مورد Ivy رخ بدهند. در خصوص تغییراتی که ممکن است در پروژه شما حادث شوند، در این صفحه (+) و ‌این صفحه (+) توضیحاتی ارائه شده است.

بارگذاری کند

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

1// Before
2loadChildren: './path/lazy.module#LazyModule'
3// Now
4loadChildren: () => import('./path/lazy.module').then(m => m.LazyModule)

Platform webworker

توجه داشته باشید که پکیج angular/platform-webworker@ نیز منسوخ شده است.

نکات مفید در هنگام ارتقا به انگولار ۹

در این بخش برخی نکات مفید که در زمان ارتقا به نسخه 9 انگولار باید بدانید ارائه شده‌اند.

API-های منسوخ ‌شده

با بررسی این فهرست (+) متوجه می‌شوید که کدام API-ها در نسخه جدید ناموجود و یا منسوخ شده‌اند.

کامپایلر سازگاری انگولار (ngcc)

با افزودن اسکریپت postinstall به فایل package.json می‌توانید مطمئن شوید که node_modules با رندرکننده Ivy سازگار هستند. پس از دستور npm install از اسکریپت زیر استفاده کنید:

"scripts": {
   "postinstall": "ngcc"
}

رندرکننده Ivy

اگر می‌خواهید رندرکننده جدید Ivy را غیر فعال کنید، باید کد زیر را به فایل tsconfig.json اضافه کنید:

"angularCompilerOptions": {
   "enableIvy": false
}

متریال دیزاین

اینک به جای ایمپورت کردن از angular/material@ باید از کامپوننت خاص عمقی مانند angular/material/button@ ایمپورت کنید.

لاگ تغییرات انگولار

برای مشاهده همه تغییرها و منسوخی‌ها به این صفحه (+) مراجعه کنید.

به این ترتیب به پایان این راهنما می‌رسیم.

فیلم مجموعه آموزش جاوا اسکریپت JavaScript – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

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

• مجموعه آموزش‌های جاوا اسکرپیت
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش انگولار (Angular): ساخت یک اپلیکیشن در ۲۰ دقیقه
• Lazy Loading در انگولار — به زبان ساده
• ۱۰ قابلیت مفید انگولار که احتمالاً از وجودشان اطلاع ندارید — راهنمای کاربردی

^^

==