A Roadmap to the Features of Updated Version v.10 of Angular

Angular (generally referred to as “Angular 2+” or “Angular v2 and above”), is a Typescript based web application framework which is managed by Google and its communities across the globe. A web framework or web application framework is a software framework primarily designed to support web applications development comprising of web services, web resources, and web APIs.

These resources altogether are important to embark on the digital presence of a brand. Thus it becomes of utmost importance for us to get updated with the latest tech tools to embrace our digital marketing strategy in the most effective way. StarTele Logic has always been at the forefront of the latest technological adoptions with its expert developers who are ready to learn the application of every vertical of the tech industry.

So, for all the tech enthusiasts and curious developers, we put before you a short description of the updated and new version of Angular which is the 10th one in the series or v10. Hence, let us see some of the major updates the new Angular package has to offer;

—Some of the Major Breakthroughs—

Continuing Support & Updates for TypeScript (v3.9 in this version)

The former version of Angular, v9, was released with TypeScript 3.7 support. Later, this version was updated to TypeScript 3.8 with Angular v9.1. The same tradition is followed in the consecutive version v10, it supports the TypeScript version 3.9. Apart from this, only TypeScript but TSLib and TSLint are also supported in the latest update.

Now in terms of updates for TypeScript v3.9, it has performance improvements that help in the faster development of larger Angular projects. It will help developers by providing a more elaborated TypeScript configuration with its latest features and fixes for Angular developers.

Support for the previous versions of the TypeScript is no longer available, hence developers need to install the latest version v3.9, and some of the crucial reasons behind this are described in the following sections.

Support for “Solution Style” tsconfig.json Files

The newer version of TypeScript v3.9 comes with the “Solution Style” tsconfig.json file. It is done so take the control of events where tsconfig.json referred to the other tsconfig.json files called “Solution”. Therefore, it improves the IDE support and enhances the developer experience.

The file in the root of the tsconfig.json was shifted under the new file named as tsconfig.base.json, and the changes in the new tsconfig.json at the root level when assigning library to the project would be:

Before:

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

After:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.spec.json"
    },
    {
      "path": "./e2e/tsconfig.json"
    },
    {
      "path": "./projects/core/tsconfig.lib.json"
    },
    {
      "path": "./projects/core/tsconfig.spec.json"
    }
  ]
}

The Format Changes in the Angular Package & esm5/fesm5

The updated version of the Angular Package does not include esm5 & fesm5 distributions. And as Angular generates ES5 from ES2015 & ES2015 is the default language level used by Angular tooling, hence making those code distributions outdated. The format change can be observed as follows:

Before:

{
  ...
  "main": "bundles/abp-ng.core.umd.js",
  "module": "fesm5/abp-ng.core.js",
  "es2015": "fesm2015/abp-ng.core.js",
  "esm5": "esm5/abp-ng.core.js",
  "esm2015": "esm2015/abp-ng.core.js",
  "fesm5": "fesm5/abp-ng.core.js",
  "fesm2015": "fesm2015/abp-ng.core.js",
  ...
}

After:

{
  ...
  "main": "bundles/abp-ng.core.umd.js",
  "module": "fesm2015/abp-ng.core.js",
  "es2015": "fesm2015/abp-ng.core.js",
  "esm2015": "esm2015/abp-ng.core.js",
  "fesm2015": "fesm2015/abp-ng.core.js",
  ...
}

However, despite these updates, if your application is based on esm5/fesm5 then there isn’t anything to worry about as they are still compatible with the build system.

Browserlist Configuration

The root app folder in the Angular contains bundles based on Browserlist Configuration. Updated Angular version v10 will look up for .browserlistrc in your app and if it is unable for locate it, it will get back to browserlist. You can rename your file with the help of the ng update command.

Some Noteworthy Changes

• If the value comprises of the numeric length property then only minLength and maxLength validators will be valid.
• In the case of type ‘UrlMatchResult’, type null is not assignable but in this version, null can also be a return type.
• Initially, there was a bug in the day while using formatDate() or DatePipe and b or B format code. It is fixed with an update of “at night” instead of “AM”.
• There were detection issues in the Transplanted views (it was declared in one component and inserted into another). It is fixed now and double detection and detection after detaching are nullified.
• Resolvers returning EMPTY will cancel the navigation. But to allow the router to continue navigating to the route, you can let go of some values such as of(null).
• In the templates section, logging of unknown property bindings or names of elements is modified to “error” which was “warning” in the former updates.

—Deprecations and Removals—

Removal of ModuleWithProviders without a Generic Type

The former updates of the Angular tend to compile the static return methods with ModuleWithProviders type without generic type, i.e. ModuleWithProviders because the generated files such as metadata.json already contained the information for compilation. But as of now, we do not require metadata.json as the generic type for type validation is already checked by Angular.

Before:

@NgModule({...})
export class SomeModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SomeModule,
      providers: [...]
    };
  }
}

After:

@NgModule({...})
export class SomeModule {
  static forRoot(): ModuleWithProviders<SomeModule> {
    return {
      ngModule: SomeModule,
      providers: [...]
    };
  }
}

ModuleWithProviders without a generic type was deprecated in the former versions. In the latter version v10, it is completely removed.

Conclusion

Although technology updates itself from time-to-time, getting with the flow is of utmost importance for a developer or an individual. We at StarTele Logic from our past learning experiences can tell that lagging in the technical vertical lets your business gets down and gives a push to your competitors in the market.

Hence, not only having correct tools is necessary but also an expert and experienced team to implement that become more necessary in the current competitive scenario. We are thankful to the Angularjs web development company and community for bringing such indigenous updates through which we could strategically better implement the ideas of our clients and bring them to reality. Get in touch with custom software development company if you are looking for a plethora of opportunities to bring down your solutions to real-life products in an effective and budget-conscious manner.