Angular 10 - Towards the Better future for Angular

Angular 10 is released, many developers sent me messages asking we cannot see any features, yes there was no big feature, but sometimes you need to take some time to prepare for a better future, and this is what Angular 10 release was all about.

Let’s see what was included in the release and why it is important for a better future for the Angular framework.

New Features#

Typescript 3.9:#

Angular 10 supports Typescript 3.9 now, support for previous versions of typescript is removed. Typescript 3.9 comes with some bug fixes and minor improvements before the 4.0 gets released with some great features.

Solution-style TypeScript configurations:#

Typescript 3.9 added a solution style typescript config, in earlier versions, we had one tsconfig.json which was extended by tsconfig.app.json and tsconfig.spec.json, now tsconfig.json is used by editors to improve the developer experience, it specifies the path for different tsconfig file used within the application, and a new tsconfig.base.json is used by the compiler. This is how your tsconfig.json looks like now.

{
  "files": [
  ],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    }
  ]
}
<>

Stricter configurations when using the --strict flag:#

Strict flags were available with Ivy in Angular 9, but it can generate lot of errors if you application is not following the correct types, and you may choose to disable it, Angular team chose not to create an application with strict flags by default, rather create a new app with --strict flag which will add few compiler options to your tsconfig.base.json.

Creating an App with --strict flag also adds a new package.json in your appfolder. The package.json has a property to provide a flag called sideEffects this is set to false to enable tree-shaking of unused imports, sideeffects are something which changes the application behavior like polyfills, they can not be tree-shaked.

You can see all different compiler options on Angular Docs

Narrower browser target configuration:#

Angular uses .browserslistrc to determine for which browsers we need to compile the app, prior to Angular 10, Angular was supporting more versions of browsers. Angular 10 drops the support for IE 9-10 and IE 11 is supported in Opt-in. It means by default you will not get differential loading enabled, when new Angular 10 app is created, but if you migrate from previous version, differential loading will work. Angular 10 supports only last 1 version of Chrome and Firefox, for Edge, Safari and iOS last 2 major versions are supported.

#angular #angular10 #angular-material #angular-cli