@MirrorsUsed is critical. It may be possible to embed them inside Angular.dart, but any use that I've seen lists them in your main.dart file. e.g.

https://github.com/jbdeboer/angular-dart-js-size/blob/master/main.dart

This comment was originally written by trace...@google.com

I added the mirrors code described here:

https://github.com/jbdeboer/angular-dart-js-size/blob/master/main.dart

and the results are not what I expect. The size of the main.dart.js is exactly the same size, or in some cases, actually a little bit larger than when I don't have the MirrorsUsed annotation.

Steps to reproduce.

1. Run pub build on the following main.dart:
   import 'package:angular/angular.dart';
   main() {
     ngBootstrap();
   }
2. ls -l build/
   -rw-r--r-- 1 tracey staff 2884772 Nov 5 16:15 main.dart.js
3. Run pub build on the following main.dart (copied James' main.dart from the link above):

@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  'NodeTreeSanitizer'
  ],
  override: '*')

import 'dart:mirrors';
import 'package:angular/angular.dart';

main() {
  ngBootstrap();
}

1. ls -l build/
   -rw-r--r-- 1 tracey staff 2884772 Nov 5 16:15 main.dart.js
2. Because I thought it was odd to have the import statements AFTER the annotation (is that correct? incorrect? doesn't matter?) I changed the main.dart to put the imports at the top of the file and then ran pub build.

import 'dart:mirrors';
import 'package:angular/angular.dart';

@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  'NodeTreeSanitizer'
  ],
  override: '*')

main() {
  ngBootstrap();
}

1. ls -l build/
   -rw-r--r-- 1 tracey staff 2885004 Nov 5 16:13 main.dart.js

in this last case, main.dart.js is actually slightly bigger.

Not sure what's going on, or what the right magic incantation for MirrorsUsed should be.

You might take a look at how polymer.dart is using @­MirrorsUsed - see https://code.google.com/p/dart/source/browse/branches/bleeding_edge/dart/pkg/polymer/lib/polymer.dart .

cc @jmesserly.
cc @sigmundch.

1. Because I thought it was odd to have the import statements AFTER the annotation (is that correct? incorrect? doesn't matter?) I changed the main.dart to put the imports at the top of the file and then ran pub build.

That won't work -- it will be totally ignored.

In Dart, @­Foo is metadata. It is similar to metadata in Java and C#, and similar syntactically to Python's decorators. It must come before the member:

    @­Foo() int bar = 42; // @­Foo() is metadata on my variable here

In the case of MirrorsUsed, it must appear as metadata of the import directive:

    @­MirrorsUsed(...)
    import 'dart:mirrors';

here's what I just did:

$ git clone https://github.com/jbdeboer/angular-dart-js-size.git
$ cd angular-dart-js-size
$ patch -p1

--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -5,5 +5,6 @­@ author: "James deBoer <james@huronbox.com>"
 homepage: https://github.com/jbdeboer/dart2js-size-chart
 
 dependencies:

• angular: any
• angular:
• git: https://github.com/angular/angular.dart.git
     browser: any
  $ pub get
  $ dart --version
  Dart VM version: 0.8.10.4_r29892 (Tue Nov 5 05:55:11 2013) on "linux_x64"
  $ dart2js --minify main.dart -o main.dart.js && gzip -9 main.dart.js
  $ ls -l main.dart.js.gz

result:
170KB minify+gzip
681KB minfiy only

In my pubspec.lock, most packages are:
    version: "0.8.10+4"

Things to try:

• Upgrade your Dart SDK
• run "pub upgrade"

This comment was originally written by trace...@google.com

OK. I finally got some results from the Mirrors Used.

I'm not sure what happened before. I copied James' code exactly, and the pub build did literally nothing to reduce the code size.

That was on my development environment at home.

Now I've done the same thing from my development environment at work, and I get the results I expect.

I'm not sure what's different between the two environments. I'll have to go look at the version of Dart I've got in the non-functioning environment. I wonder if it's too old.

without mirrors:
-rw-r----- 1 traceyp eng 2.7M Nov 6 09:07 main.dart.js

with mirrors:
-rw-r----- 1 traceyp eng 710K Nov 6 09:08 main.dart.js

This comment was originally written by robb...@robbieone.com

Got the same here 2697KB for main.dart.js

pub upgrade
pub build

the build dir is around 6MO

The same occurs by compiling with the IDE directly in the web dir.

The explicit command --minify produce the same size when runned on main.dart.

Dart Editor version 0.8.10_r29803
Dart SDK version 0.8.10.3_r29803

note : The pubspec was a reflink invalid under windows so I replace it with the content of the same one in the root dir.

This comment was originally written by scribe....@gmail.com

When I use the above code for MirrorsUsed according to the example in #­2 and James' repo, I do see a reduction in code from 2.7M to around 700K, but it breaks the compiled js code, with a browser reported error something to the effect that Uncaught Unsupported Error: Cannot find class for: Ft. The error is reported from zone.dart.

This comment was originally written by pavel.j...@gmail.com

@scribe.griff
did you include your own libraries in the @­MirrorsUsed?

This comment was originally written by scribe.gri...@gmail.com

Even trying this on a simple example (ie, no other libraries than angular), I always get some sort of cannot find class error, but it could be I am not using it correctly. The example I am using is the following:

Html:
<!DOCTYPE html>

<html>
  <head>
    <title>simple echo - angular</title>
    <link rel="stylesheet" href="../angular_standard.css">
    <link rel="stylesheet" href="../bootstrap.min.css">
    <script type="application/dart" src="simple_echo.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body ng-app ng-cloak>
    <span>Insert your name:</span>
    <input type="text" ng-model="user.name" />
    <h4>Echo: {{user.name}}</h4>
  </body>
</html>

Dart:

@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  'perf_api',
  'NodeTreeSanitizer'
  ],
  override: '*')
import 'dart:mirrors';

import 'package:angular/angular.dart';

main() {
  ngBootstrap();
}

Without using @­MirrorsUsed, renders fine in both Dartium (run as Dart) and Chrome (run as js) minified to 2.8Mb. When the @­MirrorsUsed is included, minified size is 678kb, but nothing renders in Chrome with js. Chrome reports the error Uncaught Unsupported operation: Cannot find class for: Ft. I can change what libraries I include for MirrorsUsed and can achieve different compiled js sizes, but it never renders. The only thing that changes is the "missing" class name (ie, Ft, Fr, and others I can't remember but are similar). Should I be including any other libraries here?

Thanks a lot.

This comment was originally written by pavel.j...@gmail.com

Try running dart2js without --minify to see what is the original class name in "Cannot find class for: Ft"

This comment was originally written by terry.w...@gmail.com

I'm getting the same issue, the error response reported is "Uncaught Unsupported operation: Cannot find class for: NodeTreeSanitizer"

NodeTreeSanitizer is included in the @­MirrorsUsed.

Thanks

Yes... you need to include NodeTreeSanitizer in @­MirrorsUsed as a Type literal (note no quotes and dart:html import):

@MirrorsUsed(targets: const[
    ...
    NodeTreeSanitizer
  ],
  override: '*')
import 'dart:mirrors';

import 'dart:html';

This comment was originally written by terry.w...@gmail.com

If we include NodeTreeSanitizer as Type literal (without quotes), the Dart Editor complains;
  Multiple markers at this line
    - 'const' lists must have all constant values
    - Undefined name 'NodeTreeSanitizer'
    - Arguments of a constant creation must be constant
     expressions

did you import 'dart:html'?

This comment was originally written by terry.w...@gmail.com

Sorry, just realised I had import 'dart:html' as html, this worked. Thanks.

This comment was originally written by scribe....@gmail.com

I removed the minify tag, removed the quotes from NodeTreeSanitizer and imported 'dart:html'. Now the error is Uncaught TypeError: Cannot call method 'get$parameters' of undefined. Here's what I have now for a dart file:

@MirrorsUsed(targets: const[
  'angular',
  'angular.core',
  'angular.core.dom',
  'angular.filter',
  'angular.perf',
  'angular.directive',
  'angular.routing',
  'angular.core.parser',
  NodeTreeSanitizer
  ],
  override: '*')

import 'dart:mirrors';
import 'dart:html';
import 'package:angular/angular.dart';

main() {
  ngBootstrap();
}

Try to follow this: https://github.com/angular/angular.dart.tutorial/tree/master/Chapter_07#mirrorsused