מדריך angular standalone component חלק 1

תשכחו כל מה שידעתם על אנגולר! טוב לא באמת, אבל ברגע שעוברים לעבודה עם פרויקט מבוסס רכיבים אוטונומים בלבד, יש מספר דברים שמשתנים.

1. ארכיטקטורה, מבנה הפרויקט כבר לא נשאר אותו דבר. עכשיו במקום לסדר את הרכיבים על פי המיקבץ שלהם במודול שקורא להם, אנחנו חופשיים להחליט על איזה מבנה שנוח לנו.
2. כל רכיב הוא גם סוג של מודול, כך שהוא יכול לעשות import למודולים ורכיבים אחרים.
3. כל רכיב לא תלוי בכלום אלא רק בעצמו וכל מה שצריך לה לקרוא לו
4. בראוט ניתן לקרוא למודול ועכשיו גם לרכיב וכך לטעון אותו ואת כל מי שהוא מייבא רק שצריך אותם ולא ישר על ההתחלה או כחלק ממודול.

בגדול הפרויקט נהיה גמיש יותר, הרכיבים מבודדים יותר וזה נותן לנו שליטה טובה יותר ומדוייק יותר בפרויקט.

בפוסט הזה נתבסס על אנגולר גרסה 16, נראה איך הרכיבים קוראים אחד לשני, איך משתמשים בראוט שאותו נטען רק שאנחנו צריכים, ושם נטען רכיב על פי ראוט משני.

נשתמש ב-reactive form וב-services, בקיצור, יש לנו הרבה מה לעשות.

תחילה ניצור פרויקט

ng new my-standalone-project --standalone

שימו לב לתוספת בסוף, זה דגל שמסמן לאנגולר ליצור פרויק ט מסוג standalone. אגב, גם פרויקט רגיל ניתן להסב ל-standalone ולהפך, אם ממש רוצים אפשר לעשות פרויקט ששניהם מתקיימים בו זמנית. הכל תלוי בצרכים של הפרויקט.

אחרי זה נשאל מספר שאלות נוספת, כאשר אנחנו נבחר את ברירת המחדש (פשוט ללחוץ enter) למעט בחירה אחת שנעשה והיא SCSS ולא CSS, זה רק לשם הנוחות.

לאחר שסיים, נכנס לספריה

cd my-standalone-project

ולמי שמשתמש ב-VSCODE ניתן פשוט לכתוב

code .

עכשיו שאנחנו נמצאים בתוך VSCODE או בכל IDE אחר שמתאים לכם נכול לראות מספר דברים בפרויקט

בתוך src/app

• אנחנו נראה קובץ app.config.ts
• אנחנו לא נראה קובץ module

אנחנו נראה שיש לנו גם קובץ routes, אז נשאלת השאלה, איך הראוט מחובר לשאר הפרויקט אם אין לנו מודול?

התשובה היא ב-app.config.ts.

אם נכנס אליו אנחנו נראה שבתוך הקונפיג יש קריאה ל-routes.

זה נראה כך:

providers: [provideRouter(routes)]

וזה הזמן לדבר על התפקיד של הקובץ הזה.

בקצרה, אם אנחנו רוצים שמשהו יהיה זמין באופן גלובלי באפליקציה, כמו סוג של app.module, זה המקום לשים אותו. לא ניתן לשים בו כל דבר אבל אנחנו נחזור אליו בהמשך ונעדכן אותו.

אם נסתכל על app.component.ts נראה שהתווספו לו ערכים חדשים בהגדרת הקומפוננטה

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})

עכשיו יש לו דגל שאומר שהוא standalone ובנוסף יש לו imports, מאוד דומה למה שהיינו מצפים לראות במודול

אפשר לראות שהוא מייבא את את commonModule, בגלל שיש לו את התגית router-outlet ב-HTML אז אנחנו רואים גם את RouterOutlet בשורה 4.

זה הזמן להתחיל לפתח קצת את הפרויקט שלנו.

בתוך ספרית APP , ניצור ספריה נוספת בשם pages וספריה נוספת (לא בתוכה) בשם components.

נפתח טרמינל (CMD) בתוך ספרית pages ונריץ את הפקודה הבאה:

ng g c home

הפקודה תייצר ספריה בשם home בתוך pages ושם יהיו לנו 4 קבצים:

1. home.component.html
2. home.component.ts
3. home.component.scss
4. home.component.spac.ts

בגירסה 16 ומעלה אין צורך להגדיר לאנגולר שמדובר ב-standalone components, בגלל שהפרויקט מוגדר כך אז באופן אוטומטי הוא מייצר את הרכיבים בהתאם.

אם נסתכל על התוכן של קובץ ה-TS הוא יראה כך:

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss'
})
export class HomeComponent {

}

נחזור לראוט שלנו ונבקש ממנו לטעון את home כברירת מחדל.

import { Routes } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';

export const routes: Routes = [
    {
        path: '', component: HomeComponent
    }
];

נשמור את הכל ואם לא הרצנו את הפרויקט אז זה הזמן להריץ אותו:

ng s

אם פורט ברירת המחדל לא תפוס, אז נגלוש לכתובת URL הבאה:

http://localhost:4200/

אנחנו נראה בחלק העליון של הדף את הסמל של אנגולר, אחרי זה HELLO, עוד מספר לינקים צבעוניים וקצת מלל.

אחרי זה אנחנו נראה home works!

זה רכיב הבית שלנו 😊

אם תסתכלו על הטרמינל שבו הרצתם את הפרויקט הוא יראה כך:

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  82.71 kB | 
main.js             | main          |  24.46 kB | 
styles.css          | styles        |  96 bytes | 

                    | Initial Total | 107.27 kB

עכשיו נעשה שינוי קטן ונראה מה יקרה.

נחזור לקובץ הראוט שלנו ונעשה את השינוי הבא:

import { Routes } from '@angular/router';

export const routes: Routes = [
    {
        path: '', loadComponent: () => import('./pages/home/home.component').then(p => p.HomeComponent)
    }
];

נשמור את השינויים, למרות שממש אין צורך אנחנו נעצור את הטרמינל ונפעיל שוב, רק כדי לראות את השינוי בקבצים:

ng s

Initial Chunk Files | Names          |  Raw Size
polyfills.js        | polyfills      |  82.71 kB | 
main.js             | main           |  23.34 kB | 
styles.css          | styles         |  96 bytes | 

                    | Initial Total  | 106.15 kB

Lazy Chunk Files    | Names          |  Raw Size
chunk-P66RUYMM.js   | home-component |   1.16 kB | 

עכשיו מה שאפשר לראות הוא שנוספה קטגוריה נוספת, שורה 10 – lazy.

בשורה 11 אנחנו יכולים לראות את הרכיב שלנו home.

מה שקורה עכשיו הוא, טעינה רק כאשר אנחנו גולשים לנתיב הספציפי הזה. זאת אומרת, שבמידה ודף בית מבצע משיכות של רכיבים אחרים ומודולים וספריות שלא קיימות בדף אחר, אז כל הקריאות לא יתבצעו עד לרגע שנגלוש לדף הבית.

כך אנחנו נעבוד במידה שיש לנו מספר דפים, וכל דף קורא לרכיבים משלו. אין לנו צורך למשוך קוד שאין לנו שימוש בו.

לא לדאוג, כל פיסת של קוד שאנחנו קוראים לה נרשמת באנגולר ואם היא קיימת אז לא תתבצע קריאה נוספת לייבא את המידע שוב במידה שהמשתמש הלך לדף אחר וחזר לדף הבית.

בפוסט הבא ניצור עוד רכיבים ונחבר אותם לשירות 🥸

פוסטים קשורים:

מדריך angular standalone component חלק 2 Angular nested routes Angular Microfrontend Module Federation Tutorial – Part 2 Angular Microfrontend Module Federation Tutorial – Part 3