معرفی پشتیبانی از مرورگر

پشتیبانی از مرورگر

Angular از اغلب مرورگرهای امروزی پشتیبانی می‌کند. این مرورگرها را می‌توانید به صورت دقیق در زیر مشاهده کنید.

فرآیند یکپارچگی پیوسته‌ی Angular، واحدهای آزمایشی فریمورک تمامی این مرورگرها را به ازای هر pull request و با استفاده از SauceLabs و Browserstack اجرا می‌کند.

پلی فیل‌ها (Polyfills)

Angular بر اساس آخرین استانداردهای پلتفرم وب ساخته شده است. هدف قرار دادن چنین گستره‌ی عظیمی از مرورگرها کار سختی است، زیرا این مرورگرها از همه‌ی ویژگی‌های مرورگرهای امروزی پشتیبانی نمی‌کنند.
برای برطرف کردن این پیچیدگی می‌توان اسکریپت‌های پلی فیل (پلی فیل‌ها) را برای مرورگرهایی که شما حتماً باید از آن‌ها پشتیبانی کنید، بارگیری کرد. جدولی که در زیر آمده است اکثر پلی فیل‌هایی که ممکن است نیاز داشته باشید را نشان می‌دهد.
پلی فیل‌هایی که پیشنهاد شده‌اند، پلی فیل‌هایی هستند که برنامه‌های کامل Angular را اجرا می‌کنند. ممکن است برای پشتیبانی از ویژگی‌هایی که در این لیست ذکر نشده‌اند، نیاز به پلی فیل‌های بیشتری داشته باشید. توجه داشته باشید که پلی فیل‌ها نمی‌توانند به یک باره مرورگرهای قدیمی و کند را به مرورگرهای سریع و امروزی تبدیل کنند.

فعال سازی پلی فیل‌ها

کاربران Angular CLI می‌توانند از طریق فایل src/polyfills.ts که CLI آن را به همراه پروژه‌تان ایجاد کرده است، پلی فیل‌ها را فعال کنند.
این فایل، پلی فیل‌های اجباری و بسیاری از پلی فیل‌های اختیاری را به عنوان دستورات جاوا اسکریپت import در خود جای داده است.
زمانی که شما پروژه‌ی خود را ایجاد کنید و دستورات متناظر import آن‌ها آماده به کار شوند، بسته‌های نرم افزاری npm برای پلی فیل‌های اجباری (مانند zone.js) به صورت خودکار برایتان نصب خواهند شد. به احتمال زیاد نیازی به دستکاری این بسته‌های نرم افزاری نخواهد بود.
اما اگر به پلی فیلی اختیاری نیاز دارید، باید بسته‌ی نرم افزاری npm آن را نصب کنید. برای مثال اگر به پلی فیل انیمیشن‌های اینترنتی نیاز داشته باشید، می‌توانید آن را به همراه npm و با استفاده از دستور زیر (و یا با استفاده از yarn ) نصب کنید.

# note that the web-animations-js polyfill is only here as an example
# it isn't a strict requirement of Angular anymore (more below)
npm install --save web-animations-js

سپس فایل polyfills.ts را باز کنید و مانند مثال زیر دستور متناظر import را از حالت کامنت خارج کنید:

src/polyfills.ts
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js';// Run `npm install --save web-animations-js`.

اگر نمی‌توانید پلی فیل مورد نظرتان را در polyfills.ts پیدا کنید، آن را با استفاده از این الگو اضافه کنید:

1. بسته‌ی نرم افزاری npm را نصب کنید.
2. این فایل را در polyfills.ts ایمپورت کنید.

افرادی که جزء کاربران CLI نیستند می‌توانند از دستورالعمل‌های زیر پیروی کنند.

پلی فیل‌های اجباری

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

ویژگی‌های اختیاری مرورگر برای پلی فیل

برخی از ویژگی‌های Angular ممکن است به پلی فیل‌های بیشتری نیاز داشته باشند.
مثلاً کتابخانه‌ی انیمیشن‌ها به API استاندارد انیمیشن تحت وب وابسته است. این API امروزه تنها در کروم و فایرفاکس در دسترس هستند. (توجه داشته باشید که تنها اگر از AnimationBuilder استفاده شود، وابستگی web-animations-js الزامی می‌شود.)
در جدول زیر ویژگی‌هایی که به پلی فیل‌های بیشتری نیاز دارند، نشان داده شده‌اند:

پلی فیل‌های پیشنهادی

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

* این ارقام برای کدهای gzip شده و فشرده شده لحاظ شده‌اند و توسط کامپایلر closure محاسبه شده‌اند.

پلی فیل‌های مناسب برای افرادی که کاربر CLI نیستند

اگر از CLI استفاده نمی‌کنید، در این صورت باید اسکریپت‌های پلی فیل خود را داخل صفحه‌ی وب میزبان (index.html) اضافه کنید. این کار را می‌توانید مانند زیر انجام دهید:

src/index.html
< !-- pre-zone polyfills -- >
< script src="node_modules/core-js/client/shim.min.js" >< /script >
< script src="node_modules/web-animations-js/web-animations.min.js" >< /script >
< script >
/**
* you can configure some zone flags which can disable zone interception for some
* asynchronous activities to improve startup performance - use these options only
* if you know what you are doing as it could result in hard to trace down bugs..
*/
// __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// __Zone_disable_on_property = true; // disable patch onProperty such as onclick
// __zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames

/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// __Zone_enable_cross_context_check = true;
< /script >
< !-- zone.js required by Angular -- >
< script src="node_modules/zone.js/dist/zone.js" >< /script >
< -- application polyfills --! >