AngularDart 4.0 adds preliminary support for component inheritance and more

© Shutterstock / Natvas
AngularDart 4.0 is here. First of all, you should know that this is the last stable release that fully supports Dart 1.24.0. Also, since package:angular2 has been renamed to package:angular, you need to manually update your dependencies. That being said, let’s see what’s new.
AngularDart 4.0 is here. If the previous release didn’t convince you to give it a try, perhaps this one will do the trick.
There are a couple of things that you should know about AngularDart 4.0. According to the changelog, it is now named package:angular
instead of package:angular2
. Therefore, you cannot pub upgrade
from angular2 3.x
-> angular2 4.x
and you need to manually update your dependencies instead:
dependencies: angular: ^4.0.0
Furthermore, this release is the last stable release that fully supports Dart 1.24.0. From now on, AngularDart will start tracking the upcoming Dart 2.0 alpha SDK. Although small patches might be released [if needed], “the plan is to release 4.0.0 and then immediately start working on 5.0.0-alpha, which uses the new Dart SDK.”
SEE ALSO: AngularDart 3.0 goes all in, flaunts smaller generated code
AngularDart 4.0 overview:
Breaking changes
@Pipe
-annotated classes are no longer considered@Injectable
, in that they aren’t usable within aReflectiveInjector
. You can get this behavior back by adding the@Injectable()
annotation to the@Pipe
-annotated class. Similar changes are in progress for@Component
and@Directive
.PLATFORM_{PIPES|DIRECTIVES|PROVIDERS}
, which was only supported in an older version of the compiler, was removed. All of these must be manually included in lists in an@Directive
or@Component
annotation.- Removed
formDirectives
fromCOMMON_DIRECTIVES
list; replaceCOMMON_DIRECTIVES
with[CORE_DIRECTIVES, formDirectives]
for components that use forms directives. - Forms API has been moved to a new package,
angular_forms
, which is going to be versioned and maintained alongside the core framework. This should allow better segmentation of code and easier contributions. - The router package is now being published separate as
package:angular_router
(not throughpackage:angular/router.dart
). In the near future it will be updated to a more Dart idiomatic “2.0” router, but for now it is an exact replica of the previous router. - Removed
@{Component|Directive}#queries
. This is replable using the same member-level annotation (i.e.@{Content|View}Child{ren}
). DynamicComponentLoader
was renamedSlowComponentLoader
to encourage users to preferComponentLoader
. Additionally, argumentsprojectableNodes:
andonDestroy:
callbacks were removed – they were mostly unused, and confusing since they were undocumented.- Removed
angular/platform/browser_static.dart
; replace imports withangular/angular.dart
. - Removed
angular/platform/common_dom.dart
; replace imports withangular/angular.dart
. - Removed
angular/testing.dart
; Useangular_test
package instead. - Removed
angular/platform/testing.dart
. - Removed
platform/testing/browser_static.dart
. - Removed
MockNgZone
. - Removed
ViewEncapsulation.native
, which is no longer supported. - Renamed
FORM_DIRECTIVES
toformDirectives
. - Removed
angular/common.dart
; replace imports withangular/angular.dart
. - Removed
angular/compiler.dart
; compiler should only be invoked via the transformers or viapkg:build
directly usingangular/source_gen.dart
. - Deprecated
@View()
annotation was completely removed. - Deprecated second parameter to
ExceptionHandler
was completely removed. - Removed the runtime (
dart:mirrors
-based) interpreter. It is now required to always use the AngularDart transformer to pre-compile the code, even during development time in Dartium.package:angular2/reflection.dart
was also removed. - The
bootstrap
function now always throws a runtime exception, and both it andbootstrapStatic
are accessible viaangular.dart
instead ofplatform/browser.dart
andplatform/browser_static.dart
#357. - Returning
false
from an event handler will no longer cancel the event. See #387 for details. - Removed
Query
andViewQuery
. Please useContentChild
/ContentChildren
andViewChild
/ViewChildren
in their place instead. - Removed the
use_analyzer
flag for the transformer. This is alwaystrue
. #404. - Removed all other unused or unsupported flags from the transformer. There is now a single
CompilerFlags
class that is universally supported for all build systems. - Removed a number of classes that were never intended to be public.
- Removed the second parameter to
ExceptionHandler
, which was a no-op anyway. - Removed
outputs
field fromDirective
. Outputs now must be declared using inlineOutput
annotations.
There are 14 bugfixes and one deprecation (support for shadow piercing combinators /deep/
and >>>
to prevent style encapsulation has been deprecated). As far as performance is concerned, there are seven changes including various small reductions to the size of generated code and the runtime.
SEE ALSO: Creating apps with Dart and Stagehand
New features — This is what AngularDart 4.0 can do
There are over a dozen changes including preliminary support for component inheritance, as well as for functional directives. Leon Senft wrote in a Medium post that “as of version 4.0, redeclaring metadata on derived types is no longer necessary!” Components now inherit inputs, outputs, host bindings, host listeners, queries, and view queries from all supertypes.
According to Senft, these annotations are now inherited from all supertypes, including superclasses, interfaces, and mixins.
@ContentChild
/@ContentChildren
@HostBinding
@HostListener
@Input
@Output
@ViewChild
/@ViewChildren
Therefore, you don’t need to redeclare any of the above annotations in a derived class.
Templates, styles, and other
@Directive
parameters are not inherited. Only metadata that is bound to a property or method is inherited. This decision was made because derived types can override accessors and methods, referencing their original implementation viasuper
, whereas no such mechanism exists for the values bound to other metadata.
Although you can still redeclare annotations in derived types, changing the inherited metadata or binding it to a different property is not allowed. “This restriction may be lifted in the future, but for now is necessary to simplify tooling and ensure components and directives are easily substitutable,” Senft added.
If you’d like to know more about component inheritance, check out Senft’s Medium post.
AngularDart now uses a new open sourcing tool called CopyBara (used internally at Google) which simplifies both releasing and taking open source contributions. Thanks to CopyBara, they can release to GitHub more often, and accept PRs more easily.
You can view the bleeding github-sync
branch for what has yet to be merged into master
.
Furthermore, AngularDart 4.0 adds support for functional directives: lightweight, stateless directives that apply a one-time transformation.
- One is defined by annotating a public, top-level function with
@Directive()
. - The function parameters specify its dependencies, similar to the constructor of a regular directive.
- Only the
selector
andproviders
parameters of the@Directive()
annotation are permitted, because the other parameters are stateful. - The function return type must be
void
.
@Directive(selector: '[autoId]') void autoIdDirective(Element element, IdGenerator generator) { element.id = generator.next(); }
These are just some of the new features — for the complete list, check out the changelog.
asap