Improvements in Angular and 15

1) Inject Services in Angular 14 Without a Constructor Using inject.
Previously, a class with a constructor was always required to inject any service:

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

Now, we can inject a service in both functions and classes. We just need to declare a variable and set it equal to inject with the service name inside:

const myService = inject(MyService);
This is useful, for example, in interceptors and guards, which are now commonly done with functions instead of classes.

2) Self-Closing Tag to Save Lines in Angular 15.
Starting with this version, you can use a component with a single tag:

Before, it was necessary to open and close a component tag to use it:

3) Reduce Your Imports in Angular by Creating Shortcuts.
Instead of having long imports like these:

import { MyComponent } from '../../components/my-component';
You can shorten imports like this:

import { MyComponent } from '@components/my-component';
To achieve this, go to the tsconfig.json file and add paths under the compilerOptions property. Inside paths, you can configure your own import shortcuts:

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

The recommendation is that if you’re within a component and want to use something specific to that component, import it relatively using ./ to access that resource. But when accessing a parent folder, use the @ shortcut. If it gives you issues, you may need to close and reopen Visual Studio Code. These small details make a difference in keeping the code as organized as possible.

4) Optimize Image Loading with the NgOptimizedImage Directive in Angular 15.
If we have a list with 15 images and iterate through them normally using [src], we’ll face the issue of loading all 15 images at once when the application starts, which reduces performance:

To fix this, Angular provides the NgOptimizedImage directive. To use it, just import it:

import { NgOptimizedImage } from '@angular/common';
And use [ngSrc] instead of [src]. This will load images lazily, improving performance. However, the directive has many other configurations. If you only want lazy loading, I recommend using the loading="lazy" attribute, which is part of the HTML standard and is compatible with all browsers:

A recommendation: if you have a main image at the top of the menu, do not set it to lazy loading, as it will be the first to load when the app opens. Apply this only to images that might appear below the scroll, as we don’t need them to load right away.

This is very important for public applications, such as SSR apps that need good SEO, as it helps improve performance.

— Notes based on the Angular course by EfisioDev —

The above is the detailed content of Improvements in Angular and 15. For more information, please follow other related articles on the PHP Chinese website!