days
-6
-6
hours
-1
-9
minutes
-3
-4
seconds
-1
-6
search

On the road to Angular v6: Pop the champagne, it’s here!

JAX Editorial Team
Angular 6
© Angular.io / Shutterstock Spring Bine

The wait is over! Angular v6 is here, later than expected but still very welcome. This is the first release of Angular that unifies the Framework, Material and CLI.

Pop the champagne, Angular v6 is here! We were expecting it a bit earlier but it’s all water under the bridge now.

We’re even more excited since this is the first release that unifies the Framework, Material and CLI. If you want to read more about the highlights and the new CLI-powered update workflow for your projects, check out the v6 release announcement.

Keep in mind that Angular v6 focuses more on the toolchain (and how to make it easier to move quickly with Angular) and less on the underlying framework.

Furthermore,the team is synchronizing the major versions going forward for the framework packages (@angular/core@angular/common@angular/compiler, etc), the Angular CLI, and Angular Material + CDK. “The minor and patch releases for these projects will be issued based on the project’s needs,” Stephen Fluin announced in the blog post.

ng update

We talked about ng update in a previous article; this new CLI command analyzes your package.jsonand uses its knowledge of Angular to recommend updates to your application. In short, it will “help you adopt the right version of dependencies, and keep your dependencies in sync, but 3rd parties can provide update scripts using schematics“.

Just to clarify something: it will not replace your package manager; ng update uses npm or yarn under the hood to manage dependencies. In addition to updating dependencies and peer dependencies, ng update will apply needed transforms to your project.

ng add

This new CLI command promises to make adding new capabilities to your project easy. It uses your package manager to “download new dependencies and invoke an installation script (implemented as a schematic) which can update your project with configuration changes, add additional dependencies (e.g. polyfills), or scaffold package-specific initialization code.”

Angular Elements

This first release of Angular Elements focuses on allowing you to bootstrap Angular components within an existing Angular application by registering them as Custom Elements.

Angular Material + CDK Components

The new tree component for displaying hierarchical data is surely the biggest news. As Fluin explained in the blog post, “following patterns from the data-table component, the CDK houses the core tree directives, with Angular Material offering the same experience with Material Design styles on top.”

But that’s not all; the team also introduced new badge and bottom-sheet components. The former helps display helpful information such as unread item counts while the latter represent a special type of mobile-centric dialogs that come up from the bottom of the viewport, commonly used to present a list of options following an action.

The @angular/cdk/overlay package is one of the most powerful pieces of infrastructure in the CDK today.

CLI Workspaces

CLI v6 now offers support for workspaces containing multiple projects, such as multiple applications or libraries. CLI projects will now use angular.jsoninstead of .angular-cli.json for build and project configuration.

Each CLI workspace has projects, each project has targets, and each target can have configurations.

RxJS v6

 RxJS v6 brings a few major changes, along with a backwards compatibility package rxjs-compat that will keep your applications working. It’s more tree-shakable now, ensuring that only the pieces of RxJS that you use are included in your production bundles.

Note: If you use ng update, your application should keep working, but you can learn more about the 5.5 to 6.0 migration.

No Ivy?

Ivy is still under active development, but there will be an opt-in preview of Ivy as soon as it is ready.

Long Term Support (LTS)

The Angular team previously announced that only v4 and v6 would be LTS releases but the good news is that long-term support has been extended to ALL major releases starting with v4. Each major release will be supported for 18 months with around 6 months of active development followed by 12 months of critical bugfixes and security patches.

For the complete list of highlights, check out Stephen Fluin’s blog post

 

Update May 2, 2018

Lucky number seven! RC.6 is here and it brings four bugfixes. Although we didn’t expect a seventh release candidate, we welcome it with open arms. No features though, so Angular v6 is right around the corner…hopefully.

If the roadmap to Angular v5 was any indication, RC.5 might not be the last release candidate standing between us and Angular v6. The previous version had 10 release candidates so we can’t know for sure when v6 is coming.

RC.5 brings four bugfixes and two features.

Features

  • platform-browser: add token marking which the type of animation module nearest in the injector tree (#23075) (b551f84)
  • service-worker: add support for configuring navigations URLs (#23339) (08325aa), closes #20404

 

Update April 16, 2018

And another unplanned release candidate! This one —fifth— brings seven bugfixes and one feature, namely

 

Update April 10, 2018

We’ve gotten used to unexpected betas and release candidates so we’re not really surprised that rc.3 is here.

It only brings two bugfixes so this might mean that v6 is ready to see the light of day.

 

Update April 6, 2018

In theory, rc.2 should be the last release candidate, which means Angular v6 is right around the corner. We’re not sure if this is actually going to happen since beta.8 wasn’t planned but still occurred.

Anyway, the third —and possibly the last— release candidate brings seven bugfixes and one feature, namely:

  • compiler-cli: lower loadChildren fields to allow dynamic module paths (#23088) (550433a)

 

Update April 3, 2018

The second release candidate is here and it brings almost 20 bugfixes and two features:

Features

  • bazel: prefix private-export (barred-latin-o) symbols (#23007) (27e14b2)
  • compiler: lower @NgModule ids if needed (#23031) (bd024c0)

 

Update March 29, 2018

We know that Angular v6 is now feature complete so there’s no reason to worry about it.

However, since there are some differences between the tentative schedule and the changelog, one could think that the release date might be pushed back again.

Source: Angular v6 tentative schedule

Of course, it might happen that they release more release candidates at the same time like they did with beta.8 and RC.0. Either way, Angular v6 is in the pipeline and it’s already feature complete so it won’t be long before we’ll have the chance to play with it.

 

Update March 21, 2018

First came beta.8, then came RC.0. There are actually a lot of features in beta.8 (which wasn’t even planned) so you might want to have a look.

There are some breaking changes, too — read more about them here.

Features

That said, Angular 6 is now feature complete. Although the cli and material/cdk parts of the upcoming release, along with the other integrations are still in development, they will be ready by the time Angular 6 is out.

The first release candidate brings six bugfixes and two features.

Features

Last but not least, it seems that Angular 6 will be released in early April, not late March.

Angular 6 release schedule

 

Update March 8, 2018

The last beta is here — unlike bountiful Beta.6, which brought 16 bugfixes, 15 features, and five breaking changes, Beta.7 only contains three bugfixes.

This time next week, we will have entered the release candidate phase. And in three weeks time’, we’ll finally have Angular 6. Good times ahead!

 

Update March 1, 2018

Beta.6 was released yesterday (February 28) — which means Angular 6 is ready for the release candidate phase. And that’s good news!

This last beta has a bunch of bugfixes —16, to be more exact—, 15 features and five breaking changes.

Features

Breaking changes

  • platform-server: * Bump the dependency on Domino to 2.0 to resolve issues with namespacing
  • forms: – AbstractControl#statusChanges now emits an event of 'PENDING' when you call AbstractControl#markAsPending
  • Previously it did not emit an event when you called markAsPending
  • To migrate you would need to ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending
  • animations: When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation). To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.

SEE ALSO: Angular 2018 roadmap includes Ivy Renderer, Angular Elements, Bazel and more

 

Update February 22, 2018

Beta.5 is here which means there’s only one more to come — at least in theory. After that, we have the release candidate phase and that’s it. But since we’re not there yet, let’s stick to what we have so far — Beta.5, which brings eight bugfixes, five features and a couple of breaking changes.

Features

  • common: better error message when non-template element used in NgIf (#22274) (67cf11d), closes #16410
  • compiler-cli: Check unvalidated combination of ngc and TypeScript (#22293) (3ceee99), closes #20669
  • core: support metadata reflection for native class types (#22356) (5c89d6b), closes #21731
  • platform-browser: do not throw error when Hammer.js not loaded (#22257) (991300b), closes #16992
  • platform-browser: fix #19604, can config hammerOptions (#21979) (1d571b2)

BREAKING CHANGES

  • animations: When animation is triggered within a disabled zone, the associated event (which an instance of AnimationEvent) will no longer report the totalTime as 0 (it will emit the actual time of the animation). To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.
  • forms: ngModelChange is now emitted after the value/validity is updated on its control.

Previously, ngModelChange was emitted before its underlying control was updated. This was fine if you passed through the value directly through the $event keyword, e.g.

<input [(ngModel)]="name" (ngModelChange)="onChange($event)">

onChange(value) {
   console.log(value);               // would log updated value
}

However, if you had a handler for the ngModelChange event that checked the value through the control, you would get the old value rather than the updated value. e.g:

<input #modelDir="ngModel" [(ngModel)]="name" (ngModelChange)="onChange(modelDir)">

onChange(ngModel: NgModel) {
  console.log(ngModel.value);        // would log old value, not updated value
}

Now the value and validity will be updated before the ngModelChange event is emitted, so the same setup will log the updated value.

onChange(ngModel: NgModel) {
   console.log(ngModel.value);       // will log updated value
}

 

 

Update February 14, 2018

The fifth beta is here and it brings quite a few bugfixes (16 of them, to be more exact), as well as four features.

Features

  • bazel: allow explicit specification of factories (#22003) (e442881)
  • compiler: mark @NgModules in provider lists for identification at runtime (#22005) (2d5e7d1)
  • forms: multiple validators for array method (#20766) (941e88f), closes #20665
  • change @Injectable() to support tree-shakeable tokens (#22005) (235a235)

 

Update February 8, 2018

The fourth Angular 6 beta is here. There are nine bugfixes, one performance improvement, and four features.

Features

  • compiler-cli: reflect static methods added to classes in metadata (#21926) (eb8ddd2)
  • ivy: add canonical example of a pipe. (#21834) (743d8bc)
  • ivy: add support for attributes on ng-content nodes (#21935) (1aa2947)
  • ivy: memoize array literals in render3 (#21973) (4d62be6)

 

Update February 1, 2018

The beta season for Angular 6 is on a roll. The third beta brings eight bugfixes and a couple of features:

  • router: add navigationSource and restoredState to NavigationStart event (#21728) (c40ae7f)
  • service-worker: add helper script which will uninstall SW (#21863) (b10540a)

So far, the three betas have brought a total of seven features, namely:

  • bazel: allow ng_module rules to control whether type checking is enabled (#21460) (cffa0fe)
  • core: add binding name to content changed error (#20352) (d3bf54b)
  • forms: handle string with and without line boundary on pattern validator (#19256) (54bf179)
  • compiler: implement “enableIvy” compiler option (#21427) (64d16de)
  • core: optional generic type for ElementRef (#20765) (d3d9aac), closes #13139
  • router: add navigationSource and restoredState to NavigationStart event (#21728) (c40ae7f)
  • service-worker: add helper script which will uninstall SW (#21863) (b10540a)

 

Update January 25, 2018

The second beta is here.

This beta doesn’t bring as many features as the previous one but it is still packed with goodies — 11 bugfixes and two features:

 

Update January 18, 2018

The beta season for Angular 6 is here. Beta.0 has nine bugfixes, three features and one performance improvement.

Features

  • bazel: allow ng_module rules to control whether type checking is enabled (#21460) (cffa0fe)
  • core: add binding name to content changed error (#20352) (d3bf54b)
  • forms: handle string with and without line boundary on pattern validator (#19256) (54bf179)

Performance improvements

  • ivy: add missing dom element in render3_function tree benchmark (#21476) (9b5a485)

 

Update January 10, 2018

We’re one step closer to Angular 6 now that 5.2.0 is here.

There’s not much to say except that it brings four bugfixes. If you’re here for the highlights, here’s what Stephen Fluin wrote in the blog post announcing Angular 5.2.0:

  • Improved type checking for templates
    They’ve added fullTemplateTypeCheck as an angularCompilerOption that uses TypeScript to validate binding expressions in your templates and recommend you enable this flag, as it will become the default in a future major release. Learn more about the various compiler options supported in Angular.
  • Support for TypeScript 2.6
    Angular now supports TypeScript 2.4, 2.5 and 2.6. Check out some of the new features in TypeScript 2.6.
  • Improved Router Param & Data Inheritance
    Previously, nested routes would only inherit parameters and data from parent routes if the parent route did not have a component set. Now paramsInheritanceStrategy can be set to always, meaning child routes will have access to all ancestor parameters and data.

 

Update January 4, 2018

A new year, a new stable version! Let’s ring in 2018 with some bug fixes for the stable release 5.1.3 and the first release candidate of 5.2.0.

5.1.3 Bug Fixes

  • animations: avoid infinite loop with multiple blocked sub triggers (#21119) (3e34fa8)
  • animations: renaming issue with DOMAnimation. (#21125) (d1f4500)
  • common: handle JS floating point errors in percent pipe (#20329) (fa0e8ef), closes #20136
  • language-service: ignore null metadatas (#20557) (48a1f32), closes #20260
  • router: fix wildcard route with lazy loaded module (again) (#18139) (8c99175), closes #13848

5.2.0 Bug Fixes

  • animations: avoid infinite loop with multiple blocked sub triggers (#21119) (86a36ea)
  • animations: renaming issue with DOMAnimation. (#21125) (871ece6)
  • common: handle JS floating point errors in percent pipe (#20329) (07b81ae), closes #20136
  • language-service: ignore null metadatas (#20557) (3e47ea2), closes #20260
  • router: fix wildcard route with lazy loaded module (again) (#18139) (5ba1cf1), closes #13848

Update December 21, 2017

Angular 5.2.0 beta.1 is here.

Bug Fixes

  • compiler: generate the correct imports for summary type-check (d91ff17)
  • forms: avoid producing an error with hostBindingTypeCheck (d213a20)

Features

  • compiler: allow ngIf to use the ngIf expression directly as a guard (82bcd83)
  • router: add “paramsInheritanceStrategy” router configuration option (5efea2f), closes #20572

 

Update December 14, 2017

Why settle for Angular 5.1.0 when you can have 5.2.0?

The beta season for Angular 5.2.0 has officially begun — the first beta brings five features, namely

  • animations: re-introduce support for transition matching functions (#20723) (590d93b), closes #18959
  • compiler: add a pseudo $any() function to disable type checking (#20876) (70cd124)
  • compiler: narrow types of expressions used in *ngIf (#20702) (e7d9cb3)
  • core: add source to StaticInjectorError message (#20817) (b7738e1), closes #19302
  • forms: allow nulls on setAsyncValidators (#20327) (d41d2c4), closes #20296

 

Update December 7, 2017

Angular 5.1.0 is here. Although it only brings three bugfixes, the Angular 6 machinery is now in motion.

Angular 5.1 is not the only good news though — Stephen Fluin, developer advocate at Google announced in a blog post that the team also released v1.6 of the Angular CLI, and the first stable release of Angular Material.

What’s new?

  • Angular Material & CDK Stable Release
  • Service Worker support in the CLI
  • Improved Universal & AppShell Support in the CLI
  • Improved decorator error messages
  • TypeScript 2.5 support

If you want to see the full list of features and bugfixes, see the AngularMaterial, and CLI changelogs.

Angular Material

What does it take to reach version five of Angular Material? 11 alpha releases, 12 beta releases, and three release candidates. Furthermore, the CDK has finally graduated from Angular Labs.

Starting with this release, Angular Material will be following the same SemVer philosophy as Angular, with major versions of Angular Material and Angular CDK releasing at the same time as major versions of the rest of the platform. Patch releases will follow a weekly cadence, while minor feature releases will become available as features are completed.

Stephen Fluin

CLI 1.6 Service Worker Support

Angular 5.0.0 shipped with a new Service Worker implementation customized for Angular applications. According to Fluin, Angular CLI 1.6 includes support for building applications which take advantage of this new feature. Using @angular/service-worker can improve the loading performance of your applications in browsers which support the API, and make your application’s loading experience more like that of a natively installed app, he added.

CLI 1.6 Improved Universal & App Shell Support

The release of Angular CLI 1.6 brings better support for adding Universal to your existing projects via Schematics and App Shell support.

Angular Universal

To add Universal in your current CLI application, you can now use the following commands in your project:

 

 

Replacing <name> with the name you want to give your universal app. This will take your current application and create a Universal module, and configure your angular-cli.json file automatically for you. You can then skip to step 4 in the guide to using universal.

To build your Universal app, simply run the following command:

 

 

App Shell

You can generate and build an application shell, which uses a special universal build to create a static first render of your application in your index.html. The outcome is that you’ll have a better experience while your application is being bootstrapped.

Make sure you have a RouterModule imported in your application’s NgModule, and a <router-outlet></router-outlet> in your application component’s template. App Shell uses the router to render your application.

The next step is to run this command:

 

 

 

This will add support for the app shell to your angular-cli.json main application, using the universal application passed in argument. If the universal app isn’t passed in, it will create a universal application by running the universal schematic first. The route argument specify the route to generate during build (router is required for App Shell support). By default this is /shell.

After this, just build your application as normal using ng build and the index.html file will include the route from your application automatically rendered for you.

There’s also support for TypeScript 2.5, improved decorator error messages and more. Check out Stephen’s blog post for the complete list of highlights.

 

Update December 6, 2017

Angular 6 should be released in March or April 2018. As Karsten Sitterberg pointed out in his post detailing version 5’s most exciting features, “the Angular team already has announced that the latest version’s focus applications should be even faster at runtime and more compact in delivery. Until then, it’s likely that experiments from the Angular-Labs will be stable and adopted into the framework or AngularCLI.”

SEE ALSO: What’s new in Angular 5?

Now that Angular 5 is here, it’s time to look toward the future, which happens to be all about Angular 6. What will this version bring? We don’t know yet but we’re pretty excited to see the bits and pieces and then put everything together next spring.

That said, it’s time to move on — to 5.1.0 to be more exact. The first beta arrived in early November with six bugfixes and a feature in tow.

Feature:

  • compiler: introduce TestBed.overrideTemplateUsingTestingModule (a460066), closes #19815

The second beta brought 10 bugfixes and the third beta brought the same number of bugfixes plus a feature.

Feature:

The first release candidate was released on the 1st of December; it brought over a dozen bugfixes and a couple of features:

  • common: add locale id parameter to registerLocaleData (#20623) (24bf3e2)
  • compiler-cli: improve error messages produced during structural errors (#20459) (8ecda94)

The second release candidate was also released on the 1st of December and brought five more bugfixes.