Wednesday, 17 March 2021

Angular 11 New Features

Hello Friends,  

 

In this article, I will explain Angular Version 11 new features.  Version 11 of Angular has been released on Nov 12, In Angular Version 11 having below listed features.






New features and changes in Angular 11

Component test harnesses

Component test harnesses is a new feature that was added to Angular with the release of Angular Version 9. It was used to test Angular material components and it also provides a robust and legible API surface to help developers while testing material components.

 

TypeScript 4.0 support

The new Angular 11 upgraded the supports for TypeScript from version 3.9. Now, Angular also supports TypeScript 4.0. The goal with this update is to improve the build speed. So, the new Angular ensures an improvement in the build system speed from the older versions and also updates the speed of ngcc.

webpack 5 support

webpack is a tool that lets developers compile larger JavaScript modules. It is also known as a module bundler. It compiles a large number of files and generates a single file that can run an app. The new webpack 5 was released last month, but is not fully stable for use. The new Angular 11 supports the latest release of webpack. The reason it supports the new webpack is because Angular wants to achieve

 

 

Automatic Inlining of Fonts

 

One of the new features introduces automatic font inlining in Angular 11, which means during compile time Angular CLI will download and inline fonts that are being used and linked in the application. 

 

The inlining font is the default behavior in apps built with angular 11, so if you want to take and benefit from this advantage we need to do update our angular application to the angular 11 version.

 

Component Test Harnesses

 

In Angular 9 there was this component test harness that provided a readable and robust API based for testing Angular material components with the supported API at test. With this new version 11, we now have harnesses for all components, so even more test suites can now be built by developers.

 

Improved Reporting and Logging

 

The next one Angular 11 has a lot of improvements in the new CLI output to make logs and reports easier to read. You can see the logs and generated files. Please refer to the below images.

 

Updated Language Service Preview

 

Angular 11 makes development with Angular more productive. The Angular team has introduced the Angular Language Service, which provides helpful tools.

 

The previous Angular 10 versions of the language service are based on View Engine. From now on, we have a sneak peek of the Ivy-based language service. The updated language service provides a more powerful and accurate experience for developers in the Angular 11 version.

 

For example, now the language service will be able to correctly infer generic types in templates the same way the TypeScript compiler does.

 

Updated Hot Module Replacement (HMR) Support

 

In version 11 they’ve updated the CLI to allow enabling HMR when starting an application with ng serve. To run the following command:

 

ng serve --hmr

 

 Faster Builds

 

The Angular 11 supported typescript version 4.0. Angular is one of the fastest frameworks. Angular 11 allows for faster development and building the application.

 

In Angular 11 when we install dependencies, the ngcc update process is now 2–4x faster and compilation is also faster in the updated version.

 

Experimental webpack 5 Support

 

Now webpack version 5 will let you make faster builds with continuousdisk caching and smaller bundles.

 

If we need to enable webpack our project, please add the following code to the package.json file:

 

1.    "resolutions": {  

2.      "webpack": "5.4.0"  

3.   }  

 

 

Currently, we need to test this, as npm does not yet support the resolutions property.

 

 

 

How to update to Angular version 11

 

If we need to update Angular 10 or the old version needs to be updated to the latest version, Angular 11, please execute the below line in the command section:

 

ng update @angular/cli @angular/core

 

Happy programming!!
Don’t forget to leave your feedback and comments below!
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
------------------------------------------------------------------------------

Wednesday, 13 January 2021

Different JSON files in ASP.net Core

 Hello Friends,  


In this article, I will explain .NET CORE JSON files

  • What are configuration JSON files in ASP.net Core?
  • Different configuration JSON files in ASP.net Core
  • Why we need configuration.json files in ASP.net Core




What are configuration JSON files in ASP.net Core?

ASP.net Core is re-architected from prior versions of ASP.net, where the configuration was relying on System.Configuration and XML configurations in web.config file. In ASP.net Core, a new easy way to declare and access the global settings for a solution, project-specific settings, client-specific settings, etc. The new configuration model works with XML, INI, and JSON files.
 

Different configuration JSON files in ASP.net Core

There are mainly 6 configuration JSON files in ASP.net Core.

  • global.json
  • launchsettings.json
  • appsettings.json
  • bundleconfig.json
  • project.json
  • bower.json

1. global.json :

You can define the solution level settings in the global.json file. If you will open the global.json file, you will see the below code:

a. Projects: projects property defines the location of source code for your solution. It specifies two locations for projects in the solution: src and test.src contains actual application and test contains any test.

 

2. launchsettings.json :

In launchsettings.json file, You can define project-specific settings associated with each profile Visual Studio is configured to launch the application, including any environment variables that should be used. You can define a framework for your project for compilation and debugging for specific profiles.


3. appsettings.json:

ASP.NET stores application configuration settings in Web. config. ASP.NET Core uses AppSettings.json to store custom application settings, DB connection strings, Logging, etc.. Below is a sample of Appsettings.json:


4.bundleconfig.json

You can define the configuration for bundling and minification for the project.


5. project.json:

Asp.net Core uses Project.JSON file for storing all project-level configuration settings.The Project.json file stores configuration information in JSON format.


6/ bower.json :

Bower is a package manager for the web. Bower manages components that contain HTML, CSS, JavaScript, fonts or even image files. Bower installs the right versions of the packages you need and their dependencies. With ASP.NET core, jQuery and bootstrap packages are already installed and bower, gulp and NPM are already in place. Client-side packages are listed in the bower.json file.



Hope this helped you  
Happy Programming!!
Don’t forget to leave your feedback and comments below!
If you have any query mail me to Sujeet.bhujbal@gmail.com     
Happy programming!!
Don’t forget to leave your feedback and comments below!
Regards
Sujeet Bhujbal
--------------------------------------------------------------------------------
------------------------------------------------------------------------------

 




Thursday, 27 August 2020

Migrate Asp.Net MVC 5 to .NET Core 3.1

.Net Core

 

I am working on a project with Asp.Net MVC 5 and we need to migrate this project to Asp.NET Core 3.1.

 I’ve found a few resources, blog posts, videos, and libraries that can help us with an upgrade to Asp.Net Core. In this post, I’m going to share them with you. So We used the below tool to check portability