chore(build): allow to run examples and benchmarks without bundles

The bundles will only be used if the flag `--useBundles` is passed to `gulp build.js`.

gulpfile.js

@@ -369,7 +369,7 @@ function proxyServeDart() {
 
 // ------------------
 // web servers
-gulp.task('serve.js.dev', ['build.js'], function(neverDone) {
+gulp.task('serve.js.dev', ['build.js.dev'], function(neverDone) {
   var watch = require('./tools/build/watch');
 
   watch('modules/**', {ignoreInitial: true}, '!broccoli.js.dev');
@@ -980,15 +980,19 @@ gulp.task('!build.tools', function() {
 gulp.task('broccoli.js.dev', ['build.tools'],
           function(done) { runSequence('!broccoli.js.dev', sequenceComplete(done)); });
 
-gulp.task(
+gulp.task('!broccoli.js.dev', () => angularBuilder.rebuildBrowserDevTree({
-    '!broccoli.js.dev',
+  generateEs6: generateEs6,
-    () => angularBuilder.rebuildBrowserDevTree(
+  projects: cliArgsProjects,
-        {generateEs6: generateEs6, projects: cliArgsProjects, noTypeChecks: cliArgs.noTypeChecks}));
+  noTypeChecks: cliArgs.noTypeChecks,
+  useBundles: cliArgs.useBundles
+}));
 
-gulp.task(
+gulp.task('!broccoli.js.prod', () => angularBuilder.rebuildBrowserProdTree({
-    '!broccoli.js.prod',
+  generateEs6: generateEs6,
-    () => angularBuilder.rebuildBrowserProdTree(
+  projects: cliArgsProjects,
-        {generateEs6: generateEs6, projects: cliArgsProjects, noTypeChecks: cliArgs.noTypeChecks}));
+  noTypeChecks: cliArgs.noTypeChecks,
+  useBundles: cliArgs.useBundles
+}));
 
 gulp.task('build.js.dev', ['build/clean.js'], function(done) {
   runSequence('broccoli.js.dev', 'build.css.material', sequenceComplete(done));
@@ -1011,9 +1015,12 @@ var firstBuildJsCjs = true;
  * private task
  */
 gulp.task('!build.js.cjs', function() {
-  return angularBuilder
+  return angularBuilder.rebuildNodeTree({
-      .rebuildNodeTree(
+                         generateEs6: generateEs6,
-          {generateEs6: generateEs6, projects: cliArgsProjects, noTypeChecks: cliArgs.noTypeChecks})
+                         projects: cliArgsProjects,
+                         noTypeChecks: cliArgs.noTypeChecks,
+                         useBundles: cliArgs.useBundles
+                       })
       .then(function() {
         if (firstBuildJsCjs) {
           firstBuildJsCjs = false;

scripts/ci/build_js.sh

@@ -8,4 +8,4 @@ SCRIPT_DIR=$(dirname $0)
 source $SCRIPT_DIR/env_dart.sh
 cd $SCRIPT_DIR/../..
 
-node --max-old-space-size=2000 ./node_modules/.bin/gulp build.js
+node --max-old-space-size=2000 ./node_modules/.bin/gulp build.js --useBundles

tools/broccoli/angular_builder.ts

@@ -15,6 +15,7 @@ type Options = {
   projects: ProjectMap;
 noTypeChecks: boolean;
 generateEs6: boolean;
+useBundles: boolean;
 }
 ;
 
@@ -73,7 +74,8 @@ export class AngularBuilder {
           sourceMaps: true,
           projects: opts.projects,
           noTypeChecks: opts.noTypeChecks,
-          generateEs6: opts.generateEs6
+          generateEs6: opts.generateEs6,
+          useBundles: opts.useBundles
         },
         path.join(this.outputPath, 'js', 'dev'));
     return new broccoli.Builder(tree);
@@ -88,7 +90,8 @@ export class AngularBuilder {
           sourceMaps: false,
           projects: opts.projects,
           noTypeChecks: opts.noTypeChecks,
-          generateEs6: opts.generateEs6
+          generateEs6: opts.generateEs6,
+          useBundles: opts.useBundles
         },
         path.join(this.outputPath, 'js', 'prod'));
     return new broccoli.Builder(tree);

tools/broccoli/html-replace/SCRIPTS.html

@@ -1,26 +1,48 @@
 <script src="es6-shim.js"></script>
 <script src="system.src.js"></script>
 <script>
+  var scriptUrls;
+  var loadRuntimePackages = [
+    'angular2_material',
+    'benchmarks',
+    'playground',
+    // TODO(rado): These helpers don't end up in the bundle, thus they should
+    // not even be in src/*. Move them!
+    'angular2/src/testing/benchmark_util',
+    'angular2/src/facade/browser',
+    'angular2/bootstrap',
+    'rxjs'
+  ];
+  if (@@USE_BUNDLES) {
+    scriptUrls = [
+      '/bundle/angular2-polyfills.js',
+      '/bundle/angular2.dev.js',
+      '/bundle/http.js',
+      '/bundle/router.dev.js',
+      '/rxjs/bundles/Rx.js'
+    ];
+  } else {
+    console.warn("Not using the Angular 2 bundle. "+
+        "Don't use this configuration for e2e/performance tests!")
+    loadRuntimePackages.push('angular2');
+    scriptUrls = [
+      'Reflect.js',
+      'zone-microtask.js',
+      'long-stack-trace-zone.js'
+    ];
+  }
+  var systemJsPackages = {};
+  loadRuntimePackages.forEach(function(pck) {
+    systemJsPackages[pck] = {defaultExtension: 'js'};
+  });
   System.config({
     baseURL: '/',
-    packages: {
+    packages: systemJsPackages
-      'angular2_material': {defaultExtension: 'js'},
-      'benchmarks': {defaultExtension: 'js'},
-      'playground': {defaultExtension: 'js'},
-      // TODO(rado): These helpers don't end up in the bundle, thus they should
-      // not even be in src/*. Move them!
-      'angular2/src/testing/benchmark_util': {defaultExtension: 'js'},
-      'angular2/src/facade/browser': {defaultExtension: 'js'},
-      'angular2/bootstrap': {defaultExtension: 'js'},
-      'rxjs': {defaultExtension: 'js'},
-    }
   });
+  for (var i=0; i<scriptUrls.length; i++) {
+    document.write('<script src="'+scriptUrls[i]+'"></'+'script>');
+  }
 </script>
-<script src="/bundle/angular2-polyfills.js"></script>
-<script src="/bundle/angular2.dev.js"></script>
-<script src="/bundle/http.js"></script>
-<script src="/bundle/router.dev.js"></script>
-<script src="/rxjs/bundles/Rx.js"></script>
 <script>
   var filename = '@@PATH/@@FILENAME';
   System.import(filename).then(function(m) { m.main(); }, console.error.bind(console));

tools/broccoli/html-replace/SCRIPTS_benchmarks.html

@@ -2,24 +2,48 @@
 <script src="url_params_to_form.js"></script>
 <script src="system.src.js"></script>
 <script>
+  var scriptUrls;
+  var loadRuntimePackages = [
+    'angular2_material',
+    'benchmarks',
+    'playground',
+    // TODO(rado): These helpers don't end up in the bundle, thus they should
+    // not even be in src/*. Move them!
+    'angular2/src/testing/benchmark_util',
+    'angular2/src/facade/browser',
+    'angular2/bootstrap',
+    'rxjs'
+  ];
+  if (@@USE_BUNDLES) {
+    scriptUrls = [
+      '/bundle/angular2-polyfills.js',
+      '/bundle/angular2.dev.js',
+      '/bundle/http.js',
+      '/bundle/router.dev.js',
+      '/rxjs/bundles/Rx.js'
+    ];
+  } else {
+    console.warn("Not using the Angular 2 bundle. "+
+        "Don't use this configuration for e2e/performance tests!")
+    loadRuntimePackages.push('angular2');
+    scriptUrls = [
+      'Reflect.js',
+      'zone-microtask.js',
+      'long-stack-trace-zone.js'
+    ];
+  }
+  var systemJsPackages = {};
+  loadRuntimePackages.forEach(function(pck) {
+    systemJsPackages[pck] = {defaultExtension: 'js'};
+  });
   System.config({
     baseURL: '/',
-    packages: {
+    packages: systemJsPackages
-      'angular2_material': {defaultExtension: 'js'},
-      'benchmarks': {defaultExtension: 'js'},
-      'playground': {defaultExtension: 'js'},
-      // TODO(rado): These helpers don't end up in the bundle, thus they should
-      // not even be in src/*. Move them!
-      'angular2/src/testing/benchmark_util': {defaultExtension: 'js'},
-      'angular2/src/facade/browser': {defaultExtension: 'js'},
-      'angular2/bootstrap': {defaultExtension: 'js'},
-      'rxjs': {defaultExtension: 'js'},
-    }
   });
+  for (var i=0; i<scriptUrls.length; i++) {
+    document.write('<script src="'+scriptUrls[i]+'"></'+'script>');
+  }
 </script>
-<script src="/bundle/angular2-polyfills.js"></script>
-<script src="/bundle/angular2.dev.js"></script>
-<script src="/rxjs/bundles/Rx.js"></script>
 <script>
   var filename = '@@PATH/@@FILENAME';
   System.import(filename).then(function(m) { m.main(); }, console.error.bind(console));

tools/broccoli/trees/browser_tree.ts

@@ -77,6 +77,7 @@ module.exports = function makeBrowserTree(options, destinationPath) {
   const noTypeChecks = options.noTypeChecks;
   const generateEs6 = options.generateEs6;
   const sourceMaps = options.sourceMaps;
+  const useBundles = options.useBundles;
 
   if (modules.angular2) {
     var angular2Tree = new Funnel('modules/angular2', {
@@ -149,6 +150,11 @@ module.exports = function makeBrowserTree(options, destinationPath) {
     }
   };
 
+  var useBundlesPatternReplacement = {
+    match: '@@USE_BUNDLES',
+    replacement: function(replacement, relativePath) { return useBundles; }
+  };
+
   // Check that imports do not break barrel boundaries
   modulesTree = checkImports(modulesTree);
 
@@ -218,7 +224,8 @@ module.exports = function makeBrowserTree(options, destinationPath) {
       patterns: [
         {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS')},
         scriptPathPatternReplacement,
-        scriptFilePatternReplacement
+        scriptFilePatternReplacement,
+        useBundlesPatternReplacement
       ]
     });
   }
@@ -229,7 +236,8 @@ module.exports = function makeBrowserTree(options, destinationPath) {
       patterns: [
         {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS_benchmarks')},
         scriptPathPatternReplacement,
-        scriptFilePatternReplacement
+        scriptFilePatternReplacement,
+        useBundlesPatternReplacement
       ]
     });
   }
@@ -240,7 +248,8 @@ module.exports = function makeBrowserTree(options, destinationPath) {
       patterns: [
         {match: /\$SCRIPTS\$/, replacement: htmlReplace('SCRIPTS_benchmarks_external')},
         scriptPathPatternReplacement,
-        scriptFilePatternReplacement
+        scriptFilePatternReplacement,
+        useBundlesPatternReplacement
       ]
     });
   }