AngularDart 4.0 adds preliminary support for component inheritance and more

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 a ReflectiveInjector. 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 from COMMON_DIRECTIVES list; replace COMMON_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 through package: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 renamed SlowComponentLoader to encourage users to prefer ComponentLoader. Additionally, arguments projectableNodes: and onDestroy: callbacks were removed – they were mostly unused, and confusing since they were undocumented.
• Removed angular/platform/browser_static.dart; replace imports with angular/angular.dart.
• Removed angular/platform/common_dom.dart; replace imports with angular/angular.dart.
• Removed angular/testing.dart; Use angular_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 to formDirectives.
• Removed angular/common.dart; replace imports with angular/angular.dart.
• Removed angular/compiler.dart; compiler should only be invoked via the transformers or via pkg:build directly using angular/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 and bootstrapStatic are accessible via angular.dart instead of platform/browser.dart and platform/browser_static.dart #357.
• Returning false from an event handler will no longer cancel the event. See #387 for details.
• Removed Query and ViewQuery. Please use ContentChild/ContentChildren and ViewChild/ViewChildren in their place instead.
• Removed the use_analyzer flag for the transformer. This is always true. #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 from Directive. Outputs now must be declared using inline Output 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 via super, 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 and providers 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