What’s going on in Angular 15?

Angular 15 has made significant changes to the framework, providing developers with new tools to build better web applications. In this article, we will explore some before-after code changes that showcase the improvements in Angular 15.

One of the most significant changes in Angular 15 is the introduction of Ivy as the default rendering engine. Ivy offers several benefits over the older View Engine, including faster compilation times and better debugging capabilities. Here’s an example of how Ivy has improved the way we write code:

Before:

<ng-container *ngIf="isLoaded">
  <div *ngFor="let item of items">{{ item.name }}</div>
</ng-container>

After:

<div *ngIf="isLoaded; else loading">
  <div *ngFor="let item of items">{{ item.name }}</div>
</div>
<ng-template #loading>Loading...</ng-template>

In the before example, we use an ng-container element to conditionally render the div element that displays a list of items. With Ivy, we can use the else syntax to create a more streamlined and readable code. The ng-template element allows us to display a loading message until the data is loaded.

Another important enhancement in Angular 15 is the improved support for reactive programming. Reactive programming allows us to build highly responsive, event-driven applications. Here’s an example of how we can use reactive programming in Angular 15:

Before:

this.http.get('/api/items').subscribe((data) => {
  this.items = data;
});

After:

this.items$ = this.http.get<Item[]>('/api/items');

In the before example, we use the subscribe method to retrieve data from an API endpoint and set the items property to the data. With Angular 15, we can use the $ suffix to indicate that items is an observable. The code is much cleaner and more readable.

In addition to these changes, Angular 15 also comes with several performance optimizations that make the framework faster and more efficient. For example, differential loading is a new feature that generates two sets of JavaScript bundles, one for modern browsers that support ES6 and above, and one for older browsers that do not. Here’s an example of how we can use differential loading in Angular 15:

Before:

<script src="app.js"></script>

After:

<script src="app-es2015.js" type="module"></script>
<script src="app-es5.js" nomodule></script>

In the before example, we use a single JavaScript bundle that is loaded by all browsers. With differential loading, we can generate two bundles that are optimized for different types of browsers. This results in faster load times and better performance for all users.

Overall, Angular 15 has made significant changes to the way we write code. With Ivy as the default rendering engine, improved support for reactive programming, and performance optimizations like differential loading, we can build better web applications that are faster and more efficient. As developers continue to adopt the framework, we can expect to see even more innovation and growth in the Angular ecosystem in the years to come.

Another important change in Angular 15 is the enhanced support for server-side rendering (SSR). SSR is a technique that pre-renders web pages on the server before sending them to the client, resulting in faster load times and better search engine optimization (SEO). Here’s an example of how SSR has been improved in Angular 15:

Before:

const express = require('express');
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist/server/main');

const app = express();
app.get('*', (req, res) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    url: req.url,
    document: '<app-root></app-root>'
  }).then(html => {
    res.send(html);
  });
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

After:

const express = require('express');
const { ngExpressEngine } = require('@nguniversal/express-engine');
const { AppServerModule } = require('./src/main.server');

const app = express();
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule
}));
app.set('view engine', 'html');
app.set('views', 'dist/browser');

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(3000, () => {
  console.log('Listening on port 3000');
});

In the before example, we use the renderModuleFactory function to pre-render the app on the server. With Angular 15, we can use the ngExpressEngine function to configure Express to use Angular Universal, a package that simplifies server-side rendering. The new code is simpler and more efficient.

Angular 15 also introduces new APIs and enhancements that make it easier to work with the framework. For example, the new HttpClient module simplifies the way we make HTTP requests. Here’s an example of how we can use the HttpClient module in Angular 15:

Before:

import { Http } from '@angular/http';

constructor(private http: Http) {}

getData() {
  return this.http.get('/api/data').map(res => res.json());
}

After:

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

getData() {
  return this.http.get('/api/data');
}

In the before example, we use the Http module to make an HTTP request and parse the response. With Angular 15, we can use the new HttpClient module, which is easier to use and more efficient. The code is simpler and more readable.

So, Angular 15 brings significant changes and improvements to the framework, making it easier and more efficient to build web applications. With Ivy as the default rendering engine, improved support for SSR, new APIs and enhancements, and performance optimizations like differential loading, Angular 15 is a major step forward for web development. As developers continue to adopt the framework, we can expect to see even more innovation and growth in the Angular ecosystem.