ic_agile_128ic_banknote_smile_128ic_business_128ic_business_128ic_checkmark_128ic_client_team_manager_128ic_code_file_128ic_code_files_128ic_corporate_cloud_platforms_128ic_crossplatform_apps_128ic_dedicated_team_128ic_developer_128ic_development_team_128ic_enterprise_128ic_faster_timeframe_128ic_fixed_price_128ic_graph_down_128ic_graph_down_128ic_hourly_128ic_information_finder_128ic_junior_developer_128ic_managed_team_128ic_message_128ic_mobile_app_startups_128ic_mobile_development_128ic_mobile_development_up_128ic_mobile_devices_128ic_multiplatform_128ic_multiplatform_white_128ic_pricetag_128ic_project_checklist_128ic_project_management_128ic_project_management_team_128ic_research_and_development_team_128ic_scalable_team_128ic_senior_developer_128ic_smaller_codebase_128ic_smaller_price_128ic_startup_128ic_team_manager_128ic_three_times_faster_128K&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxK&C_Icons_32pxArrow_Dropdownic_001_google+_16ic_002_xing_16Group 2ic_003_facebook_16ic_004_linkedIn_16Groupic_005_message_16ic_006_upload_16ic_007_remove_16ic_008_email_16ic_009_attachment_16ic_010_file_16ic_011_name_16ic_012_arrow_left_16ic_013_arrow_right_16ic_014_arrow_down_16ic_015_arrow_up_16ic_016_dropdown_arrow_down_16ic_016_dropdown_arrow_leftic_016_dropdown_arrow_rightic_017_K&C_dropdown_arrow_up_16ic_018_language_16ic_019_Quote_16ic_020_+_16ic_021_=_16ic_022_phone_16ic_023_twitter_16ic_024_position_16ic_025_company_16ic_026_search_16ic_027_mobile_16ic_028_fax_16ic_029_location_16ic_030_enlarge_16ic_031_downscale_16ic_032_contactic_download_normal_16pxic_033_skype_16ic_006_download_16 copyic_Interest_based_64ic_acrivate_card_64ic_api_client_64ic_application_architecture_64ic_application_architecture_ white_64ic_application_development_user_64ic_arrow_down_64ic_automated_backups_64ic_automated_infrastructure_provisioning_64ic_automated_infrastructure_provisioning_white_64ic_automated_storage_64ic_automated_storage_64ic_automation_64ic_avaliability_across_the_world_64ic_avaliability_across_the_world_white_64ic_brackets_64ic_brackets_64ic_build_64ic_build_64ic_business_64ic_business_partnership_64ic_business_partnership_white_64ic_business_64ic_calculator_64ic_calendar_64ic_car_rent_64ic_card_renewal_64ic_chat_64ic_chat_bubbles_64ic_chat_bubbles_64ic_chat_white_64ic_checklist_64ic_checkmark_64ic_checkmark_white_64ic_clock_64ic_clock_white_64ic_cloud_media_64ic_cluster_64ic_cluster_white_64ic_code_base_optimization_64ic_coding_64ic_coding_white_64ic_commenting_widget_64ic_commenting_widget_64ic_containers_64ic_containers_white_64ic_continious_64ic_continious_delivery_64ic_continious_delivery_white_64ic_continious_release_64ic_continious_release_white_64ic_continious_white_64ic_cost_saving_64ic_cost_saving_white_64ic_cpu_load_64ic_credit_card_64ic_crossplatform_app_development_64ic_crossplatform_app_development_white_64ic_custom_crm_64ic_custom_crm_64ic_independence_consulring_64ic_database_calls_64ic_database_calls_white_64ic_dedicated_teams_64ic_dedicated_teams_64ic_desktop_application_user_64ic_desktop_application_user_64ic_desktop_code_64ic_desktop_code_white_64ic_developer_64ic_developer_white_64ic_development_64ic_devops_64ic_documents_64ic_documents_graph_64ic_documents_graph_white_64ic_documents_white_64ic_download_presentation_64ic_education_64ic_email_open_64ic_email_open_white_64ic_environment_healthcheckic_euro_64ic_euro_white_64ic_failure_solved_64ic_globe_outlines_64ic_good_quality_64ic_high_load_websites_64ic_high_load_websites_white_64ic_hotel_booking_64ic_inability_64ic_inability_white_64ic_increase_64ic_increasing_team_64ic_independence_64ic_integration_64ic_it_outsourcing_64ic_it_outsourcing_64ic_knowledge_sharing_64ic_mobile_devices_64ic_laptop_user_64ic_laptop_user_64ic_launch_64ic_launch_white_64ic_learning_64ic_learning_two_white_64ic_lighthouse_64ic_link_64ic_load_balancer_64ic_load_balancer_64ic_load_card_64ic_lock_64ic_lock_white_64ic_low_cost_64ic_low_load_websites_64ic_maintenance_tools_64ic_maintenance_tools_white_64ic_media_player_64ic_messaging_platforms_64ic_microservice_architecture_64ic_microservices_64ic_microservices_64ic_mobile_app_64ic_mobile_content_64ic_mobile_development_64ic_mobile_development_white_64ic_mobile_devices_64ic_mobile_devices_white_64ic_mobile_payments_64ic_mobile_social_media_applications_64ic_mobile_workflows_64ic_money_transfers_64ic_multimedia_sharing_64ic_multimedia_sharing_white_64ic_my_garage_64ic_no_access_64ic_no_access_white_64ic_no_oldschool_64ic_online_marketplaces_64ic_online_trading_64ic_online_trading_64ic_pair_device_64ic_parallels_64ic_parallels_white_64ic_passcode_64ic_performance_64ic_performance_issues_64ic_performance_issues_white_64ic_performance_white_64ic_plane_64ic_plane_white_64ic_plus_64ic_plus_64ic_pricetags_64ic_product_64ic_product_search_64ic_product_white_64ic_productivity_tools_64ic_productivity_tools_64ic_project_delivery_64ic_project_delivery_white_64ic_project_management_64ic_project_management_collaboration_64ic_project_management_team_64ic_project_management_team_white_64ic_project_risks_reduced_64ic_quality_mark_64ic_quality_mark_white_64ic_question_64ic_react_native_64ic_response_time_64ic_response_time_white_64ic_rest_api_64ic_retail_64ic_transparency_consulting_64ic_scale_up_64ic_scale_up_white_64ic_self_healing_64ic_self_healing_64 copyic_send_money_64ic_server_64ic_server_white_64ic_shopping_64ic_sleep_mode_64ic_small_is_beautiful_64ic_smaller_price_64ic_social_benefits_64ic_social_connections_64ic_socket_64ic_spare_parts_for_cars_64ic_spare_parts_for_cars_white_64ic_speedometer_64ic_performance_consulting_64ic_speedometer_white_64ic_startup_64ic_target_64ic_team_64ic_testing_64ic_testing_checklist_64ic_testing_checklist_64ic_testing_white_64ic_three_times_faster_64ic_touch_64ic_touch_id_64ic_touch_white_64ic_transparency_64ic_ui_design_desktop_64ic_ui_design_mobile_64ic_ui_design_mobile_white_64ic_umbrella_64ic_umbrella_white_64ic_up_and_down_scaling_64ic_up_and_down_scaling_64ic_users_64ic_users_white_64ic_ux_design_64ic_ux_design_desktop_64ic_ux_design_white_64ic_vehicle_64ic_web_based_search_64ic_web_based_search_white_64ic_web_browser_code_64ic_web_browser_developer_mode_64ic_web_browser_user_64ic_web_development_64ic_web_development_white_64ic_web_portals_64ic_web_portals_64ic_web_user_64ic_web_user_white64ic_workflow_64ic_workflow_steps_64ic_workflow_steps_white_64ic_workflow_white_64ic_working_environment_64

Angular 5.0.0 – A Better Version of Itself

white envelope icon
contact us nowwhite envelope icon
Up to 3000 characters
Oops! Something went wrong, please try again later

A brand-new Angular is right in the center of most people’s radar as of late. The K&C team didn’t miss the opportunity to give its feedback on the fifth so-called ‘pentagonal-donut’ version of Angular. We’ve selected the most essential changes and suggest you get acquainted with them to stay abreast of the last IT events.

The Backbone of Angular 5.0.0: Its goal is to facilitate the creation of progressive web applications so as to be able to cache apps in the browser and support them easier. The current concept is the product of joint efforts from Google and Mozilla, and implies app development on a browser basis.


“Easier, smaller, faster is the theme for version 5. We’ll continue that theme for version 6, just making [developers’] lives easier, making it possible to deliver apps better for their users,” said Brad Green, a Google engineering director.


So let`s look at what a new Angular can offer!


Package Updates

- Angular CLI 1.5 now includes Angular version 5.0.0

- Typescript was updated to version 2.4

- RXJS was updated to version 5.5


Build Optimizer

CLI 1.5 will produce v5 projects with the included build optimizer thus making bundles smaller. The two primary functions of this build optimizer are to do away with unneeded parts of the application by marking them ‘pure’. And the second purpose is to get rid of Angular decorators from the app’s runtime code.


Improved Compiler

Previously, the Angular compiler (ngs) recompiled all files at every change, which greatly slowed down the development process. In the new version, an upgraded watch option was presented. It recompiles only those files that you need at the moment. Thus, the compilation time for average projects has reduced from 12-14 to 2-3 seconds. This saves you time, which is valued a lot during the working process.

See more 


AOT On By Default

One more pleasant bonus is the ability to work in two modes; however, the second one is preferable.


- JIT (just-in-time) – Component templates are compiled at runtime 

- AOT (ahead-of-time) – Component templates are compiled beforehand (Ahead of time, AOT)


With the launch of CLI 1.5, there will be no need to think about the mode to build your app in. From now on, you can safely choose AOT.

 

New HttpClient

Since the release of Angular 4.3, a new HttpClient has appeared. Starting with Angular 6, the old client will be deleted; in the current Angular, it is marked as ‘deprecated’.


Angular Form Validation

Today, developers on their own can define only those fields that are important for them from an efficiency point of view. With this, now the validation and updating of values in forms can be applied only to ‘blur’ or ‘submit’, not to all input events.


Changes with Pipes

The Angular developers updated number, date, and currency pipes, having eliminated the necessity to implement i18n polyfills. Therefore, it is possible to specify the localization as the last parameter.

See more


New Router Lifecycle Events

From now on, it will be possible to track the full life cycle of the router. This appears to be instrumental when estimating the performance of guards and/or resolvers.

New events (successively):

GuardsCheckStart,

ChildActivationStart,

ActivationStart,

GuardsCheckEnd,

ResolveStart,

ResolveEnd,

ActivationEnd,

ChildActivationEnd.

 

Angular Universal Transfer API

Angular Universal is created to help developers perform server-side rendering (SSR) in Angular applications, as far as it is much easier for search engines to find a particular piece of content if your app is rendered on the server and then loaded into HTML. This affects performance dramatically.


Other Optimizations

- Bug fixes

- Preserve Whitespace Option (now you can choose to save it or not)

- ExportAs (for adding multiple names to your components in your directive)

- Zone speed improvements


Conclusion

The latest Angular seems to have lots of breaking changes; nevertheless, they all pale in comparison to the switch from Angular.js to Angular 2. With this in mind, the Angular team backed us up by providing a specialized resource, the Angular Update Guide, which will make life much easier.


The K&C team has already tried the latest version of the Angular and is ready to use its knowledge to work successfully on new fascinating projects.

SHARE WITH FRIENDS
You might find this interesting
Case Study
Bosch Classic Cars - Digital Engagement Platform for 19K Vintage Car Owners
Case Study
Liferay Portal Performance Tuning Services for a Major Online Gaming Software Supplier
SUCCESS-STORY
Reference: Major producer of auto electronics and spare parts
Blog post
How to Make Your Web Solution Rock: 7 Areas to Check
Blogpost
How to Motivate Your Dedicated Team to Work with Legacy Projects
Blogpost
SEO Tips & Tricks for Single Page Web Applications
Success Story
Drivelog.de — Web Marketplace for Car Owners and Service Providers
blog post
Docker: Virtualize Your Development Environment Right
eBook
How to Secure Web Product Development — FREE eBook
blog post
When Microservices Help Make Future-Ready Products
Case Study
Portal Performance Tuning For Major German Travel Agency
blog post
How to Build a Rancher & Docker Based Cloud
case study
Micro-service Architecture for New AngularJS Application - Case Study
blog post
How We Use Ansіble for Configuration of Our Environments
blog post
DevOps with Puppet: Tips on Setting it up for Configuring Servers
blog post
How We Manage Our Infrastructure with Chef
Success Story
Fast and Lightweight Mobile Application based on PhoneGap/ Cordova
blog post
Centralized Logging with Logstash, Elasticsearch & Kibana
blog post
How the QA Team Tests Your Project
blog post
4 Time-Saving Ways to Test Your Cross Platform Mobile App
blog post
Plan to Succeed: 4 Tips for Building Scalable Software
ebook
Top Tools for Cost-Effective Web Development — eBook
Blogpost
How to start services on Linux
Blog Post
Scaling software solutions - how it works
Blog Post
Angular 2.0 vs Angular 1.4. What fits you best?
Blog Post
Reasons to believe in Ionic hybrid app
Blog Post
Debunking imaginary shortcomings of cross-platform frameworks
E-book
Determining Approaches to Mobile App Development
Blog Post
Technologies that Foster Digital Transformation
Blog Post
A Guidance for Keeping Your Web Development Project Within the Budget: Three Key Pillars
Blog Post
Agile and DevOps are Key Drivers of Digital Transformation
Blog Post
Dedicated Teams for Web Development: Choice Criteria to be Checked
Blog post
Cost efficient technologies
Blog Post
Angular 4 vs React – what to choose in 2017
Blog Post
A secret formula of an agile dream team
Blog post
GoLang: Features, Pros and Cons
Blog post
K&C insights: how to make your workflow work for you
Blog post
Microservices… when do we need them?
Blog post
Use case: how to build and run Docker containers with NVIDIA GPUs
Success Story
How to apply React Native while developing heavy cross-platform mobile apps
Blog post
Cloud Deployment: Overview of Options
Success Story
Reformation of Deployment Cycle for Bosch Classic Cars Portal
Blog post
Three Authentication Approaches to Keep Your Clients Safe
Blog post
Native or Hybrid Apps: A Quick Comparison
E-book
Digital Transformation: the Philosopher’s Stone of Economic Growth
Blog post
Big Data: Why Your Business Needs it ASAP
Blog post
Setting Up: Traefik Balancer In Rancher Cloud
Blog post
White Label: A Customized Software Solution from a Business and Tech Perspective
Blog post
Installation and setting up: Nextcloud as a local network storage on CentOS7
Blog post
How a Company Can Benefit from White Label: K&C experience
Blog post
ROCKET.CHAT as an internal messaging system and helpdesk platform
Blog post
JS Frameworks: The Trendiest Frameworks You Should Know
Blog post
Angular vs. React vs. Vue – Let the Fight Start!
Blog post
How to setup Kubernetes cluster on AWS
Blog post
Hybrid, SaaS+PaaS, IoT: Cloud Trends to Catch in 2018
Blog post
How to Ramp up Your Team Wisely
Blog post
Angular 5 VS React.js – Who’s Going to Set the Tone in the Upcoming Year?
Stay tuned!
We'll gladly share fresh blog updates and our best practices to your email.
We protect your data and will notify you on important updates only.