Migrating to angulardart 4.0.0 fails with message Unsupported operation: Using the 'angular2' transformer is required

Question

I just migrated my project from angulardart 3.1.0 to 4.0.0 my pubspec.yaml was:

dependencies:
  angular2: ^3.1.0
  http: ^0.11.0
  #...other deps
dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
    resolved_identifiers:
        BrowserClient: 'package:http/browser_client.dart'
        Client: 'package:http/http.dart'
- dart_to_js_script_rewriter
- $dart2js:
      sourceMaps: true

and became :

dependencies:
  angular: ^4.0.0
  angular_router: ^1.0.2
  angular_components: ^0.8.0
  http: ^0.11.0
  #... other deps
dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular:
    entry_points: web/main.dart
- $dart2js:
      sourceMaps: true
- dart_to_js_script_rewriter

My issue is that in dartium (Version 50.0.2661.108 (64-bit) "on mac") I have this error on startup:

VM970:1 Uncaught Unhandled exception:
Unsupported operation: Using the 'angular2' transformer is required.

Please see https://webdev.dartlang.org/angular/tutorial for setup instructions,
and ensure your 'pubspec.yaml' file is configured to invoke the 'angular2'
transformer on your application's entry point.
#0      bootstrap (package:angular/src/platform/bootstrap.dart:107:5)
#1      main (http://localhost:3000/web/main.dart:50:3)
<asynchronous suspension>

And when I try to run pub build it does not recognize ngIf and ngFor :

Error: Template parse errors: line 13, column 11 of UserListPopup: ParseErrorLevel.FATAL: Property binding ngIf not used by any directive on an embedded template

For reference, this is my entire pubspec.yaml now:

name: share_place
description: Collaborate around your documents in a seamless way
version: 0.0.1
environment:
  sdk: '>=1.24.0 <2.0.0'
dependencies:
  angular: ^4.0.0
  angular_router: ^1.0.2
  angular_components: ^0.8.0
  http: ^0.11.0
  stream_transformers: ^0.3.0
  http_server: any
  js: ^0.6.0
  uuid: ^0.5.3
  croppie_dart: ^2.4.1
  stack_trace: any
  source_map_stack_trace: any
  source_maps: any
  validator: ">=0.0.4 <0.1.0"
dev_dependencies:
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular:
    entry_points:
    - web/main.dart
- $dart2js:
      sourceMaps: true
- dart_to_js_script_rewriter

This is reproducible on twos machines I tested to upgrade dart on (windows and mac). I still didn't try to uninstall reinstall

Here's the content of my main.dart there's nothing special I think:

int version;

Future loadLastVersion() async {
  String version = await html.HttpRequest.getString('/sp/util/loadAppVersion');
  if (conf.appVersion != version) {
    if (conf.isWebApp) {
      html.window.alert("you have an old version : ${conf.appVersion} we must load the new version :${version}");
      html.window.location.assign("${conf.remoteUrl}/v${version}");
    } else {
      html.window.alert("A new version ${version} is available! Please download it from : https://www.share.place/downloads");
    }
  }
}

Future main() async {
  loadLastVersion();

  Logger.root.level = Level.FINE;
  Logger.root.onRecord.listen((LogRecord rec) {
    if (rec.level == Level.SEVERE || rec.level == Level.WARNING)
      html.window.console.error('${rec.level.name} - ${rec.loggerName} : ${rec.message}');
    else if (rec.level == Level.INFO)
      html.window.console.info('${rec.level.name} - ${rec.loggerName} : ${rec.message}');
    else
      html.window.console.debug('${rec.level.name} - ${rec.loggerName} : ${rec.message}');
  });

  bootstrap(AppComponent, [provide(Client, useClass: BrowserDataService), provide(ExceptionHandler, useClass: ErrorHandler), Environment, EventBus]
      // Using a real back end? Import browser_client.dart and change the above to
      // [provide(Client, useFactory: () => new BrowserClient(), deps: [])]
      );
}

Answer 1

This is not supported anymore

platform_directives:
- 'package:angular2/common.dart#COMMON_DIRECTIVES'
platform_pipes:
- 'package:angular2/common.dart#COMMON_PIPES'

You need to add to @Component(...)

directives: const [COMMON_DIRECTIVES]

pipes: const [COMMON_PIPES]

to every component where you use them.