fbpx
Select Page

The new version of Angular 10 has been published on date 24 june 2020 .Angular 10 has the major upgrade for the popular web development framework. The upgrade to the Google-developed, TypeScript-based framework puts more importance on excellence, tool, and ecosystem improvements than new features.The newer version Angular 10 is smaller than the previous version i.e Angular 9. In the Angular 10 having the new capabilities like a new date range picker in the Angular Material User Interface Library and also having the warning for CommonJs imports. CommonJs warning alerts developers when slower the application, when a dependency packaged with CommonJs and allowing to substitute an ECMAScript module bundle.

 In adding up, optional stricter settings offer a more-strict application setup when creating a new workspace with  the cli command ng new, via ng new – strict.Enabling this flag initializes a new application with new settings to improve maintainability, allow the CLI to do advanced optimizations on an app and helps catch bugs. Now we jump towards the new features in depth and how to migrate to the Angular 10 version.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Major Changes In Angular 10
“Solution Style” tsconfig.json Files

One of the new features of Angular 10  is the support for “Solution Style” tsconfig.json files. This allows IDEs to more simply find which project a TS file belongs to, when you have a number of tsconfig files.

As an Angular CLI application does have a number of tsconfig files, this upgrading is useful to us! The CLI now generates applications with a base tsconfig, extended by the app one,  the e2e tests one and the  unit tests one. The tsconfig.json file now only references the others. If you update your application using the ng update CLI command, schematics will automatically do this refactor for you.

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”

    },

    {

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

      “path”: “./projects/core/tsconfig.lib.json”

    },

    {

      “path”: “./projects/core/tsconfig.spec.json”

    }

  ]

}

If you upgrade your current angular version  to Angular 10 using ng update , the CLI will transfer your workspace to this structure. Earlier versions of TypeScript do not support “solution style”, so this may be the cause behind the breaking change described above.

Supports TypeScript v3.9 [breaking change]

In the previous version of Angular 9 TypeScript 3.7 is supported. presently TypeScript 3.8 was released and Angular v9.1 supported it.  After TypeScript 3.8  another TypeScript version, 3.9, is released and Angular responds with v10, keeping up, not only with TypeScript, but also with TSLint and TSLib. Due to the  TypeScript 3.9 performance improvement the Angular builds faster for the larger application.All the latest  features and TypeScript fixes are available to Angular developers.

 Browserlist supported in Angular 10

Angular generates bundles based on the Browserlist arrangement provided in the root app folder. Angular 10 will look up for a .browserlistrc in your app, in case if not found  browserlist  in your application then just execute the ng update command  that will rename the file in your application root app folder.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Breaking Changes
  • Resolvers that return EMPTY will terminate navigation. In order to allow the router to continue navigating to the route, release  or emit some value such as of(null).
  • Reactive forms had some bugs which caused valueChanges for controls bound to input fields with number type to fire twice. The listed event is changed from “change” to “input” to fix the valueChanges problem.
  • Templates Element names are increased to “error” level. It was “warning” in previous versions of angular.
  • Returning null from a  UrlMatcher would throw Type ‘null’ is not assignable to type ‘UrlMatchResult’in the previous version and assign UrlMatchResult type to null.
  •  In the input field of form minLength and maxLength validators validate only if the value has a numeric length property.
  • There was a bug in finding a day span while using formatDate() or DatePipe and b or B format code. It is fixed and the output, instead of “AM” will now be “at night”.
  • Inherited views (declared in one component and inserted into another) had change detection issues, but that is fixed. double detection  and Detection after detaching are avoided.

 Angular Material Date Range Picker

Angular Material is now added as a Date Range Picker. It’s the most awaited component that most of the application required. Angular Team released this awesome component in current version.If users want to select date range instead of single date then we need to use simply  mat-date-range-input and mat-date-range-picker components.They work similarly to the mat-datepicker and the basic datepicker input. mat-date-range-picker component will appear as follows:

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Angular Package Format Changes & esm5/fesm5

  Angular package format has changed in Angular 10, and the new format does not include fesm5    and esm5 distributions any longer. Angular packages (@angular/*) will not include fesm5 and esm5. Since Angular generates ES5 from ES2015 and ES2015 is the default scripting language level consumed by Angular tooling, those code distributions have become outdated. The format change is 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”,

}

If your application depends on fesm5/esm5 files, you can settle down, because they are still consumable by the build structure. Likewise, you do not have to be troubled if your Angular library does not transport esm2015 or fesm2015, because the CLI will fallback to others. However, in a good turn of bundle optimization and build speed improvement, it is suggested to deliver ES2015 outputs. We have made several new removals and deprecations from Angular.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

The Angular Package Format no longer includes FESM5  or ESM5 bundles, saving you 119MB of  install and  download time when running  npm or  yarn   install for Angular packages and libraries.

Based on deep discussion with the group of people, we are deprecating support for older browsers including Internet Explorer Mobile and IE 9, 10

 Module Without a Generic Type  and With Providers [removed]

Earlier versions of Angular were capable to compile static method proceeds with ModuleWithProviders type without the generic type, i.e. ModuleWithProviders<SomeModule>, because the generated metadata.json files would have the information required for compilation. After Ivy compiler, since metadata.json is not necessary, Angular checks the generic type for type validation or confirmation.

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 available in the previous version of angular. As of Angular 10, it is totally detached.

Undecorated Base Classes [removed]

If you are talking about the advantage of inheritance from classes that use Angular features such as Angular decorators or dependency injection, now you need to decorate those base classes as well. If you do not decorate these base classes with decorators then, Angular will throw an error about the missing decorator on the parent.

DEPENDENCY INJECTION:

Angular 10 compiler throws  below error when the Directive decorator is missing:

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

The component SomeComponent inherits its constructor from AbstractSome, but the concluding does not have an Angular decorator of its own. Dependency injection will not be able to determine the parameters of AbstractSome’s constructor. what’s more, add a @Directive decorator to AbstractSome, or add an explicit constructor to SomeComponent.

 

Decorator:

In this time Angular 10 compiler throws a less detailed error. The error looks as below:

Error:    Class is using Angular features but is not decorated. Please add an explicit Angular decorator.

I am sure any good angular developer not do that, but if you add the   Component decorator on the parent and remove the decorator on the child then, Angular 10 compiler will throw the error below:

 

Error: The class ‘SomeComponent’ is listed in the declarations of the NgModule ‘AppModule’, but is not a directive, a component, or a pipe. moreover remove it from the NgModule’s declarations, or add an proper Angular decorator.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

WrappedValue [deprecate]

   WrappedValue is probably removed with v12  and deprecated. if you have never heard of it before then read it from the angular.io.

WrappedValue is basically  useful to trigger change detection even when the same object instance was emitted/ produced. To improve the performance of change detection there is a performance cost angular team decided to drop.

As a side effect of this contempt, you may see more ExpressionChangedAfterItHasBeenChecked errors than before, because Angular would not throw an error when WrappedValue were evaluated as equal.

In case you face change detection issues, trigger change detection manually via detectChanges  or markForCheck   methods of the ChangeDetectorRef or try cloning the object.

Stricter applications

The –strict flag introduced in Angular version 9.1 for ng new now goes further:

  • –strict flag  enables strict: true in your tsconfig.base.json file, and adds a bunch of other flags. (noFallthroughCasesInSwitch,forceConsistentCasingInFileNames and noImplicitReturns)
  • –strict flag adds strictInjectionParameters and strictTemplates  to angularCompilerOptions in your tsconfig.base.json file.
  • –strict flag  generates an extra package.json file with sideEffects: false 
  • it lower the budget for initial load and component styles in angular.json, and adds the strict settings to the application schematics
  • — strict flag also  adds the no-any rule to your tslint.json file

 

Other Removals & Deprecations 

Support for IE Mobile and IE9, IE10, has been deprecated and will be dropped later. The increased complexity  and bundle size was the main reason. Bearing in mind even Microsoft dropped support for these browsers; it makes a lot of sense.

  • Angular stopped sanitizing the style property bindings. Due to this drop the support for legacy browsers (like IE6 and IE7) and the performance cost of having a sanitizer.
  • Bazel build schematics will not be continuous. The Angular team explained the reason and referred to this monorepo as a source to keep an look at on, if you are interested in building Angular with Bazel.

Where to download Angular 10

You can find the common release of Angular 10 on GitHub. To update your current Angular install version, you just need to run this command:

ng update @angular/cli @angular/core

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Conclusion

I would like to call attention to how thankful every angular developer that Angular team is trying to keep Angular up-to-date. This is a huge revelation and, in my humble opinion, just as meaningful as a state-of-art renderer. It is also very nice to see how easy it is to migrate an existing project into the Angular latest version. In short Angular 10 with new features like TSlib updated to TSlib 2.0, browser configuration for new application, Auto completion is being removed from HTML entities, such as &amp, because of doubtful value and a performance issue, generic has been made mandatory for ModuleWithProviders, TypeScript 3.9 is now featured and supported in angular 10, Previously, only one translation file per locale was permitted  now possible to Merging of multiple translation files and  A CanLoad guard returning Urltree cancels current navigation and redirects it.

Author-
Manisha Jadhav | SevenMentor Pvt Ltd.

Call the Trainer and Book your free demo Class for JAVA now!!!

call icon

© Copyright 2020 | Sevenmentor Pvt Ltd.

 

Pin It on Pinterest

× How can I help you?