Angular 6 – What You Need to Know

It seems like only yesterday that Angular 2 was released. Then, a few days ago, they went and announced that Angular 6 has been released. There are several important new features in this new release that I want to cover. This is by no means an exhaustive review of the release, but these are features that stood out to me as I was reading through the documentation. Follow along as I explain how some of the most exciting new features work!

ng update

There is an additional command that is new for Angular 6:

ng update 

Basically, it looks at the current version of the package, with its dependencies, and then determines what packages need to be updated or installed.

In addition to keeping your packages up-to-date and your dependencies installed with the right versions, the new command will allow third parties to create scripts using schematics. These will allow the providers to make updates to your code for any late breaking changes.

Also, it's worth noting that ng update is not replacing your package manager. It's still using your favorite package manager to make all these changes.

As an example, let's look at what would happen if you updated the @angular/core package. First, ng update would - you guessed it - update all of the framework packages for Angular. It will also update RxJS and TypeScript, since these are dependencies. Not only that, but it would also run any schematics that are available to do any configurations that might be necessary. The command would also add the rxjs-compat package, allowing for backwards compatibility with older versions of RxJS.

ng add

The ng add CLI command will use the package manager to download new packages and run schematics in order to give your app new functionality. This command potentially makes configuration changes, adds dependencies, or even provides bootstrapping for certain packages that require it. One of my favorite examples of this is turning your Angular app into a progressive web app. The CLI will automatically add an app manifest and service worker. All you have to do is type the command and press enter.

Angular Elements

The new Angular Elements feature lets you build Angular components, then package them in such a way that they can be used in outside of an Angular template. For example, you can build a component, bootstrap it in your modules folder, and then use it in any plain old html file within the project. This also opens the door to allow you to package a component, along with its supporting JavaScript, to be used in any Non-Angular static html page.

RxJS 6

Angular 6 ships with RxJS 6. What's new with RxJS 6, you ask? Well, they've done some work to the library to make sure that production ready bundles only include what's necessary. This will reduce the size of production builds. To make sure that there's backwards compatibility, there's a package called rxjs-compat that will keep everything working.

Conclusion

These are just a few of the features that I think are important in Angular 6. There are many more that I haven't covered here. If you're looking for more, be sure to check out the Angular Blog to see a more comprehensive list of the new features.