BT

Facilitating the spread of knowledge and innovation in professional software development

Contribute

Topics

Choose your language

InfoQ Homepage News Introducing Angular 13

Introducing Angular 13

This item in japanese

Bookmarks

Google recently announced the release of Angular 13, their popular single-page application framework, continuing the steady stream of small improvements we have seen since the release of the Ivy engine in Angular 9.

Angular 13 provides an update to the component API removing the need to use the ComponentFactoryResolver factory. Instead, new components can now be created using the ViewContainerRef.createComponent, reducing the boilerplate code needed to create components dynamically.

In addition, the legacy "View Engine" that was replaced by Ivy in Angular 9 is finally phased out. The process was initially delayed in order to give library maintainers a chance to migrate to the new engine. The move will reduce dependency on the angular compatibility compiler, which should enable faster builds in the future.

Angular 13 also sees the deprecation of Internet Explorer 11. While the official end-of-life date for Internet Explorer is still several months away, the low usage statistics coupled with the maintenance overhead spurred the Angular team to proceed with an earlier deprecation.

Projects that still support IE11 are advised to continue to use Angular 12, which will receive support past the planned end-of-life date of IE11.

On the compilation front, the Angular CLI will now use persistent build-cache by default for new Angular 13 projects. In most cases, this change should provide build time improvements of up to 68%.

Existing projects can enable the feature by making the following change to the cli.cache configuration:

 

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

Angular 13 also enables the new tear-down process for TestBed by default. This feature was introduced in Angular 12.1.0. The new process clears the DOM after every test, resulting in more independent tests and a lower memory footprint.

Existing projects can enable this feature by updating the TestBed.initTestEnvironment method with the following code:

 

beforeEach(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(
        BrowserDynamicTestingModule,
        platformBrowserDynamicTesting(),
        {
            teardown: { destroyAfterEach: true }
        }
    );
});

Finally, Angular 13 adopts TypeScript 4.4 and RxJS to 7.4. While TypeScript will be updated automatically for existing applications, RxJS will need to be upgraded manually as it includes some breaking changes.

While upgrading Angular projects is often straightforward, developers are advised to use the interactive upgrade guide at https://update.angular.io/.

For the full release announcement, head to the official Angular blog post.

Angular is open-source software available under the MIT license. Contributions are welcome via the Angular GitHub repository.

Rate this Article

Adoption
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Community comments

  • Is this... ?

    by Ian Marteens,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Is this the Omicron variant of Angular? Or did we already hit the Omega one?

  • Re: Is this... ?

    by aldo praherda,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    it is sylvie variant

  • angular.json changes needed?

    by Philipp Weixlbaumer,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    I don't think the cache code (for angular.json) you mentioned is needed for existing projects. My upgraded angular 12 project started using the cache right away (Build times of ~3 seconds instead of the initial 10 sec). Also the cache path in my project is .angular/cache by default (which also makes sense to add to .gitignore for existing projects).

  • Re: angular.json changes needed?

    by Guy Nesher,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Thanks for the comment.

    Persistent disk cache (angular.io/cli/cache) was introduced in Angular 12.1 but required users to opt-in.

    The official blog suggests that you will need to migrate manually, though I admit I've not had a chance to verify it myself (we've previously enabled this feature as well and seen similar improvements). I'll try to verify this.

    You are correct regarding the file name, bad copy-pasting on my part, fixing the article now

  • Re: angular.json changes needed?

    by Philipp Weixlbaumer,

    Your message is awaiting moderation. Thank you for participating in the discussion.

    Thanks for getting back to me. Ah ok got it, I missed this for v12.1 - seems to me though as if with 13 it's on by default also for existing projects, but you're right, official blogs says only for new projects.
    Oh well, I'm happy if it's working and increasing my build speeds as it does. It's also pretty easy to check if the projects uses the cache by looking for .angular/cache folder and / or compare your post-initial build times to initial :)

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

BT