Angular 4 is here

© angular.io
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
<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
TypeScript 2.1 and 2.2 compatibility
Source maps for templates
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?
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
andngContentSelectors
onComponentFactory
. (#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:
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
andngContentSelectors
onComponentFactory
. (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
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
toRenderer2
- rename
RendererTypeV2
toRendererType2
- rename
RendererFactoryV2
toRendererFactory2
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.
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.
<ng-template #loading>Loading...</ng-template> <div *ngIf="userObservable | async; else loading; let user"> {{ user.name }} </div>
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 overridetransform()
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 forIterable<T>
is not required at runtime but a type definitionIterable<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.
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 injectsFoo
but configures it as{provide: Foo, useClass: MockFoo}
. The injection instance will be that ofMockFoo
but the type will beFoo
instead ofany
as in the past. This means that it was possible to call a method onMockFoo
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.
SEE ALSO: Move over 3 — Angular 4 is the next version
“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.
Leave a Reply
Be the First to Comment!