Angular 13. What's new

Angular 13 was recently released, let me tell you what I consider to be the most relevant changes.

Build Cache

You can now cache your builds, so if a module hasn't changed, Angular doesn't have to rebuild it. That alone will improve your build speed by around 68%.

{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "all"
    }
  }
}

{
  "cli": {
    "cache": {
      "enabled": true,
      "path": ".angular/cache",
      "environment": "all"
    }
  }
}

TestBed Destroy After Each

Tests are now faster because Angular does a better job of tearing down after each test. That introduced some race conditions in my codebase, so I had to turn that off. I'd say it needs a few weeks to become stable.

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: false } }
);

getTestBed().initTestEnvironment(
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting(),
  { teardown: { destroyAfterEach: false } }
);

Dropped Support for Internet Explorer 11

Finally, we're dropping support for Internet Explorer 11, which allows Angular to leverage modern browser features, such as CSS variables.

Dependency Updates

TypeScript 4.4 and RxJS 7.4 are now supported! I made a video on RxJS 7, the link is in the description.

Dynamically create components

If you create components dynamically, good news, you don't need the component factory anymore, just use ViewContainerRef.createComponent

const componentFactory =
  componentFactoryResolver.resolveComponentFactory(Component);

const componentRef = componentFactory.create(injector);

viewContainer.insert(componentRef.hostView);

const componentRef = viewContainer.createComponent(Component);

const componentFactory =
  componentFactoryResolver.resolveComponentFactory(Component);

const componentRef = componentFactory.create(injector);

viewContainer.insert(componentRef.hostView);

const componentRef = viewContainer.createComponent(Component);

Conclusion

References are below. Subscribe if you're into web development, and have a great day.

References

1. Angular v13 is now available
2. Internet Explorer 11 support deprecation and removal
3. Advantages of Dropping Support for Internet Explorer 11