Invisible-makeover, to be precise

Angular 4 is here

March 24, 2017 JAX Editorial Team

#Angular

Better late than never! Angular 4 has finally been released and it’s just what we expected and then some more. Let’s have a look at the highlights.

As promised, Angular 4 is backwards compatible with 2.x.x for most applications. According to the blog post announcing version 4.0.0, the team “worked hard to make sure that it’s easy for developers to update to this release.”

What’s new in Angular 4?

Smaller, yet faster

Angular applications are now smaller and faster. However, the team promised that further improvements will be made in the coming months.
Changes were made under the hood to what AOT generated code looks like; their aim is to reduce the size of the generated code for users’ components by roughly 60 percent in most cases. The more complex templates are, the higher the savings. During the release candidate period, it was brought to their attention that migrating to Angular 4 reduced users’ production bundles by hundreds of kilobytes.

Furthermore, the Angular team has pulled animations out of @angular/core and into their own package. In short, the extra code will not end up in users’ production bundles if they don’t use animations.

This change also allows users to find documentation more easily and to take better advantage of autocompletion. Users can add animations themselves to their main NgModule by importing BrowserAnimationsModule from @angular/platform-browser/animations.

Features

Improved ngIf and ngFor

Good news! The template binding syntax now supports a couple helpful changes. Users can now use an if/else style syntax, and assign local variables such as when unrolling an observable.

<div *ngIf="userList | async as users; else loading">
  <user-profile *ngFor="let user of users; count as count" [user]="user">
  </user-profile>
 <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>

Angular Universal

Universal, the project which allows developers to run Angular on a server, is now up to date with Angular again. This is the first release since Universal, which was originally a community-driven project, was adopted by the Angular team, according to the blog post. Accoring to the blog post, this release now includes the results of the internal and external work from the Universal team over the last few months. The majority of the Universal code is now located in @angular/platform-server.

TypeScript 2.1 and 2.2 compatibility

Angular has also been updated to a more recent version of TypeScript. This will improve the speed of ngc and users will get better type checking throughout your application.

Source maps for templates

When there is an error caused by something in one of users’ templates, source maps are generated which give a meaningful context in terms of the original template.

Packaging changes

Angular now ships flattened versions of their modules (“rolled up” version of the code in the EcmaScript Module format, see example file). This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios, according to the blog post.They also ship the packages in the ES2015 Flat ESM format. However, keep in mind that this option is experimental and opt-in.

Developers have reported up to seven percent bundle size savings when combining these packages with Rollup.If you want to try out these new packages, all you have to do is configure your build toolchain to resolve “es2015” property in package.json over the regular “module” property.

Last but not least, all of their code now has Closure annotations. Users can now take advantage of advanced Closure optimizations, resulting in smaller bundle sizes and better tree shaking.

Known issues

One of the goals for this version was to make Angular compatible with TypeScript’s strictNullChecks setting, thus allowing for a more restrictive subset of types to be mandated. The team discovered during the release candidate period that there is more work to be done for this to function properly in all use cases.

As a result, they intentionally made 4.0 incompatible with the strictNullChecks setting in order to avoid breaking apps that would otherwise eagerly adopt this TypeScript mode when the proper support lands in 4.1 (tracking issue is #15432

Now what?

The team is now setting the roadmap for the next 6 months, following the same cadence as their published release schedule for 2.x. There will be patch updates to 4.0.0 and they are already getting started on 4.1. In addition to making Angular smaller and faster, the Angular team also plans to evolve capabilities such @angular/http, @angular/service-worker, and @angular/language-service out of experimental.

Update March 23, 2017

Angular 4 was supposed to be released on March 22, 2017. That obviously didn’t happen but we did receive something else: another release candidate.

This one contains 29 bug fixes and five features.

Let’s have a look at the features:

core: expose inputs, outputs and ngContentSelectors on ComponentFactory. (#15214) (791534f)
router: add ParamMap.keys to get a list of parameters (d3eda7a)
router: introduce ParamMap to access parameters (a755b71)
tsc-wrapped: record original location of flattened symbols (#15367) (7354949)
upgrade: use ComponentFactory.inputs/outputs/ngContentSelectors (#15214) (9429032)

Is there another release candidate in the pipeline? Is Angular 4 coming soon? If only we had all the answers.

Update March 20, 2017

What an unexpected turn of events! RC4 was supposed to be the last release candidate before the grand debut of Angular 4 but here comes another one. Does this mean that Angular 4 will not be released on March 22nd?

Tentative Schedule Until March 2017

RC5 only contains one big fix:

compiler-cli: update the tsc-wrapped dependency version (#15226) (7fb4528)

However, since rc.0 was an unplanned release, rc.5 might have been in the cards but probably not under this name. If we exclude rc.0 and we add rc.5, it’s safe to say that this release candidate was bound to happen.

What do you think?

Update March 17, 2017

Behold, the last release candidate before the grand debut of Angular 4 next week. RC4 comes bearing 33 bug fixes and seven features.

Let’s have a look at the features:

common: support as syntax in template/* bindings (#15025) (c10c060), closes #15020
compiler-cli: support metadata file aliases (0ab49d4)
core: allow to provide multiple default testing modules (#15054) (6c8638c)
core: expose inputs, outputs and ngContentSelectors on ComponentFactory. (1171f91)
upgrade: support multi-slot projection in upgrade/static (#14282) (914797a), closes #14261
upgrade: use ComponentFactory.inputs/outputs/ngContentSelectors (a3e32fb)
introduce source maps for templates (#15011) (cdc882b)

Code refactoring

core: use flags in Renderer2.setStyle instead of booleans (#15045) (ff71eff)

Breaking changes

Previously, any provider that had an ngOnDestroy lifecycle hook would be created eagerly. Now, only classes that are annotated with @Component, @Directive, @Pipe, @NgModule are eager. Providers only become eager if they are either directly or transitively injected into one of the above.

This also makes all useValue providers eager. However, the only observable impact should be the code size.

What does the Angular team expect to achieve with this? Making providers eager was an incorrect behavior and never documented. Also, providers that are used by a directive / pipe / ngModule stay eager. So the impact should be rather small.

Furthermore, DebugNode.source no longer returns the source location of a node.

Closes 14013

As far as core changes are concerned, (since v4 rc.1), Renderer2.setStyle no longer takes booleans but rather a bit mask of flags.

Update March 13, 2017

On a scale from 1 to 10, how excited are you about Angular 4’s due date? Now that the fourth release candidate is here, we can actually see the light at the end of the tunnel.

RC.3’s package contains six bug fixes and three breaking changes (since 4.0 RC.1):

rename RendererV2 to Renderer2
rename RendererTypeV2 to RendererType2
rename RendererFactoryV2 to RendererFactory2

Let’s have a look at the bug fixes:

compiler: don’t throw for empty array literal in assignments (#14878) (6cd3326), closes #14782
compiler: improve error message when a module imports itself (#14646) (6bc6482), closes #14644
core: allow to use the Renderer outside of views. (#14882) (ba4b6f5), closes #14872
router: do not finish bootstrap until all the routes are resolved (#14762) (5df998d)
upgrade: populate upgraded component’s view before creating the controller (#14289) (07122f0), closes #13912
throw for synthetic properties / listeners by default (#14880) (3651d8d)

RC.4 is coming soon and, after that, we finally get to meet Angular 4.

Tentative Schedule Until March 2017

Update March 3, 2017

The Angular team revealed earlier this week that there will be three more release candidates before the grand debut of Angular 4. Now that RC.2 is here, we’re down to two release candidates.

RC.2 includes 10 bug fixes two performance improvements:

delete pre-view-engine core, compiler, platform-browser, etc code (#14788) (126fda2)
compiler: make identifiers for generated code small to improve dev size (5caab71)

Update February 27, 2017

Things are moving fast! The Angular team has just released 4.0.0-RC.1, a feature-complete pre-release of 4.0.0. According to the official announcement, the team has spent “a significant amount of time working to ensure that this release is backwards compatible and will work with your existing code, but you may have use cases we haven’t anticipated.” Therefore, feedback is appreciated.

There will be three more release candidates before the grand debut of Angular 4.

What’s new in Angular 4 RC.1?

One of the changes has to do with what AOT generated code looks like; the size of the generated code for your components should be reduced by more than half in some cases.

Furthermore, the template binding syntax now supports a couple of helpful changes. You can now use an if/else style syntax, and assign local variables such as when unrolling an observable.



&lt;ng-template #loading&gt;Loading...&lt;/ng-template&gt;



&lt;div *ngIf="userObservable | async; else loading; let user"&gt;
  {{ user.name }}
&lt;/div&gt;

Animations have been pulled into their own package, which means that if you don’t use Animations, this extra code will not end up in your production bundles. Therefore, it’s easier to find documentation and take better advantage of autocompletion. If you do need animations, libraries like Material will automatically import the module (once you install it via NPM), or you can add it yourself to your main NgModule.

Plus, Angular has been updated to a more recent version of TypeScript, which will improve the speed of ngc.This also means that users will get better type checking throughout their applications. But that’s not all — Angular is now compliant with TypeScript’s StrictNullChecks. This means that you can enable StrictNullChecks in your project, if desired.

Universal, the project that allows developers to run Angular on a server, is now up to date with Angular again, and has been adopted by the Angular team, they announced. This release now includes the results of the work from the Universal team over the last few months. The majority of the Universal code is now in platform-server.

Known issues that will be fixed in the next rcs:

Source maps are missing in npm packages
Generated bundles will be larger temporarily while we validate new code paths and remove old ones
angular.io docs have not been updated to reflect API changes in 4.0
legacy UMD bundles don’t have correct RxJS mappings when running in ES5 mode without a module system

If you’d like to install RC.0, you should know that there are two ways to do it:

If you have an existing project, you should be able to run:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

Then run whatever ng serve or npm start command you normally use, and everything should work.

However, you need to make sure that you are using Typescript v2.1.6 or higher.

If you rely on Animations you’ll also need to install the animations package and import the new AnimationsModule from @angular/animations in your root NgModule. Without this, your code will compile and run, but animations won’t activate.

The countdown for Angular 4 has begun. Check out the entire thread here.

Update February 20, 2017

Beta 7 and 8 were released a few days apart. The eighth beta contains six bug fixes, two performance improvements and one breaking change, namely that Angular 4 will support only TypeScript 2.1, so we no longer provide backwards compatibility to TS 1.8.

The ninth beta is more generous: it includes 14 features and 17 bug fixes, as well as one deprecation. KeyValueDifferFactory and IterableDifferFactory no longer have ChangeDetectorRef as a parameter. It was not used and has been there for historical reasons. If you call DifferFactory.create(...) remove the ChangeDetectorRef argument. Introduced by (#14311).

There is also one breaking change:

Classes that derive from AsyncPipe and override transform() might not compile correctly. The much more common use of async pipe in templates is unaffected. We expect no or little impact on apps from this change, file an issue if we break you. Introduced by (#14367) (4da7925).

Mitigation: Update derived classes of AsyncPipe that override transform() to include the type parameter overloads.

The countdown for Angular 4 has begun. Check out the entire thread here.

Update February 7, 2017

The Angular team is moving fast. The seventh beta version is already here and it’s been less than 10 days since beta.5 was released. This one contains 30 bug fixes and 15 features, plus two performance improvements:

use abstract keyword where possible to decrease file size. (#14112) (670b680)
core simplify ReflectiveInjector by removing code for Dart implementation (#14126) (670b680)

Breaking changes:

common: A definition of Iterable<T> is now required to correctly compile Angular applications. Support for Iterable<T> is not required at runtime but a type definition Iterable<T> must be available.

NgFor, and now NgForOf<T>, already supports Iterable<T> at runtime. With this change the type definition is updated to reflect this support.

Migration:

add “es2015.iterable.ts” to your tsconfig.json “libs” fields.

Part of #12398

upgrade: Previously, upgrade/static/downgradeInjectable returned an array of the form:

['dep1', 'dep2', ..., function factory(dep1, dep2, ...) { ... }]

Now it returns a function with an $inject property:

factory.$inject = ['dep1', 'dep2', ...];
function factory(dep1, dep2, ...) { ... }

Although the behavior of apps should not be affected, since both forms are equally suitable to be used for registering AngularJS injectable services, type-checking might fail or that current code might break if it relies on the returned value being an array.

Check out the entire thread here.

Update January 26, 2017

Thanks to Semantic Versioning, everything about Angular seems to be set in stone these days: it indicates that “version numbers are meaningful and that patch releases will not change the functionality, minor releases will contain only additive changes, and breaking changes are reserved for major releases,” as Igor Minar, Angular Team Lead at Google, announced in his keynote at NG-BE, Belgium’s first Angular conference.

Screen-Shot-2016-12-15-at-11.02.05-AM-768x398

Beta phase

The beta phase officially began in mid-December 2016 and has rapidly gone through six beta versions (beta.5 was released on January 25). The first release candidate is expected to appear on February 8, so the wait is almost over.

But let’s leave the future alone for a second and focus on Beta.5.

Angular 4: Beta.5

The sixth beta version consists of 11 bug fixes and eight features. There’s also a breaking change:

core: – Because injector.get() is now parameterize it is possible that code which used to work no longer type checks. Example would be if one injects Foo but configures it as {provide: Foo, useClass: MockFoo}. The injection instance will be that of MockFoo but the type will be Foo instead of any as in the past. This means that it was possible to call a method on MockFoo in the past which now will fail type check. See this example:

class Foo {}
class MockFoo extends Foo {
  setupMock();
}

var PROVIDERS = [
  {provide: Foo, useClass: MockFoo}
];

...

function myTest(injector: Injector) {
  var foo = injector.get(Foo);
  // This line used to work since `foo` used to be `any` before this
  // change, it will now be `Foo`, and `Foo` does not have `setUpMock()`.
  // The fix is to downcast: `injector.get(Foo) as MockFoo`.
  foo.setUpMock();
}

Let’s not forget Angular 2, though. 2.4.5 brings four bug fixes:

compiler: [i18n] XMB/XTB placeholder names can contain only A-Z, 0-9, _n (5492fad)
compiler: fix regexp to support firefox 31 (#14082) (bd2eecb), closes #14029 #13900
core: export animation classes required for Renderer impl (#14002) (fd4f9ac), closes #14001
upgrade: ensure upgraded injector is initialized early enough (#14065) (3b2fb23), closes #13811

Check out the entire thread here.

“The change is happening”

Igor emphasized that all the future releases will be introduced with minimal breaking changes. However, he explained that the reason why the Angular team needs these breaking changes is just like in the case of TypeScript: “We can’t be stuck on version 1.8, we’re just going to be obsolete soon. We need to keep evolving with the rest of the ecosystem, with the web. If we find that some APIs that we have in Angular are not ergonomic, we need to figure out a way to make them ergonomic but do it in a way that is not going to break the ecosystem.”

It’s just “Angular”

Igor also encouraged Angular users to stop using the version suffix and call it (just) “Angular” instead. The reason behind the decision to drop the version suffix (unless you are talking about “something very specific in a given release”) is that as they are releasing more and more versions, “it’s going to be super confusing for everybody.” Plus, because of the stability guarantees that they have “there is no big difference between Angular 4 and Angular 2.”

According to the tentative schedule, Angular 4 will be released in March 2017, Angular 5 in September/October 2017, Angular 6 in March 2018 and Angular 7 in September/October 2017 — all with minimal breaking changes.