1) इंजेक्ट का उपयोग करके कंस्ट्रक्टर के बिना एंगुलर 14 में सेवाएं इंजेक्ट करें।
पहले, किसी भी सेवा को इंजेक्ट करने के लिए हमेशा एक कंस्ट्रक्टर वाले वर्ग की आवश्यकता होती थी:

class MyClass {
  constructor(private myService: MyService) {}
}

अब, हम फ़ंक्शन और क्लास दोनों में एक सेवा इंजेक्ट कर सकते हैं। हमें बस एक वेरिएबल घोषित करने और इसे अंदर सेवा नाम के साथ इंजेक्ट करने के लिए बराबर सेट करने की आवश्यकता है:

const myService = inject(MyService);
यह उपयोगी है, उदाहरण के लिए, इंटरसेप्टर और गार्ड में, जो अब आमतौर पर कक्षाओं के बजाय फ़ंक्शन के साथ किया जाता है।

2) एंगुलर 15 में लाइन्स को सेव करने के लिए सेल्फ-क्लोजिंग टैग।
इस संस्करण से प्रारंभ करके, आप एकल टैग वाले घटक का उपयोग कर सकते हैं:

इससे पहले, किसी घटक टैग का उपयोग करने के लिए उसे खोलना और बंद करना आवश्यक था:

मेरा-घटक>

3) शॉर्टकट बनाकर एंगुलर में अपना आयात कम करें।
इस तरह लंबे आयात करने के बजाय:

'../../components/my-component' से { MyComponent } आयात करें;
आप इस तरह आयात को छोटा कर सकते हैं:

'@components/my-component' से { MyComponent } आयात करें;
इसे प्राप्त करने के लिए, tsconfig.json फ़ाइल पर जाएँ और compilerOptions प्रॉपर्टी के अंतर्गत पथ जोड़ें। पथों के अंदर, आप अपने स्वयं के आयात शॉर्टकट कॉन्फ़िगर कर सकते हैं:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

सिफारिश यह है कि यदि आप किसी घटक के भीतर हैं और उस घटक के लिए कुछ विशिष्ट का उपयोग करना चाहते हैं, तो उस संसाधन तक पहुंचने के लिए ./ का उपयोग करके इसे अपेक्षाकृत आयात करें। लेकिन मूल फ़ोल्डर तक पहुँचते समय, @ शॉर्टकट का उपयोग करें। यदि यह आपको समस्याएँ देता है, तो आपको विज़ुअल स्टूडियो कोड को बंद करने और फिर से खोलने की आवश्यकता हो सकती है। ये छोटे विवरण कोड को यथासंभव व्यवस्थित रखने में अंतर लाते हैं।

4) एंगुलर 15 में एनजीऑप्टिमाइज्डइमेज डायरेक्टिव के साथ इमेज लोडिंग को ऑप्टिमाइज़ करें।
यदि हमारे पास 15 छवियों वाली एक सूची है और सामान्य रूप से [src] का उपयोग करके उनके माध्यम से पुनरावृत्त किया जाता है, तो एप्लिकेशन शुरू होने पर हमें सभी 15 छवियों को एक साथ लोड करने की समस्या का सामना करना पड़ेगा, जिससे प्रदर्शन कम हो जाता है:

इसे ठीक करने के लिए, एंगुलर एनजीऑप्टिमाइज्डइमेज निर्देश प्रदान करता है। इसका उपयोग करने के लिए, बस इसे आयात करें:

'@angular/common' से { NgOptimizedImage } आयात करें;
और [src] के बजाय [ngSrc] का उपयोग करें। यह छवियों को आराम से लोड करेगा, प्रदर्शन में सुधार करेगा। हालाँकि, निर्देश में कई अन्य कॉन्फ़िगरेशन हैं। यदि आप केवल आलसी लोडिंग चाहते हैं, तो मैं लोडिंग = "आलसी" विशेषता का उपयोग करने की सलाह देता हूं, जो HTML मानक का हिस्सा है और सभी ब्राउज़रों के साथ संगत है:

एक अनुशंसा: यदि आपके पास मेनू के शीर्ष पर एक मुख्य छवि है, तो इसे आलसी लोडिंग पर सेट न करें, क्योंकि ऐप खुलने पर यह सबसे पहले लोड होगा। इसे केवल उन छवियों पर लागू करें जो स्क्रॉल के नीचे दिखाई दे सकती हैं, क्योंकि हमें उन्हें तुरंत लोड करने की आवश्यकता नहीं है।

यह सार्वजनिक अनुप्रयोगों के लिए बहुत महत्वपूर्ण है, जैसे एसएसआर ऐप्स जिन्हें अच्छे एसईओ की आवश्यकता होती है, क्योंकि यह प्रदर्शन को बेहतर बनाने में मदद करता है।

— एफिसियोडेव द्वारा एंगुलर कोर्स पर आधारित नोट्स —