הודעה זו פורסמה במקור ב האתר שלי: https://dsebastien.net
במאמר זה אעבור על (כמעט) כל מה שציין במהדורה חדשה לגמרי. אדגיש גם מה השתנה סביב Angular, בדיוק כמו שעשיתי עם המאמרים הקודמים שלי בנושא זווית 11 ו זווית 10.
אם אתה רק מחפש את מבט ממעוף הציפור, ואז לבדוק את הודעת שחרור רשמית. כאן, אעמיק בהערות השחרור.
הצטרף לליגת אייבי ...
צוות Angular עבד על כך קיסוס (צינור האוסף והעיבוד החדש) מאז 2018. הוא שוחרר לבסוף עם Angular 8. מאז Angular 9, אייבי הייתה ברירת המחדל לפרויקטים חדשים, והמערכת האקולוגית נודדת אליה לאט. עם זווית 12, מנוע View View הישן הוצא משימוש רשמי. זה יוסר במהדורה מרכזית עתידית. כמו כן, לא ניתן ליצור יישומים חדשים באמצעות View Engine. לבסוף, אייבי היא כעת ברירת המחדל לפרויקטים חדשים בספריות.
בשלב זה, מחברי הספריות עדיין יכולים להסתמך על View Engine בזכות ngcc
(מהדר התאימות של Angular), אבל זה באמת הזמן שהם יעריכו האם הם יכולים להעביר את הספריות שלהם לאייבי או לא. לפני כמה שבועות פרסם מינקו גצ'ב מאמר להסביר זאת בפירוט. כמו כן, בדוק את הקשור RFC.
למקרה שלא ידעת, ngcc
הוא התהליך הקטן שמתנהל לאחר יצירת פרויקט Angular או התקנת תלות. כשאתה רואה הודעות כמו Compiling ... : es2015 as esm2015
, זה ngcc
עושה את עבודתו. מה ngcc
עושה הוא לקבץ ספריות המסתמכות על View Engine כדי שאייבי יוכל לצרוך אותן.
כמוני, בטח שמת לב לזה ngcc
לוקח הרבה זמן לביצוע, ויש לו השפעה שלילית מאוד על חווית המפתחים. זו הסיבה שחשוב מאוד שהמערכת האקולוגית הזוויתית תעבור לאייבי בהקדם האפשרי. שנית, עד שרוב המערכת האקולוגית תמשיך הלאה, צוות Angular יצטרך להשאיר את View Engine בסביבה, וזה בעייתי ממספר סיבות. אחרון חביב, ספריות המסתמכות על View Engine אינן יכולות להיות תלויות בסביבות הקיסוס.
מחברי הספרייה כנראה לא יכולים לעבור לאייבי מהר מדי, אך ברור שהם צריכים לדחוף משתמשים מסרבים לשדרג. בכל מקרה, הדרך קדימה היא להעביר את כל הדברים לאייבי בהקדם
יש מאמר מצוין על אייבי שם.
מפרגן ביי
באפריל הכריז צוות Angular על תוכניות לסיים את תמיכתו של מַד זָוִית בסוף 2022.
החל מ- Angular 12, מד זווית לא ייכלל כברירת מחדל בפרויקטים חדשים. במקום זאת, CLI Angular יספק אפשרויות להשתמש בפתרונות אחרים כמו ברוש, WebdriverIO, או TestCafe. פירוש הדבר ש- ng e2e
יש להמשיך ולתמוך בפקודה בעתיד.
כפי שהוסבר ב ההודעה, עוד בשנת 2013 כאשר נוצר מד זווית, מנהל אינטרנט לא היה סטנדרט, ומבחני קצה לקצה (e2e) היו קשים לכתוב, וסיוט לתחזוקה. מד זווית הביא פיתרון חדשני על ידי עטיפה סלניום-דרייבר, וסיפק דרך לשלוט בזרימת הביצוע.
כמובן, הרבה דברים התפתחו מאז. עכשיו יש לנו את WebDriver
ממשק API async
ו await
(אפילו ברמה העליונה await
, וואה). כמו כן, המערכת האקולוגית התפתחה גם היא. פתרונות כמו ברוש, מחזאי, מפעיל בובות צברו פופולריות רבה (ראויה). כלים כמו Cypress למשל מספקים חוויית מפתח טובה בהרבה מ- Protractor, ממנפים את הסטנדרטים המודרניים ואפילו תומכים בבדיקות חוצה דפדפנים (בין יכולות חזקות אחרות). יתרון נוסף של כלי הבדיקה הנוכחיים דה-פקטו e2e הוא שהם מסגרת-אגנוסטיים, וזה בעל ערך רב.
סיפור ארוך קצר, שמירה על מד זווית לא הגיונית במיוחד עבור צוות Angular. מד זווית מתפתח כעת ידרוש יותר מדי מאמץ ויעורר המון שינויים שבורים. אתה יכול למצוא פרטים נוספים ב- RFC, זה קריאה מעניינת.
ציר הזמן חשוב לצוותים / פרויקטים שהשקיעו זמן רב ואנרגיה בכתיבת מבחני e2e עם Protractor. צוות Angular עדיין עסוק בהערכת המשוב שנאסף באמצעות ה- RFC, כך שכנראה נדע יותר בהמשך השנה.
בכל מקרה; נסה לברוש אם עוד לא עשית זאת, לא תתאכזב! אגב, אני ממשיך להמליץ לכולם להתחיל להשתמש Nrwl NX, פיתרון נפלא הכולל תמיכה ב- Angular, React, Next.js, Cypress, ועוד הרבה יותר
התאחדות מטושטשת
זווית 12 כוללת תמיכה בשימוש ב- מפעיל איחוד מבטל בתבניות זוויתיות. וזה מדהים! מפעיל זה נתמך ב- TypeScript מאז גרסה 3.7.
אם לא שמעת על המפעיל הזה, תן לי לתת לך הסבר מהיר. הרעיון הוא להיות מסוגל להגדיר ערך נפילה במקרה כזה null
or undefined
. להלן דוגמא:
If foo
is null
or undefined
, לאחר מכן x
יוגדר ל true
(כלומר, ערך החזרה), ואנחנו יכולים להגדיר אותו לכל דבר שנרצה.
בלי זה מדהים ??
נצטרך לכתוב זאת במקום זאת:
let x = foo !== null && foo !== undefined ? foo : true;
כעת, גם כאשר Angular תומכת בכך, נוכל סוף סוף לכתוב ביטויים כגון:
{{ age ?? calculateAge() }}
במקום האלטרנטיבה הישנה והמילולית יותר. נקי!
תוכל ללמוד עוד על שינוי זה כאן.
תוכל למצוא מידע נוסף על התאחדות בטלים ב- מדריך TypeScript כמו גם הלאה DND.
תמיכה ב- TypeScript 4.2
Angular 12 מציג תמיכה ב TypeScript 4.2, כלומר כעת אנו יכולים להשתמש ב- טון של תכונות שפה נפלאות חדשות. כמו כן, התמיכה ב- TypeScript 4.0 ו- 4.1 בוטלה.
הנה סקירה מהירה של מה TS 4.2 כולל:
שימור כינוי מסוג חכם: הסוגים הצפויים מוצגים על ידי עורכי הקוד במקום סוגי הגלם כפי שהתרחש קודם. תוכלו ללמוד עוד על כך כאן.
אלמנטים מובילים / מנוחה אמצעית בסוגי Tuple: כעת אנו יכולים לכלול אלמנטים מנוחה בכל מקום בתוך כפולה (עם כמה אזהרות). זה די מגניב עבור אלה מאיתנו שמסתמכים על צמרות מעת לעת. למידע נוסף על כך כאן.
הבנת מבנה הפרויקט שלך: TS 4.2 כולל דגל חדש נקרא --explainFiles
, שמורה ל- TypeScript להפיק מידע על הסיבה שהוגש נכלל בתוכנית שלך. זה מאוד שימושי לפתרון בעיות.
שיפורים לבדיקות פונקציות שלא נקראו: TypeScript יכול כעת לזהות מקרים נוספים שבהם לא קוראים לפונקציות. למשל בעת כתיבה foo
במקום foo()
. ניתן למצוא פרטים נוספים ודוגמאות כאן.
ניתן לסמן במפורש משתנים שהושמדו כלא בשימוש: let [_first, second] = getValues();
, שזה מדהים; אין שגיאות נוספות מתי noUnusedLocals
מופעלת!
יש הרבה יותר, כמו בדיקות מחמירות יותר עבור in
מפעיל, וכמה שינויים שבורים שעשויים להשפיע עליך. אז הקפד לבדוק את מכתבי שחרור.
תמיכה ב- Webpack 5
זווית 11 הביאה אותנו תמיכה ניסיונית ב- Webpack 5. עם Angular 12, התמיכה ב- Webpack 5 מוכנה כעת לייצור. w00t!
אם לא הסתכלת חבילת אינטרנט 5אתה הולך להיות מופתע. Webpack 5 שוחרר כבר באוקטובר 2020, כך שהוא יציב למדי עד עכשיו. Webpack נמצא כרגע ב גרסה 5.37 (שוחרר לפני כמה ימים).
הנה הסבר קצר על מה השתנה עם Webpack 5 ומדוע אני כל כך שמח על כך 🤩
ראשית, כידוע, Webpack הוא ה- מפתח פיסת פאזל CLI Angular, והיא ממלאת תפקיד גדול בגודל הצרור, בביצועי בנייה וכו '.
שנית, Webpack 5 הוא מהדורה מרכזית מסיבה. הוא כולל מספר שינויים שבורים, מה שמסביר מדוע לקח זמן עד שדרוג Angular ו- gazillion במערכת האקולוגית.
בהערות השחרור, צוות Webpack ציין כי Webpack 5 מתמקד ב:
- שיפור ביצועי הבנייה עם להתמיד מטמון
- שיפור המטמון לטווח ארוך עם אלגוריתמים וברירות מחדל טובים יותר
- שיפור גודל הצרור עם רעידות עצים ויצירת קוד טובים יותר
- שיפור התאימות לפלטפורמת האינטרנט
- ניקוי מבנים פנימיים
- מציגים שינויים שוברים (haha) עכשיו, ומאפשרים להם להישאר ב- v5 כמה שיותר זמן
התכונה הכי מגניבה של Webpack 5 היא שלה תמיכה בפדרציה למודולים, המספק את היסודות הדרושים כדי להקל על יצירת מיקרו-קדמי. זה קצת מחוץ לתחום של מאמר זה, אך בקצרה, הפדרציה של המודולים מאפשרת לבנות שונות להתנהג כמו גרף מודולים מחובר ענק ומאפשרת לנו לייבא ולהשתמש במודולים מבניינים מרוחקים. לבדוק התיעוד הרשמי לדעת יותר.
בין השינויים הגדולים, Webpack 5 הפיל את כל מה שהוצא משימוש בעבר (למשל, NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), ממש כמו IgnorePlugin
ו BannerPlugin
.
כמו כן, פילוס המילוי של Node.js שהוזרק בעבר אוטומטית הוסר; וזה אחד השינויים הגדולים במהדורה ההיא. מילוי המילוי הזה איפשר בתחילה ל- Webpack לאפשר לנו להשתמש במודולים המיוצרים עבור Node.js בדפדפן. זה היה מגניב, אבל היה לו חסרון משמעותי: חבילות גדולות יותר. בנוסף, מילוי הפוליס הזה היה פחות ופחות שימושי, שכן היו חלופות תואמות דפדפנים של ספריות או הפצות ספציפיות עם תמיכה בדפדפן. נכון ל- Webpack 5, מכיוון שמילוי המילוי הזה כבר לא יתווסף אוטומטית, אנו עשויים להיתקל בכמה הפתעות. למשל במקרים שבהם אנו משתמשים במודולים המיוצרים עבור Node.js בדפדפן מבלי שנבין שזה עבד בעבר בזכות Webpack. תוכלו ללמוד עוד על כך כאן.
Webpack 5 הציגה תמיכה טובה יותר במטמון ארוך טווח. במצב ייצור, הוא כולל כעת אלגוריתמים חדשים כברירת מחדל:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
כפי שהערך מציין, אלגוריתמים אלה מקצים מזהים דטרמיניסטיים לגושים ומודולים, ושמות דטרמיניסטיים ליצוא.
Webpack 5 מסוגל לבצע טלטולי עצים מקוננים, על ידי מעקב אחר גישה למאפיינים מקוננים של יצוא (ברוכים הבאים למטריקס), מה שאמור לשפר עוד יותר את טלטול העצים. כמו כן, זה יכול עכשיו לנתח תלות בין הייצוא והיבוא של מודול. ישנם גם שיפורים ב עץ של CommonJS רועד. ויש המון אופטימיזציות נוספות.
Webpack 5 כולל גם מספר שינויים לשיפור חווית המפתח. לדוגמא, יש א אלגוריתם מזהה שמות חדש שמופעל כברירת מחדל במצב הפיתוח. האלגוריתם החדש הזה נותן שמות הניתנים לקריאה לגושים. ה target
הרכוש היה גם הוא עצום משופר.
למען האמת, אין לי מספיק מקום לכסות את כל מה שחדש עם Webpack 5, שם's רק דרך גַם הרבה. אז אני אפסיק כאן
אם אתה משתמש רק ב- Webpack בעקיפין דרך ה- CLI Angular, אז רוב זה אמור להיות "שקוף" עבורך. אבל אם אתה משתמש ב- בניית Webpack מותאמת אישית בפרויקט שלך, אתה כנראה צריך להסתכל על מדריך הגירה.
לבסוף, אם אתה סקרן לגבי העתיד לבוא עם Webpack, בדוק את ה- מפת דרכים לשנת 2021 וכמובן ה הערות המהדורה האחרונות.
התמיכה ב- IE11 הוצאה משימוש
עד כמה שזה נשמע עצוב (על מי אני צוחק? 😂), Angular 12 מקפח את התמיכה ב- IE11. Internet Explorer מת עבור רובנו, אך למרבה הצער, ארגונים רבים עדיין משתמשים בו בייצור. תמיכת IE 11 תוסר לפיכך על ידי Angular 13, מה שאומר שארגונים אלה באמת צריכים להתחיל להתרחק מ- IE (וזה טוב בכל מקרה). אין יותר תירוצים!
ברגע שהתמיכה ב- IE נעלמה, Angular תהיה קטנה יותר, מהירה יותר ובכך טובה יותר עבור כולנו. כמו כן, ברגע שהנטל לשמור על תאימות לאחור עם דפדפנים מדור קודם ייעלם (IE11 הוא האחרון מאלה!), אז Angular תוכל למנף ממשקי API מודרניים (למשל, משתני CSS, צומת צומת, רשת CSS, פרוקסי, אנימציות אינטרנט, ו יותר).
אני באמת לא יכול לחכות שתמיכת ה- IE תיעלם!
מחמיר כברירת מחדל
כן כן כן כן. נכון לזווית 12, ה- מצב קפדני של זוויתית מופעלת כברירת מחדל ב- CLI. וזה מדהים.
כידוע, אני מעריץ ענק של המצב הקפדני של TypeScript, אך גם של המצב הקפדני של Angular. אם אתה רוצה לדעת יותר, בדוק את זה המאמר שכתבתי בשנה שעברה ושל מינקו גצ'ב מאמר המסביר את השינוי.
ייצור ייצור כברירת מחדל
עד עכשיו, מריץ את ng build
הפקודה יצרה בניית פיתוח. נכון לזווית 12, ng build
ברירת המחדל תהיה כעת לבניית ייצור.
אני מקווה שזה יעזור לצוותים מסוימים להימנע מלעשות את הטעות של בנייה ופריסה של בניית פיתוח לסביבות ייצור. אם כי, אני חושש שלצוותים שעושים את הטעות הזו עדיין יהיו בעיות אחרות להתמודד איתן
תמיכה בסאס לסגנונות מוטבעים
Angular תומך ב- Sass זמן רב מאוד, אך עד כה נוכל להשתמש ב- Sass רק בגליונות סגנונות חיצוניים. עם Angular 12, כעת ניתן להשתמש ב- Sass יחד עם סגנונות רכיבים מוטבעים (כלומר בתוך ה- styles
תכונה).
צריך לאפשר זאת על ידי הגדרת החדש inlineStyleLanguage
רכוש post true
in angular.json
.
תמיכה ברוח הזנב
רוח גבית נתמך כעת באופן רשמי על ידי Angular. למעשה, התמיכה הוצגה ב- CLI Angular ב- v11.2.
רוח זנב היא עסוק להשתלט על העולם, במיוחד עכשיו שיש לו מהדר rad JITוזה נפלא שיש תמיכה מובנית בזה ב- Angular.
בעבר נדרשת הוספת זנב רוח לפרויקט Angular התאמה אישית של בניית ה- Webpack. לא עוד! כעת, הוספת Tailwind היא פשוטה כמו התקנת החבילה, יצירת ה- tailwind.config.js
שימוש בקובץ npx tailwindcss init
, והקפד להפעיל מצב JIT של Tailwind.
שיפורי HTTP
Angular 12 מציגה מספר שיפורים סביב תמיכת ה- HTTP שלה.
מטא נתונים לבקשות ומיירטים
ראשית, HttpClient
יכול לשמש כעת לאחסון ואחזור מטא נתונים מותאמים אישית לבקשות. זה שימושי במיוחד עבור מיירטים HTTP. ניתן להשתמש ביכולת זו באמצעות החדש HttpContext
.
בעבר, היה מסובך לספק הקשר למיירטים, אך כעת זה יהיה הרבה יותר פשוט. כעת, שיטות ה- HTTP השונות המסופקות על ידי HttpClient
לכלול חדש context: HttpContext
אפשרות, אותה נוכל להעביר במפה.
נתנאל בזל כתב מאמר על כך, כך בדוק אם אתה רוצה לדעת יותר.
appendAll ב- HttpParams
השמיים HttpParams
בכיתה יש עכשיו חדש appendAll
שיטה, שניתן להשתמש בה כדי להוסיף בקלות קבוצה של פרמטרים בבת אחת:
appendAll(params: {[param: string]: string|string[]}): HttpParams
כעת ניתן להעביר פאראמים כמספרים וכבוליאנים
בעבר, לא ניתן היה להשתמש במספרים ובוליאנים באופן ישיר כפרמטרים של HTTP. היינו צריכים להפוך אותם למיתרים. לא עוד!
HTTPStatusCode
Angular הציגה רשימה משלה של שמות הניתנים לקריאה אנושית עבור קודי מצב HTTP, בצורה של קונסטנט.
בעבר היינו צריכים להציג פיתרון משלנו אם היינו רוצים לקבל שמות הניתנים לקריאה אנושית. הודות לתכונה חדשה זו, אנו יכולים כעת להשתמש במקום זאת HttpStatusCode
.
לדוגמה:
if (response.status === HttpStatusCode.Ok) { ...
}
למי שמשתמש ב- TypeScript גם בממשק האחורי וגם בממשק הקצה, זה לא שימושי במיוחד (מכיוון שכנראה לכולנו כבר מופשטת משלנו), אבל אם הפרויקט שלך משתמש רק ב- TypeScript / Angular בקו הקדמי, אז זה שיפור נחמד.
XhrFactory
השמיים XhrFactory
הכיתה הועברה לחבילה אחרת. כעת הוא נחשף על ידי angular/common
במקום angular/common/http
.
שים לב שהשדרוג נכלל הגירה, כך שאפילו לא תבחין אם תרוץ ng update
שינויים בנתב
הנתב הזוויתי השתנה מעט בזווית 12.
ראשית, routerLinkActiveOptions
ההוראה שופרה. כעת ניתן לציין אם אנו זקוקים להתאמה מדויקת או לא לחלקים שונים של כתובת ה- URL על מנת להוסיף מחלקה CSS לקישור.
בעבר, יכולנו לדרוש התאמה מדויקת (או לא) לכל כתובת האתר:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
כעת, במקום זאת אנו יכולים לספק כללי התאמה מדויקים לנתיבים, פרמטרי שאילתה, פרמטרי מטריצה ושברי.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
הערכים הנתמכים הם exact
, ignored
ו subset
, שניתן להשתמש בהם ל queryParams
ו matrixParams
. עבור מסלולים, אתה יכול לעבור פנימה exact
or subset
, ו exact
or ignored
עבור fragment
.
שים לב כי isActive
שיטת הנתב מקבלת גם אפשרויות חדשות אלה.
שבר הוא בטל
עד עכשיו, ActivatedRouteSnapshot.fragment
לא היה בטל. זה השתנה עם זווית 12. אבל אל תדאג יותר מדי; ng update
יש לך מכוסה.
טפסים
שליטה רבה יותר באירועים הנפלטים
השמיים emitEvent
אופציה נוספה לשיטות שונות של FormGroup
ו FormArray
. הודות לשינוי זה, כעת ניתן יהיה לשלוט אם יש להוציא אירועים או לא במקרים נוספים.
למשל, בעבר כאשר פקד הוסר באמצעות ה- removeControl
שיטה של FormGroup
, אז אירוע תמיד נפלט. עם שינוי זה, כעת נוכל להימנע מבעיות מסוג זה.
השמיים emitEvent
האפשרות נוספה לשיטות הבאות של FormGroup
:
addControl
removeControl
setControl
ולשיטות הבאות של FormArray
:
push
insert
removeAt
setControl
clear
תמיכה במאימות מינימום ומקסימום לטפסים מונחים תבנית
השמיים min
ו max
ניתן להשתמש במאמתים של Angular כעת עם טפסים מונעי תבנית:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
שים לב שמדובר בשינוי פורץ מכיוון שקודם לכן היו מתעלמים מאלה.
i18n
מערכת i18n של Angular השתנתה עם המהדורה הזו.
כפי שצוין בהודעה בבלוג, כרגע משתמשים במספר פורמטים מזהים של הודעות קודמות. אלה שבירים ונושאים יכולים להופיע בגלל רווח לבן, תבניות עיצוב וביטויים לטיפול נמרץ.
זווית 12 מציגה פורמט חדש של מזהה הודעה קנונית (כלומר, פורמט אחד לשלוט בכולם). פורמט זה גמיש יותר ואינטואיטיבי יותר.
פורמט זה יקטין את פסול התרגום המיותר ואת עלות התרגום המחודש ביישומים שבהם תרגומים אינם תואמים עקב שינויים במרחב לבן למשל.
מאז v11, פרויקטים חדשים מוגדרים אוטומטית לשימוש במזהי ההודעות החדשות, וכעת יש כלים במקום להעביר פרויקטים קיימים עם תרגומים קיימים. אם אתה מודאג, תוכל להשתמש ב- localize-migrate
כלי להעברת מזהי ההודעות שלך:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
תוכל למצוא מידע נוסף כאן.
שיפורי ביצועים
עם מהדורה זו, ישנם מספר שיפורים בביצועים. הברור ביותר מגיע יחד עם השדרוג ל- Webpack 5, אבל יש עוד:
הוסרו מספר שיטות שאינן בשימוש DomAdapter
. זה מגניב מכיוון שהשיטות שלו אינן ניתנות לטלטול עצים ונכללו בכל היישומים הזוויתיים, כמוסבר ב יחסי ציבור תואמים.
Angular מייצרת כעת פחות קוד לגישה מאובטחת של נכסים; למשל לביטויים תבניתיים כמו a?.b
והתאחדות האפס הנתמכת לאחרונה: a ?? b
.
מהדר Angular תומך כעת באוסף מצטבר גם בנוכחות קבצי מקור מנותבים מחדש. בעבר, לא ניתן היה לעשות שימוש חוזר בעבודה מהידור קודם כשקובצי המקור מופקעים מסוג TypeScript. תוכלו לקרוא עוד על כך כאן.
מהדר Angular מאחסן כעת את נתיב מערכת הקבצים של קבצי המקור. בעבר, זה התקשר שוב ושוב fs.resolve()
, וזה גוזל זמן.
השמיים getDirectives
הפונקציה שופרה. יחד עם השינוי ההוא, ng
מרחב השמות הורחב גם כדי לכלול חדש getDirectiveMetadata
תוֹעֶלֶת.
ויש עוד קצת.
שיפורי ממשק API
השמיים ng
ממשק API לניפוי באגים שנוכל להשתמש בו מהדפדפן כלים להתפתח שופרה עם Angular 12.
יש פונקציה חדשה שנקראת getDirectiveMetadata
, שניתן להשתמש בהם כדי לאחזר מידע על רכיבים והוראות. אני לא חושב שנצטרך את זה לעיתים קרובות, אך ככל הנראה שיפורים בנושא כלי עבודה עתידיים יסתמכו על זה. תוכלו לגלות עוד כאן.
פונקציית פרופיל חדשה בשם esetProfiler
יושם גם והוא זמין גם במצב ייצור. ניתן לקרוא לפונקציה חדשה זו במספר תרחישים. לדוגמה, ניתן להשתמש בו כדי להתחקות אחר משך יצירת תבניות, עדכוני תבניות, עיבוד ווים של מחזור חיים וכו '. שוב, ממשק ה- API הזה ינוצל על ידי כלי ההתפתחות הבאים, וייתן לנו מידע הרבה יותר תובנה לגבי ביצועי היישומים שלנו זמן ריצה.
זה עדיין ניסיוני בשלב זה, אבל אני מניח שנשמע עוד על כך בהמשך. אני סקרן לראות אם / מתי כלים כמו Sentry ישלבו תמיכה באיסוף מידע מסוג זה על מנת לספק לנו לוחות מחוונים מועילים לביצועים.
כמה ימים לאחר שחרורו של Angular 12, צוות Angular יש הודיע את הזמינות של כלים חדשים למכשירי Angular חדשים עבור Google Chrome. אתה יכול להוריד את אלה כאן.
באמצעות סיומת הדפדפן החדשה לגמרי, אתה יכול לבדוק בקלות את יישומי Angular שלך במהלך הפיתוח. זה תומך:
- הדמיה של מבנה היישום (כלומר בדיקת עץ הרכיב)
- חקר ועריכת רכיבים
- הופעות פרופיל
באמצעות הפרופיל המוטמע אנו יכולים להקליט אירועי זיהוי שינויים, ולהציג תצוגה מקדימה של התרחשותם בזמן שהם מתרחשים. עבור כל מחזור איתור שינויים, אנו יכולים לבדוק כמה זמן לקח, אילו רכיבים לקחו את הזמן הארוך ביותר, האם מחזור זה גרם לירידות מסגרת.
ל- Angular היו בעבר כלים רשמיים למחצה של Dev אוגורי פרויקט (שהם הבסיס לכלים החדשים!), אך אלה לא היו תואמים לאייבי. אז אלה חדשות נהדרות לקהילת Angular!
ועוד…
יש טונה יותר שינויים קלים במהדורה זו. הנה סקירה מהירה.
APP_INITIALIZER תומך כעת ב- Observables
עד כה לא ניתן היה להשתמש ב- Observables עם APP_INITIALIZER
. נכון ל- Angular 12, כעת אנו יכולים לעשות זאת, מה שיאפשר קוד נקי יותר!
למקרה שעדיין לא ידעת על התכונה הזו של Angular, APP_INITIALIZER
is אסימון שנוכל להשתמש בהם כדי להגדיר פונקציות שצריכות לבצע במהלך אתחול היישום. אם פונקציה זו אינה סינכרונית, החזרת a Promise
או Observable
(חדש: p) ואז Angular ממתין להשלמתו לפני תחילת היישום.
שינוי זה הוא יותר מברך, מכיוון שמשמעותו שאנחנו יכולים לכתוב עוד יותר קוד באמצעות RxJS, במקום שנצטרך "לחזור" אל Promise
ה-API.
אתה יכול לקרוא עוד על זה כאן.
שליטת זמן ריצה באנימציות
בעבר, הדרך היחידה להשבית אנימציות הייתה לספק את NoopAnimationsModule
. נכון ל- Angular 12, כעת ניתן להשבית הנפשות על בסיס מידע זמן ריצה באמצעות BrowserAnimationModule.withConfig
השיטה, ולהעביר אותה disableAnimations
רכוש בוליאני.
שיטת היסטוריה חדשה עבור בשירות מיקום
השמיים LocationService
של Angular כולל כעת א historyGo
שיטה, בה ניתן לנווט לעבר דף ספציפי בהיסטוריית ההפעלות, המזוהה על ידי מיקומו היחסי לדף הנוכחי. שיטה זו תואמת את הילידים window.history.go
שִׁיטָה. בדוק את MDN לקבלת כמה דוגמאות.
שיפורי שירות בשפה
שירות השפה, זה שמספק ל- IDE את כל התובנות השימושיות לגבי קוד Angular השתפר גם עם המהדורה הזו.
עם Angular 12, שירות השפות מופעל כברירת מחדל (בעבר הוא נדרש מאיתנו להצטרף).
נכון לזווית 12, היא גם תגלה אם בדיקת סוג תבנית קפדנית אינו מופעל, ו ימליץ לך לאפשר אותם.
שירות השפה כולל כעת גם יכולות לאיתור ביצועים, באמצעותן ניתן לעקוב אחר ביצועים. ניתן להפעיל זאת ב- VSCode, כמוסבר כאן (זו אמנם רמה נמוכה למדי).
אם אתה עדיין לא יודע על שירות השפה, בדוק המסמכים הרשמיים, או פוסט הבלוג הנחמד שנכתב על ידי כיתת הנינג'ה, או זה מבוא וידאו.
השבת כללי מוך ישירות מתבניות HTML
מהדר תבניות Angular עוקב כעת אחר הערות HTML.
בעבר, לא ניתן היה להשבית כללי linter מתבניות HTML מכיוון שמהדר התבניות Angular התעלם מהערות. הדרך לעקיפת הבעיה הייתה לבטל את הכללים הללו עבור כל התבנית מבקר הרכיב. הודות לשינוי זה, ניתן יהיה לעשות זאת באופן מדויק יותר מהתבנית:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Yay עבור קוד מנקה!
ה- DatePipe תומך כעת ביום השבועי הסטנדרטי של טיפול נמרץ
בעבר, זה לא היה אפשרי כדי לעצב תאריך לעמוד לבד ביום בשבוע באמצעות DatePipe.
הודות לשינוי זה נתמכת כעת עיצוב תאריכים פיני ואני בטוח שזה חדשות נהדרות עבור חלק קטן מהקהילה הזוויתית community
תמיכה ב- Forward Ref בשירותי קישוטים הניתנים להזרקה
כעת ניתן להשתמש forwardRef
בתוך providedIn
שדה של @Injectable
מְעַצֵב.
הוו transformResource חדש בממשק ResourceHost
A transformResource
השיטה נוספה ל- ResourceHost
מִמְשָׁק. הודות לכך, כעת ניתן לבצע כלים לעשות דברים כמו הצגת תמיכה במעבד מקדים לסגנונות מוטבעים. זה מה שמאפשר את התמיכה החדשה ב- SASS עם סגנונות מוטבעים.
תוכלו ללמוד עוד על כך כאן ו כאן.
אפשר ליצור יישומי נתב מותאמים אישית
עד כה ניתן היה ליצור שקעי נתב מותאמים אישית, אך נדרש לקפוץ דרך כמה חישוקים (כלומר, רישום שקעים מותאמים אישית עם ChildrenOutletContexts
).
זווית 12 מספקת א תמיכה נקייה יותר בשקעי נתב מותאמים אישית.
תיקוני באגים
כרגיל, ישנם תיקוני באגים של gazillion הכלולים במהדורה זו.
הנה עותק של הערות השחרור:
- אנימציות: להבטיח הזמנה עקבית של מרחב שמות#19854) (01cc995)
- אנימציות: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (e918250)
- אנימציות: ניקוי רכיבי DOM כאשר תצוגת הבסיס מוסרת (#41059) (c49b280)
- אנימציות: אפשר אנימציות על אלמנטים בצל DOM (#40134) (אבא 42c8), נסגר #25672
- אנימציות: ניקוי רכיבי DOM כאשר תצוגת הבסיס מוסרת (#41001) (a31da48)
- בזל: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (8503246)
- בזל: כלי בניית עדכונים לשינויים האחרונים ב- rules_nodejs (#40710) (696f7bc)
- בזל: עדכון בדיקת שילוב לשימוש rules_nodejs@3.1.0 (#40710) (34מתוך 89א)
- בזל: יציקות סוג עדכון לשימוש JSON.parse (#40710) (2c90391)
- מדד ספסל: יציקות סוג עדכון לשימוש JSON.parse (#40710) (e721a5d)
- מְשׁוּתָף: הוסף ContentType נכון עבור ערכים בוליאניים עם גוף בקשת HttpClient (#38924) (#41885) (922a602)
- מְשׁוּתָף: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (f2b6fd8)
- מְשׁוּתָף: גלילת תצוגת תצוגה לא מוצאת אלמנטים בתוך DOM הצל (#41644) (c0f5ba3), נסגר #41470
- מְשׁוּתָף: לייצא מחדש ולהפחית באופן זמני
XhrFactory
(#41393) (7 dfa446) - מְשׁוּתָף: מיקום ניקוי משנה מאזינים כאשר מוסרת תצוגת הבסיס (#40867) (38524c4), נסגר #31546
- מְשׁוּתָף: אפשר מספר או בוליאני בתור http params (#40663) (91cdc11), נסגר #23856
- מְשׁוּתָף: הימנע ממוטציה של אובייקט הקשר ב- NgTemplateOutlet (#40360) (D3705b3), נסגר #24515
- מַהְדֵר: שמור על כללי @page בסגנונות מכוסים (#41915) (3e365ba), נסגר #26269
- מַהְדֵר: רצועת סלקטורים עם סקופ
@font-face
כללים (#41815) (2a11cda), נסגר #41751 - מַהְדֵר: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (8126)
- מַהְדֵר: תבניות מוטבעות שאינן מילוליות מעובדות באופן שגוי באוסף חלקי (#41583) (Ab257b3)
- מַהְדֵר: לא יוצר הוראות עדכון לתבנית ng בתוך מרחבי שמות חלופיים (#41669) (2bcbbda), נסגר #41308
- מַהְדֵר: הימנע מניתוח EmptyExpr עם טווח אחורה (#41581) (E1a2930)
- מַהְדֵר: לטפל בתכונות מותאמות אישית של CSS תלויי-רישיות (#41380) (E112e32), נסגר #41364
- מַהְדֵר: לכלול רכיבים משומשים במהלך אוסף JIT של הצהרת רכיבים חלקית (#41353) (ff9470b), נסגר #41104 #41318
- מַהְדֵר: תמיכה במספר
:host-context()
בוחרים (#40494) (07b7af3), נסגר #19199 - מַהְדֵר: יציקות סוג עדכון לשימוש JSON.parse (#40710) (f728490)
- מהדר- cli: השתמש "לכתובת האתר של מפת המקור של תבניות עקיפות (#41973) (7a4d980), נסגר #40854
- מהדר- cli: לחשוף את המקשר כתוסף של בבל (#41918) (8fdac8f)
- מהדר- cli: מעדיפים יצוא שאינו ממוקד בפולטות עזר (#41866) (75bb931), נסגר #41443 #41277
- מהדר- cli: אפשר לקישור לעבד בוליאנים ממוזערים (#41747) (1fb6724), נסגר #41655
- מהדר- cli: התאמת הצהרות חלקיות באינדקס מחרוזת (#41747) (f885750), נסגר #41655
- מהדר- cli: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (5b463f4)
- מהדר- cli: השלמה אוטומטית של סוגים מילוליים בתבניות. (#41456) (#41645) (8b2b5ef)
- מהדר- cli: אל תטעו בשמירה מוקדמת אם לרכיב אין סגנונות מוטבעים (#41602) (a5fe8b9)
- מהדר- cli: ודא את רצועות המהדר
ts.Program
נכון#41291) (74) - מהדר- cli: למנוע הסרת יבוא ברירת מחדל בהידורים חוזרים מצטברים (#41557) (7f16515), נסגר #41377
- מהדר- cli: לפתור
rootDirs
למוחלט (#41359) (3e0fda9), נסגר #36290 - מהדר- cli: להוסיף
useInlining
אפשרות להקליד check config (#41043) (09aefd2), נסגר #40963 - מהדר- cli:
readConfiguration
האפשרויות הקיימות צריכות לעקוף את האפשרויות ב- tsconfig (#40694) (b7c4d07) - מהדר- cli: להאריך
angularCompilerOptions
ב- tsconfig מ- node (#40694) (5eb1954), נסגר #36715 - מהדר- cli: עדכן מבחני שילוב ngcc לשינויים האחרונים ב- rules_nodejs (#40710) (d7f5755)
- מהדר- cli: יציקות סוג עדכון לשימוש JSON.parse (#40710) (b75d7cb)
- הליבה: אל תשמור רכיבים ומודולים מורכבים באופן דינמי (#42003) (1449c5c), נסגר #19997
- הליבה: הפעל פרופיל סביב ווים מחזור החיים של ngOnDestroy (#41969) (e9ddc57)
- הליבה: AsyncPipe תואם כעת ל- RxJS 7 (#41590) (9759 bca)
- הליבה: לטפל בתכונות i18n מרובות עם כריכות ביטוי (#41882) (73c6c64), נסגר #41869
- הליבה: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (f9c1f08)
- הליבה: לזהות קונסטרוקציות מסונתזות שהועברו במורד באמצעות TS 4.2 (#41305) (274dc15), נסגר #41298
- הליבה: מתג
emitDistinctChangesOnlyDefaultValue
לאמיתי (#41121) (7096246) - הליבה: הסר קבוע EMPTY_OBJ משוכפל (#41066) (bf158e7)
- הליבה: הסר EMPTY_ARRAY משוכפל קבוע (#40991) (e12d9de)
- הליבה: אפשר לעדכן את הקשר EmbeddedViewRef (#40360) (a3e1719), נסגר #24515
- הליבה: להפוך את DefaultIterableDiffer לשמור על סדר הכפילויות (#23941) (a826926), נסגר #23815
- הליבה: אפשרויות NgZone לפיתוח פחם צריכות להפעיל את OnStable כהלכה (#40540) (22f9e45)
- אלמנטים: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (4f5d094)
- אלמנטים: יציקות סוג עדכון לשימוש JSON.parse (#40710) (efd4149)
- צורות: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (dc975ba)
- http: השלם את הבקשה בזמן הקצוב (#39807) (61a0b6d), נסגר #26453
- http: שגיאת פליטה באירוע הפסקת XMLHttpRequest (#40767) (3897265), נסגר #22324
- שירות שפות: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (9b6198c)
- שירות שפות: השתמש בגרסאות סקריפט עבור אוספים מצטברים (#41475) (78236bf)
- שירות שפות: ספק רק השלמות של נכסים זוויתיים בתבניות (#41278) (0226a11)
- שירות שפות: הוסף אפשרות תוסף בכדי לאלץ stringTemplates (#41062) (e9e7c33)
- שירות שפות: השתמש בנקודת כניסה יחידה עבור Ivy ו- View Engine (#40967) (E986a97)
- לְמַקֵם: שחרור שגיאה לאזהרה מפני חסר יעד (#41944) (35 המשך 2), נסגר #21690
- לְמַקֵם: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (658ed1f)
- לְמַקֵם: יציקות סוג עדכון לשימוש JSON.parse (#40710) (4b469c9)
- ngcc: לזהות קונסטרוקציות מסונתזות שהועברו במורד באמצעות TS 4.2 (#41305) (8d3da56), נסגר #41298
- דפדפן פלטפורמה: למנוע דליפת זיכרון של צמתים בסגנון אם נעשה שימוש בקפסולת DOM בצל (#42005) (d555555), נסגר #36655
- דפדפן פלטפורמה: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (ea05cfd)
- דפדפן פלטפורמה: להגדיר
XhrFactory
כדי להשתמשBrowserXhr
(#41313) (E0028e5), נסגר #41311 - דפדפן פלטפורמה: יציקות סוג עדכון לשימוש JSON.parse (#40710) (7ecfd2d)
- פלטפורמה-דפדפן-דינמי: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (bc45029)
- שרת פלטפורמה: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (4b9d4fa)
- נתב: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (0067 edd)
- נתב: אחזר את המסלול המאוחסן רק כאשר אסטרטגיית השימוש החוזר מציינת כי עליו לחבר מחדש (#30263) (a4ff071), נסגר #23162
- נתב: מזג רקורסיבית התאמות נתיב ריקות (#41584) (1179dc8), נסגר #41481
- נתב: שבר יכול להיות ריק (#37336) (b555160), נסגר #23894 #34197
- נתב: יציקות סוג עדכון לשימוש JSON.parse (#40710) (350 דאדה)
- עובד שירות: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (6b823d7)
- עובד שירות: יציקות סוג עדכון לשימוש JSON.parse (#40710) (4f7ff96)
- שדרוג: שמור על $ interval.flush כאשר משתמשים ב- ngMocks (#30229) (87dc851)
- שדרוג: עדכן טווח גרסאות צומת נתמך כך שיכלול רק גרסאות LTS (#41822) (10c4523)
אגב, שמתם לב לזה AsyncPipe
כבר טָלוּא מאת בן לס להיות תואם גם ל- RxJS 6 וגם ל- 7? כמה מגניב זה?
שינויים שוברים
כרגיל, ישנם מספר שינויים שוברים עם המהדורה הזו.
As הערות השחרור הרשמיות די ברורים, אני רק מעתיק / מדביק את אלה כאן:
- חבילות UMD ממוזערות אינן כלולות עוד בחבילות ה- NPM המופצות.
- אנימציות: רכיבי DOM מוסרים כעת כהלכה כאשר מוסרת תצוגת הבסיס. אם אתה משתמש ב- SSR ומשתמש ב- HTML של האפליקציה לעיבוד, יהיה עליך לוודא שאתה שומר את ה- HTML למשתנה לפני שאתה מוריד את היישום. ייתכן גם שבדיקות יכולות להסתמך בטעות על ההתנהגות הישנה על ידי ניסיון למצוא אלמנט שלא הוסר בבדיקה קודמת. אם זה המקרה, יש לעדכן את הבדיקות הכושלות כדי לוודא שיש להם קוד התקנה תקין שמאתחל את האלמנטים שהם מסתמכים עליהם
- משותף: שיטות של
PlatformLocation
בכיתה, כלומרonPopState
וonHashChange
, נהג לחזורvoid
. כעת שיטות אלה מחזירות פונקציות שניתן לקרוא להן כדי להסיר מטפלים באירועים - נפוץ: השיטות של
HttpParams
מחלקה עכשיו לקבלstring | number | boolean
במקוםstring
לערך של פרמטר. אם הרחבת שיעור זה ביישום שלך, יהיה עליך לעדכן את חתימות השיטות שלך כדי לשקף שינויים אלה - מהדר- cli: ספריות מקושרות כבר לא מייצרות מזהי הודעות i18n מדור קודם. כל יישום במורד הזרם שמספק תרגומים להודעות אלה, יצטרך להעביר את מזהי ההודעות שלהם באמצעות ה-
localize-migrate
כלי שורת הפקודה - הליבה: Angular כבר לא שומרת על תמיכה ב- node v10, אז אם אתה עדיין משתמש בה לסביבת הפיתוח שלך, זה באמת הזמן להשתדרג!
- הליבה: בעבר ה-
ng.getDirectives
פונקציה הטילה שגיאה במקרה שלצומת DOM נתון לא היה קשור הקשר זוויתי (למשל אם נקראה לפונקציה עבור אלמנט DOM מחוץ לאפליקציה Angular). התנהגות זו לא עולה בקנה אחד עם כלי ניפוי באגים אחרים תחתng
מרחב השמות, שטיפל במצב זה מבלי להעלות חריג. עכשיו קורא לng.getDirectives
פונקציה עבור צמתים DOM כאלה תביא למערך ריק שיוחזר מליבת פונקציה זו: החלפת ברירת המחדל שלemitDistinctChangesOnlyDefaultValue
המשנה את התנהגות ברירת המחדל ועלול לגרום לכמה יישומים המסתמכים על התנהגות שגויה להיכשל
emitDistinctChangesOnly
הדגל גם הוצא משימוש ויוסר במהדורה מרכזית עתידית
היישום הקודם יביא לשינויים QueryList.changes.subscribe
בכל פעם ש QueryList
היה מחושב מחדש. זה הביא למספר גבוה באופן מלאכותי של התראות שינוי, מכיוון שניתן לחשוב מחדש QueryList
תוצאות באותה רשימה. כאשר QueryList
מקבל מחשב מחדש הוא פרט יישום, וזה לא אמור להיות הדבר שקובע באיזו תדירות יש לשנות אירוע.
למרבה הצער, תיקון ההתנהגות על הסף גרם ליותר מדי יישומים קיימים להיכשל. מסיבה זו, Angular רואה בתיקון זה תיקון שבור והציג דגל ב @ContentChildren
ו @ViewChildren
, השולט בהתנהגות.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
לתאימות לאחור לפני v12emitDistinctChangesOnlyDefaultValue
היה מוגדר false
. השינוי הזה
משנה את ברירת המחדל ל true
.
- הליבה: סוג ה-
APP_INITIALIZER
האסימון שונה כדי לשקף בצורה מדויקת יותר את סוגי ערכי ההחזר המטופלים על ידי Angular. בעבר, כל שיחה חוזרת של אתחול הוקלדה כדי לחזורany
, זה עכשיוPromise<unknown> | Observable<unknown> | void
. במקרה הלא סביר שהיישום שלך משתמש ב-Injector.get
orTestBed.inject
ממשק API להזרקת ה-APP_INITIALIZER
אסימון, יתכן שתצטרך לעדכן את הקוד לחשבון מהסוג המחמיר יותר.
בנוסף, TypeScript עשוי לדווח על שגיאת TS2742 אם APP_INITIALIZER
אסימון משמש בביטוי שצריך לפלוט את סוגו הנגזר לקובץ .d.ts. כדי לעקוף את הבעיה, יש צורך בהערת סוג מפורשת, שבדרך כלל תהיה Provider
or Provider[]
.
-
הליבה: מינימום נתמך
zone.js
גרסה0.11.4
. לכן המשמעות היא שאם אתה משתמש בגרסה ישנה יותר, הגיע הזמן גם לשדרג את zone.js בפרויקט שלך! -
צורות: השמיים
emitEvent
אפשרות זו נוספה לבאותFormArray
וFormGroup
שיטות: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
אם באפליקציה שלך יש שיעורים מותאמים אישית המתרחבים FormArray
or FormGroup
שיעורים ולדרוס את
בשיטות הנ"ל, יתכן שתצטרך לעדכן את היישום שלך בכדי לקחת את האפשרויות החדשות
חשבון וודא שהביטולים תואמים מנקודת מבט מסוגים.
- צורות: בעבר
min
וmax
תכונות שהוגדרו ב-<input type="number">
התעלמו ממודול הטפסים. עכשיו הנוכחות של התכונות האלה הייתה
להפעיל לוגיקה של אימות מינימום / מקסימום (במקרהformControl
,formControlName
orngModel
הוראות קיימות גם על קלט נתון) ו-
מצב בקרת טופס מקביל ישקף זאת. - דפדפן פלטפורמה:
XhrFactory
הועבר מ@angular/common/http
ל@angular/common
.
לפני
import { XhrFactory } from '@angular/common/http';
לאחר
import { XhrFactory } from '@angular/common';
- נתב: בדיקות אפס קפדניות ידווחו על שבר שעלול להיות ריק.
נתיב הגירה: הוסף בדיקת null. - נתב: סוג ה-
RouterLinkActive.routerLinkActiveOptions
קלט היה
הורחב כדי לאפשר שליטה מכווננת יותר. קוד שקרא בעבר
יתכן שיהיה צורך לעדכן נכס זה בכדי להתחשב בסוג החדש.
מפת דרכים מעודכנת
על פי הזווית הנוכחית מפת דרכים, הצוות עסוק כעת בשיפורים הבאים:
- שיפור חווית המפתח תוך ניפוי באגים ופרופיל. זה אמור לעזור לנו להבין את מבנה הרכיבים (אני מתאר לעצמי שכלי React Dev Devil מאפשרים React) ולשנות איתור
- שיפור זמני הבדיקה וניקוי באגים עם פירוק אוטומטי: זה אמור לשפר את הבידוד בין הבדיקות לזמני הבדיקה. ה מבחן המיטה ישונה גם כדי לנקות ולהפיל את סביבת הבדיקה באופן אוטומטי לאחר ביצוע כל בדיקה
- שימוש ב- ES2017 + כפלט ברירת המחדל: הם יזהו מחסומים ויסירו אותם כך שניתן לשדרג את שפת הפלט המוגדרת כברירת מחדל
- שילוב רשת MDC בחומר זוויתי
- שיפור הנגישות של רכיבי חומר זוויתי
- פרסום מדריכים אודות מושגים מתקדמים כגון זיהוי שינויים, פרופיל ביצועים, אינטראקציות עם Zone.js וכו '
- עדכון אסטרטגיית הבדיקה e2e (cfr לעיל)
- הכנת השדרוג ל- RxJS v7 +. כפי שאתה אולי יודע, RxJS 7 כבר היה שוחרר לאחרונה. אני מקווה שנוכל בקרוב להיות מסוגלים לשדרג
בעתיד, צוות Angular מתכנן:
- בדוק ארכיטקטורת מיקרו-חזית: הם עשויים להציג אמצעים עבורנו ליצור בקלות מיקרו-חזית באמצעות Angular
- שפר את חוויית המפתח באמצעות הקלדה קפדנית של טפסים זוויתיים (אנו כל כך זקוקים לכך)
- הפוך את Zone.js לאופציונלי, מה שאמור לפשט את המסגרת, לשפר את ניפוי הבאגים, להקטין את גדלי החבילות ואפילו לאפשר ניצול התחביר האסינכרוני / ההמתנה המקורי
- שפר את ביצועי הבנייה על ידי שילוב מהדר Angular (
ngc
) כתוסף מהדר TypeScript - אפשר להוסיף הנחיות לאלמנטים מארחים. זה התבקש על ידי הקהילה כבר הרבה זמן!
- הפוך את NgModules לבחירה כדי להקל על עקומת הלמידה
- ספק לנו אמצעים קלים יותר ליישום פיצול קוד ברמת הרכיב
חומר זוויתי ו- CDK זוויתי
נדידת סאס
באופן פנימי, הן חומר זוויתי והן CDK עברו ל מערכת מודול Sass חדשה.
אם היישום שלך משתמש באחד מאלה, יהיה עליך לוודא שהחלפת node-sass
by sass
: https://www.npmjs.com/package/sass. ה node-sass
החבילה אינה מתוחזקת יותר!
עם העברה זו, שופר ה- API של Sass theming, וכעת הוא מאפשר לנו לנצל את ה- Sass @use
תוֹעֶלֶת.
כעת יש נקודת כניסה אחת עבור @angular/material
ו @angular/cdk
.
לבסוף, ממשקי ה- API שונו גם לשם הבהירות. פונקציות, mixins ומשתנים רבים שונו בדרך.
תוכל למצוא מידע נוסף על שינויים אלה במדריך הנושאים החדש: https://github.com/angular/components/blob/master/guides/theming.md. בנוסף, שים לב כי המדריכים ב- https://material.angular.io שוכתבו מחדש כדי להציג את ה- API החדש, וכוללים הסברים.
תהליך השדרוג יעביר קוד באופן אוטומטי לממשק ה- API של Sass החדש. תוכלו למצוא דוגמאות לפני / אחרי כאן.
שינויים CDK זוויתיים
גרסה 12 כוללת מספר שינויים ל- CDK Angular.
כאן אפרט רק את התכונות החדשות, אך תוכל לבדוק את הערות השחרור אם ברצונך לקבל פרטים על תיקוני הבאגים ושיפור הביצועים:
- גרירה ושחרור: האירוע שנפל כולל כעת
dropPoint
מאפיין, וקובע את הנקודה המדויקת לאן הצביע העכבר כאשר הושלך הפריט. עוד מידע כאן - גרירה ושחרור: מיכל התצוגה המקדימה כעת ניתן להתאים אישית
- טבלתי: הוראה חדשה מאפשרת לאפשר את מהדר תצוגת המיחזור, שמאחסן במטמון שורות זרוקות ומשתמש בהן מחדש כאשר מערך הנתונים משתנה. זה יכול לעזור בשיפור הביצועים (הפחתת חביון)
- טבלתי: נוסף קיזוזי האלמנטים הדביקים ל
StickyUpdate
ממשק - צעד: כאשר משתמש מנסה להתרחק משלב,
interacted
האירוע יהיה כעת נפלט - צעד: האוריינטציה יכולה להיות כעת השתנה
- נגישות:
FocusOptions
אובייקט כעת ניתן לעבור לשיטות מלכודת המיקוד השונות - בדיקות: סביבת רתמת WebDriver חדשה. עדיין לא צללתי לתוך זה אז אני לא יכול לספר לך יותר. לבדוק יחסי הציבור
שינויים חומריים זוויתיים
ישנם גם מספר שינויים עבור חומר זוויתי. שוב, עיין בהערות השחרור עבור הרשימה המלאה של תיקוני באגים.
תכונות חדשות:
- בוחר תאריכים: כבר לא תלוי בדיאלוג
- צעד: כעת ניתן לשנות את הכיוון באופן דינמי (שינוי דומה ב- CK ב- CDK)
- צעד: אפשר לתוכן להיות שניתנו בעצלתיים
- תפריט: אפשר עדכון מיקום התפריט מבחינה תכנותית
- שגיאת מחצלת: משתמש כעת
aria-live="polite"
במקוםrole="alert"
. פרטים נוספים כאן - כרטיסיות: הוסף שיטה ל להגדיר מיקוד פרוגרמטי בכרטיסייה ספציפית
- רשימה: עכשיו מחזיר מערך עם אפשרויות ששונו מה-
selectAll
וdeselectAll
שיטות. לבדוק יחסי הציבור לפרטים - החלף להחלפה: מאפשר ל להגדיר באופן גלובלי צבע ברירת מחדל באמצעות ספק
- Tooltip: כעת חושף את המיקום האפקטיבי של טיפ הכלים דרך מחלקה ברכיב
- רדיו, תיבת סימון ו מחוון: כלול את צבע הרקע של רכיבים אלה ב- הדפסת גיליונות סגנונות
יש גם מספר שינויים בגרסת הניסוי: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
זוויתית אוניברסלית
זוויתית אוניברסלית 12 היא גם טרי מהתנור.
עם המהדורה הזו, יוניברסל עכשיו משלב CSS קריטי כברירת מחדל, שזה די מגניב.
יוניברסל כוללת כעת חדש proxyConfig
אפשרות לספק תצורות פרוקסי מותאמות אישית למערכת ssr-dev-server
בּוֹנֶה.
בגרסה זו יש מנוע SSR חדש (ניסיוני) שנקרא תלתן (מזכיר לי כלי איכותי במערכת האקולוגית של Java). המנוע החדש הזה נראה מבטיח. מטרתה לפשט את הדברים, להיפטר מה- Window is undefined
שגיאה, הסר את הצורך במספר builds עבור SSR / prerender, צור פגזי יישומים ללא בנייה נוספת ועוד. כנראה שנשמע עוד על כך בהמשך. אם אתה סקרן, אז בדוק יחסי הציבור.
גרסה זו כוללת א בונה בעזרתם ניתן ליצור דפים סטטיים (כלומר, עיבוד מראש) באמצעות הגישה החדשה של תלתן אוניברסלי.
לבסוף, גרסה זו כוללת גם תמיכה ב- TLS לשרת dev.
מפות Google
כידוע, Angular כוללת רכיבים עבור מפות Google ו- Youtube. גרסה 12 מביאה כמה שיפורים לרכיב מפות Google:
- עכשיו כולל
icon
קלט להתאמה אישית בקלות של הסמן - עכשיו פולט א
clusterClick
אירוע כאשר אשכול נלחץ - כולל עטיפה סביב ה- Google Maps Geocoder API, וייצוא
MapDirectionsResponse
, שלא נחשף קודם לכן - מציג תמיכה ב ביצוע מפות חום
- נוסף
MapDirectionsRenderer
, המאפשר להציג הוראות במפה, וMapDirectionsService
, שעוטףgoogle.maps.DirectionsService
כדי לחשב מסלולים בין שתי נקודות. - חדש
options
קלט על מקבץ סמן, בדומה להוראות האחרות.
שדרוג
כרגיל, יש מדריך שדרוג מלא זמין ng update
יעזור לך: https://update.angular.io/?l=3&v=11.0-12.0
אם אתה משתמש Nrwl NX (אתה באמת צריך), שים לב ש- Nx 12.3 כולל כבר תמיכה ב- Angular 12! למידע נוסף על כך כאן. כהטבה נוספת, Nx גם יעזור לך לעבור מ- TSLint ל- ESLint (והגיע הזמן!)
סיכום
במאמר זה בחנתי את התכונות החדשות של Angular 12.
כרגיל, זהו שחרור הֵרוֹאִי (מה עוד יכול להיות ?! 😎).
אייבי מתקדמת, ואני מקווה ש" בקרוב "פחות נרגיז אותנו ngcc
, ככל שהמערכת האקולוגית נודדת. ישנם מספר שינויים מדהימים במהדורה זו, אז בדוק את זה ושדרג עכשיו !.
זהו זה להיום!
נ.ב: אם אתה רוצה ללמוד טונות של דברים מגניבים אחרים על מוצר / תוכנה / פיתוח אתרים, בדוק את מושגי Dev סדרה, (https://mailchi.mp/fb661753d54a/developassion-newsletter) [הירשם לניוזלטר שלי], ו בואי תגיד היי בטוויטר!
- הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
- Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
- מקור: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- יכול
- אודות
- בנוגע לזה
- מֵעַל
- מוּחלָט
- לְקַבֵּל
- מקבל
- גישה
- נגישות
- חֶשְׁבּוֹן
- במדויק
- למעשה
- הוסיף
- תוספת
- מתקדם
- יתרון
- לאחר
- מטרות
- ערני
- אַלגוֹרִיתְם
- אלגוריתמים
- תעשיות
- מאפשר
- מאפשר
- לבד
- כְּבָר
- חלופה
- חלופות
- למרות
- תמיד
- בין
- ו
- זוויתי
- אנימציות
- הודיע
- הַכרָזָה
- אחר
- בְּכָל מָקוֹם
- API
- ממשקי API
- האפליקציה
- לְהוֹפִיעַ
- בקשה
- יישומים
- גישה
- אַפּרִיל
- ארכיטקטורה
- סביב
- מערך
- מאמר
- מאמרים
- המשויך
- תכונות
- מחברים
- מכני עם סלילה אוטומטית
- באופן אוטומטי
- זמינות
- זמין
- בבל
- בחזרה
- עורפי
- רקע
- בָּר
- מבוסס
- בסיס
- כי
- לפני
- להיות
- תועלת
- מוטב
- בֵּין
- גָדוֹל
- הגדול ביותר
- קצת
- בלוג
- מותג
- חדש
- שבירה
- מביא
- מובא
- דפדפן
- דפדפנים
- חרק
- לִבנוֹת
- בונה
- בִּניָן
- בונה
- מובנה
- צורר
- ניטל
- נקרא
- קוראים
- יכולות
- מקרה
- מקרים
- לגרום
- גרם
- שינוי
- שינויים
- לבדוק
- בדיקות
- Chrome
- בהירות
- בכיתה
- כיתות
- ברור
- בבירור
- סוגר
- אשכול
- קוד
- איסוף
- צֶבַע
- מגיע
- הערות
- קהילה
- תאימות
- תואם
- להשלים
- מסובך
- רְכִיב
- רכיבים
- מושגים
- מודאג
- מסקנה
- מחובר
- רואה
- עִקבִי
- קבוע
- לצרוך
- מכולה
- תוכן
- הקשר
- להמשיך
- לִשְׁלוֹט
- בקר
- בקרות
- קריר
- ליבה
- מתכתב
- עלות
- יכול
- קורס
- לכסות
- מכוסה
- לִיצוֹר
- נוצר
- יוצרים
- יצירה
- קריטי
- חוצה דפדפן
- מכריע
- CSS
- סקרן
- נוֹכְחִי
- כיום
- מנהג
- מאפיינים מותאמים אישית
- אישית
- תַאֲרִיך
- יְוֹם
- ימים
- מת
- עסקה
- עמוק יותר
- בְּרִירַת מֶחדָל
- תלוי
- פריסה
- עומק
- פרט
- פרטים
- איתור
- קובע
- קביעה
- dev
- מפתח
- צעצועי התפתחות
- DID
- אחר
- לחפור
- הנחיות
- ישירות
- מופץ
- הפצות
- עושה
- DOM
- מטה
- להורדה
- downside
- ירד
- טיפות
- כפילויות
- בְּמַהֲלָך
- כל אחד
- קל יותר
- בקלות
- המערכת האקולוגית
- אפקטיבי
- מאמץ
- או
- אלמנטים
- מוטבע
- לאפשר
- מאפשר
- כמוס
- מקצה לקצה
- אנרגיה
- מנוע
- משופר
- מספיק
- לְהַבטִיחַ
- כניסה
- סביבה
- סביבות
- שגיאה
- שגיאות
- במיוחד
- וכו '
- Ether (ETH)
- להעריך
- אֲפִילוּ
- אירוע
- אירועים
- כולם
- הכל
- התפתח
- מתפתח
- דוגמה
- דוגמאות
- מצוין
- יוצא מן הכלל
- לבצע
- הוצאת להורג
- קיימים
- מורחב
- צפוי
- ניסיון
- להסביר
- מוסבר
- המסביר
- מסביר
- הסבר
- חקר
- חוקר
- היצוא
- חשוף
- ביטויים
- להאריך
- הארכה
- חיצוני
- נוסף
- לְהַקֵל
- FAIL
- למדי
- ליפול
- אוהד
- מהר
- מהר יותר
- פחד
- מאפיין
- תכונות
- פֵדֵרַצִיָה
- מָשׁוֹב
- מעטים
- שדה
- שדות
- שלח
- קבצים
- בסופו של דבר
- מציאת
- אש
- לסדר
- תזרים
- להתמקד
- מתמקד
- הבא
- להכריח
- טופס
- פוּרמָט
- צורות
- קדימה
- מצא
- יסודות
- שבריר
- מסגרת
- מסגרת
- החל מ-
- ממשק
- מלא
- פונקציה
- פונקציות
- נוסף
- עתיד
- ליצור
- מייצר
- יצירת
- לקבל
- GitHub
- לתת
- נתן
- נותן
- נתינה
- Go
- הולך
- טוב
- Google Chrome
- מפות גוגל
- גרף
- גדול
- מדריך
- מדריך
- לטפל
- קשה
- יש
- נשמע
- לעזור
- כאן
- hi
- גָבוֹהַ
- להבליט
- היסטוריה
- הוקס
- אני מקווה
- המארח
- איך
- HTML
- HTTPS
- עצום
- קריא אדם
- חולה
- רעיון
- מזוהה
- לזהות
- פְּגִיעָה
- ליישם
- הפעלה
- יושם
- לייבא
- חשוב
- יבוא
- לשפר
- משופר
- השבחה
- שיפורים
- in
- לכלול
- כלול
- כולל
- לא נכון
- מצביע על
- בעקיפין
- מידע
- מידע
- בהתחלה
- חדשני
- קלט
- תובנות
- להתקין
- התקנה
- למשל
- במקום
- הוראות
- לשלב
- שילוב
- השתלבות
- יחסי גומלין
- מעניין
- מִמְשָׁק
- פנימי
- אינטרנט
- מבוא
- הציג
- מציג
- החדרה
- אינטואיטיבי
- מוּשׁקָע
- בדידות
- בעיות
- IT
- Java
- JIT
- עבודה
- להצטרף
- ג'סון
- שמור
- סוג
- לדעת
- שפה
- גדול יותר
- אחרון
- חֶבִיוֹן
- האחרון
- ליגה
- לדלוף
- לִלמוֹד
- למידה
- מוֹרֶשֶׁת
- רמה
- תנופה
- ספריות
- סִפְרִיָה
- קו
- קשר
- צמוד
- רשימה
- מיקום
- ארוך
- הרבה זמן
- לטווח ארוך
- עוד
- נראה
- נראה
- הסתכלות
- מגרש
- נמוך
- עשוי
- לתחזק
- שומר
- גדול
- הרוב
- לעשות
- עושה
- עשייה
- רב
- מַפָּה
- מפות
- להתאים
- תואם
- חוֹמֶר
- מַטרִיצָה
- מקסימום
- אומר
- זכרון
- תפריט
- למזג
- הודעה
- הודעות
- מידע נוסף
- שיטה
- שיטות
- מיקרוסופט
- יכול
- נודד
- הֲגִירָה
- מינימום
- קטין
- חסר
- טעות
- מצב
- מודרני
- מודול
- מודולים
- יותר
- רוב
- המהלך
- נע
- מוזילה
- מספר
- שם
- כלומר
- שמות
- יליד
- נווט
- הכרחי
- צורך
- צרכי
- שלילי
- נטו
- חדש
- תכונות חדשות
- חדשות
- ניוזלטר
- הבא
- Next.js
- צומת
- Node.js
- צמתים
- הערות
- ראוי לציון
- הודעות
- מספר
- מספרים
- אובייקט
- ברור
- התרחשה
- אוֹקְטוֹבֶּר
- רשמי
- רשמית
- זקן
- ONE
- מפעיל
- אפשרות
- אפשרויות
- להזמין
- ארגונים
- בְּמָקוֹר
- אחר
- שקעים
- בחוץ
- סקירה
- שֶׁלוֹ
- חבילה
- חבילות
- פרמטר
- פרמטרים
- במיוחד
- חלקים
- עבר
- חולף
- נתיב
- לבצע
- ביצועים
- הופעות
- ביצוע
- פרספקטיבה
- לְחַבֵּר
- צינור
- מקום
- תוכניות
- אפלטון
- מודיעין אפלטון
- אפלטון נתונים
- חיבור
- נקודה
- פופולריות
- עמדה
- אפשרי
- הודעה
- פוטנציאל
- חזק
- בדיוק
- לְהַעֲדִיף
- נוכחות
- להציג
- יפה
- למנוע
- תצוגה מקדימה
- קודם
- קוֹדֶם
- קודם
- כנראה
- בעיות
- תהליך
- תהליך
- הפקה
- פרופיל
- תָכְנִית
- פּרוֹיֶקט
- פרויקטים
- מבטיח
- תָקִין
- נכסים
- רכוש
- לספק
- ובלבד
- מספק
- פרוקסי
- לאור
- דחוף
- חִידָה
- איכות
- מָהִיר
- העלאה
- רכס
- חי
- RE
- להגיב
- חומר עיוני
- מימוש
- טעם
- סיבות
- ממליץ
- שיא
- להפחית
- לשקף
- רישום
- קָשׁוּר
- לשחרר
- שוחרר
- מרחוק
- להסיר
- הוסר
- טיוח
- שוב ושוב
- החליף
- לדווח
- לבקש
- בקשות
- לדרוש
- נדרש
- מִתאוֹשֵׁשׁ מַהֵר
- תגובה
- REST
- תוצאה
- תוצאות
- לַחֲזוֹר
- חוזר
- החזרות
- להיפטר
- מחסומים
- תפקיד
- שורש
- מסלול
- נתב
- כלל
- כללי
- הפעלה
- ריצה
- בטוח
- אותו
- סאס
- שמור
- תרחישים
- היקף
- שְׁנִיָה
- נראה
- תחושה
- סדרה
- שרות
- מושב
- סט
- הצבה
- התקנה
- Shadow
- קצר
- צריך
- ראווה
- חתימות
- דומה
- פָּשׁוּט
- לפשט
- since
- יחיד
- מצב
- מידה
- גדל
- לאט
- קטן
- קטן יותר
- So
- עד כה
- פִּתָרוֹן
- פתרונות
- כמה
- משהו
- קול
- מָקוֹר
- מֶרחָב
- ספציפי
- יציב
- לעמוד
- תֶקֶן
- תקנים
- התחלה
- החל
- מצב
- להשאר
- שלב
- עוד
- עצור
- חנות
- מאוחסן
- סיפור
- אִסטרָטֶגִיָה
- קַפְּדָנִי
- מחמיר
- מִבְנֶה
- סגנון
- הירשמו
- כזה
- סוּפֶּר
- תמיכה
- נתמך
- תומך
- הפתעות
- מתג
- מערכת
- רוח גבית
- רוח גב
- לקחת
- לוקח
- נטילת
- יעד
- נבחרת
- צוותי
- תבנית
- תבניות
- מבחן
- בדיקות
- בדיקות
- השמיים
- המקור
- שֶׁלָהֶם
- דבר
- דברים
- השנה
- דרך
- זמן
- דורש זמן רב
- ציר זמן
- פִּי
- ל
- יַחַד
- אסימון
- טון
- טון
- גַם
- כלי
- כלים
- הרמה העליונה
- לקראת
- להתחקות
- מעקב
- לעקוב
- מעקב
- לשנות
- מַעֲבָר
- תרגום
- שָׁקוּף
- להפעיל
- נָכוֹן
- סוגים
- כתב כתיבה
- בדרך כלל
- תחת
- להבין
- אוניברסלי
- לא בשימוש
- בקרוב ב
- עדכון
- מְעוּדכָּן
- עדכונים
- עדכון
- שדרוג
- כתובת האתר
- us
- נוֹהָג
- להשתמש
- משתמש
- משתמשים
- כלי עזר
- תועלת
- אימות
- תוקפים
- בעל ערך
- ערך
- ערכים
- שונים
- Ve
- גרסה
- לצפיה
- W3
- לחכות
- רציתי
- אזהרה
- אינטרנט
- Webpack
- שבוע
- שבועות
- ברוך הבא
- מה
- אם
- אשר
- בזמן
- מי
- יצטרך
- בתוך
- לְלֹא
- נצחנות
- נִפלָא
- תיק עבודות
- עבד
- עובד
- היה
- לכתוב
- כתיבה
- כתוב
- X
- שנה
- YouTube
- זפירנט