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

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.