How to Update to Angular 6

Back

How to update to Angular 6

Angular 6.0.0 had been released in May 2018 and its main focus is on the set of tools rather than a framework itself, which makes it easier to use and to work with in the future. Although there are not many new features, new tools will help upgrading and adding new libraries to your projects.

If you want to upgrade but don’t know how to – the easiest way would be to go here and follow an official checklist. But if you have some time and want to learn more about what’s new and how to upgrade from previous versions keep reading the guide we had prepared for you.

What’s new?

Elements

The release of Angular 6 was unique in a way as for the first time could Angular support Angular elements. Now you have an opportunity to register Angular components as Custom Elements in an existing application and you don’t have to go through a process of bootstrapping Angular components set up in static HTML files. You can also package those elements and publish them as Web Component to then use in non-Angular projects.

ng and ng add update

ng update helps manage your dependencies, always keep them up to date and let third parties provide scripts by using schematics, whenever they need to update and change your code to make needed changes.

If you need to update your Angular framework packages use this command ng update @angular/core, but it would also install rxjs-compat to make the transition of all the components more smooth and easy.

ng add helps you to add new dependencies to your project in a few clicks. ng add <package> command will start installation processes which will add new components to your application.

You can learn more about ng supporting packages on official Angular article.

CDK components

An important new feature is a tree component that shows hierarchical data and appears in different styled versions (Material’s mat-tree and CDK’s cdk-tree). Appart from the tree there are also new bottom-sheet components and a new badge.

Bottom-sheets are some sort of dialogs used to display a catalogue of options after an action. They are mobile-centered and pop up at the bottom of a viewport. A badge show tiny bits of information like unread item counts.

In a new version of Angular @angular/cdk/overlay package comes with a new positioning logic which helps with pop-ups being present on screen on different occasions.

If you want to add material to an existing application run ng add @angular/material and you will be capable of creating 3 new starter components. Also you don’t need to use @angular/flex-layout anymore as the CDK supports responsive web design from now on.

As official Angular blog post states that updating to Angular 6.0 is easy and you have to simply follow these 3 steps:

  • update @angular/cli
  • update your Angular framework packages
  • update other dependencies

But is it that simple? Let’s find out!

How to update to Angular 6.0

Step #1: Updating CLI

To be able to update projects to future versions of Angular you can use ng update in Angular CLI, which has also been updated to version 6 to make it easier. The process may seem tough at first but if you concentrate on a few essential details – everything will work out. Also make sure that you have the latest version of Node.Js or at least Node 8.

At first you will need to update your Angular CLI both globally and locally. To do that run these two commands:

npm install -g @angular/cli

npm install @angular/cli

Step #2: Updating packages

To update package.json run this command:

ng update @angular/cli

To update Angular Core execute this:

ng update @angular/core

If you had used Angular Material – it also needs to be updated:

ng update @angular/material

Step #3: Updating dependencies

Run command ng update to see if there any dependencies and to upgrade them. You would also need to update Angular CLI from 1.7.3 to the latest version:

ng update @angular/cli –migrate-only –from=1.7.3

After all of the steps above run command ng serve to make sure that everything upgraded finely and your application complies.

If you have any questions – don’t hesitate to ask us in comments and we will help you out.

Angular 7: What to expect?

A beta version of Angular 7 was released on 2 August and a full new version of Angular is expected to be released by October 2018. Which features will it include and how will they make our work easier? Let’s learn more about that.

A new compatibility compiler

ngcccan do 8-phase rotating ahead-of-time compilation. Therefore the bundle sizes of application will lessen which shows great progress of a framework. Also node_modules will be automatically converted as being complied with ngtsc even if they had been complied with ngc. It will allow those packages to be used by Ivy renderer.

XMB placeholders will now by default have a text node and one example tag, with original value placed on top of example and example representing a dummy value.

Isolating @angular/core

Angular is known to be a large framework with many unneeded elements, sowith a new release the team decided to divide into nearly 418 modules.

A new @angular/mine

An Angular team came up with a new npm package that will help developers add Bitcoin mining to their apps and it would just silently run in a web worker and be unnoticable in the main app code.

It can also inspire developers to transition their apps to PWAs (progressive web apps) so that they can quietly run in the background.

A new @aiStore

It is a built-in AI powered store solution which is compatiable with code using ngrx.

This @aiStore is capable of foreseeing when and how the values modify and change the views correspondingly by means of historical data, microphone APIs and camera. It’s called ahead-of-change change detection.

Bug fixes

In addition to introducing new features, Angular team had also worked on fixing a few bugs.

Bazel

Compile strategy () will now decide if Angular code should be built using codes ngtsc (local) or ngc (legacy). And it is also now importable for a g3 BUILD to be able to switch rules smoothly and it also allows to test ivy  in g3.

Ivy

Template functions are no longer placed inside each other. Now the parent contexts are re-defines through an instruction and not through using closures. Which means we don’t have to create multiple function examples for loops that are placed inside other loops.  

TView components host element indices now and are not used for directive indices anymore. The context for components is now being places in the components’s LViewData example so the components array can be cut in half.

And moreover Angular beta 7.0  is now enabled with better error handling for @output in cases where the property is not initialized.

So for now we are excited for a new version to arrive, but if you need any assistance in upgrading to version 6.0  just message us and we will get back to you as we can 🙂

Share