diff --git a/addon/ng2/blueprints/ng2/files/angular-cli-build.js b/addon/ng2/blueprints/ng2/files/angular-cli-build.js
index 2a65109f9b7b..ac452852e06b 100644
--- a/addon/ng2/blueprints/ng2/files/angular-cli-build.js
+++ b/addon/ng2/blueprints/ng2/files/angular-cli-build.js
@@ -3,8 +3,7 @@
 var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 
 module.exports = function(defaults) {
-  var app = new Angular2App(defaults, {
+  return new Angular2App(defaults, {
     vendorNpmFiles: []
   });
-  return app.toTree();
 };
diff --git a/lib/broccoli/angular2-app.js b/lib/broccoli/angular2-app.js
index 67ac87e24dff..ea647f3a23e4 100644
--- a/lib/broccoli/angular2-app.js
+++ b/lib/broccoli/angular2-app.js
@@ -1,23 +1,32 @@
 'use strict';
+const fs = require('fs');
+const glob = require('glob');
 const path = require('path');
+
 const isProduction = require('./is-production');
-const configReplace = require('./broccoli-config-replace');
-const compileWithTypescript = require('./broccoli-typescript');
-const SwManifest = require('./service-worker-manifest').default;
-const fs = require('fs');
-const Funnel = require('broccoli-funnel');
-const mergeTrees = require('broccoli-merge-trees');
-const uglify = require('broccoli-uglify-js');
+const BroccoliPlugin = require('broccoli-writer');
+const BroccoliConfigReplace = require('./broccoli-config-replace');
+const BroccoliTypescript = require('./broccoli-typescript');
+const BroccoliSwManifest = require('./service-worker-manifest').default;
+const BroccoliFunnel = require('broccoli-funnel');
+const BroccoliMergeTrees = require('broccoli-merge-trees');
+const BroccoliUglify = require('broccoli-uglify-js');
 const Project = require('ember-cli/lib/models/project');
-const glob = require('glob');
 
 
-class Angular2App {
-  constructor(defaults, options) {
+class Angular2App extends BroccoliPlugin {
+  constructor(project, inputNode, options) {
+    if (!options) {
+      options = inputNode;
+      inputNode = null;
+    }
+
+    super();
     options = options || {};
 
     this._options = options;
     this._sourceDir = options.sourceDir || 'src/client';
+    this._inputNode = inputNode || this._sourceDir;
     this._destDir = options.destDir || '';
 
     // By default, add all spec files to the tsCompiler.
@@ -27,6 +36,33 @@ class Angular2App {
 
     this._initProject();
     this._notifyAddonIncluded();
+
+    this._tree = this._buildTree();
+  }
+
+  /**
+   * For backward compatibility.
+   * @public
+   * @method toTree
+   * @return {BroccoliPlugin} A broccoli plugin.
+   */
+  toTree() {
+    // eslint-disable-next-line no-console
+    console.warn('Angular2App is now a broccoli plugin. Calling toTree() is deprecated.');
+    return this;
+  }
+
+  /**
+   * @override
+   */
+  read(readTree) {
+    return this._tree.read(readTree);
+  }
+  /**
+   * @override
+   */
+  cleanup() {
+    return this._tree.cleanup();
   }
 
   /**
@@ -39,11 +75,11 @@ class Angular2App {
    * - Apply/remove stuff based on the environment (dev|prod)
    * - Return the app trees to be extended
    *
-   * @public
-   * @method toTree
-   * @return {Array<Tree>} The app trees that can be used to extend the build.
+   * @private
+   * @method _buildTree
+   * @return {BroccoliFunnel} The app trees that can be used to extend the build.
    */
-  toTree() {
+  _buildTree() {
     var assetTree = this._getAssetsTree();
     var tsTree = this._getTsTree();
     var indexTree = this._getIndexTree();
@@ -57,18 +93,18 @@ class Angular2App {
     }
 
     buildTrees = buildTrees.concat(
-        require('./angular-broccoli-sass').makeBroccoliTree(this._sourceDir,
+        require('./angular-broccoli-sass').makeBroccoliTree(this._inputNode,
                                                             this._options.sassCompiler),
-        require('./angular-broccoli-less').makeBroccoliTree(this._sourceDir,
+        require('./angular-broccoli-less').makeBroccoliTree(this._inputNode,
                                                             this._options.lessCompiler),
-        require('./angular-broccoli-stylus').makeBroccoliTree(this._sourceDir,
+        require('./angular-broccoli-stylus').makeBroccoliTree(this._inputNode,
                                                               this._options.stylusCompiler),
-        require('./angular-broccoli-compass').makeBroccoliTree(this._sourceDir,
+        require('./angular-broccoli-compass').makeBroccoliTree(this._inputNode,
                                                                this._options.compassCompiler)
       ).filter(x => !!x);
 
-    var merged = mergeTrees(buildTrees, { overwrite: true });
-    return new Funnel(mergeTrees([merged, new SwManifest([merged])]), {
+    var merged = BroccoliMergeTrees(buildTrees, { overwrite: true });
+    return new BroccoliFunnel(BroccoliMergeTrees([merged, new BroccoliSwManifest([merged])]), {
       destDir: this._destDir
     });
   }
@@ -184,13 +220,13 @@ class Angular2App {
       'index.html'
     ];
 
-    var index = new Funnel(this._sourceDir, {
+    var index = new BroccoliFunnel(this._inputNode, {
       files: files,
-      description: 'Funnel: index.html'
+      description: 'BroccoliFunnel: index.html'
     });
 
 
-    return configReplace(index, {
+    return BroccoliConfigReplace(index, {
       files: [htmlName],
       patterns: this._getReplacePatterns()
     });
@@ -204,7 +240,7 @@ class Angular2App {
    * @return {Tree} Tree for the src dir.
    */
   _getSourceTree() {
-    return new Funnel(this._sourceDir, {
+    return new BroccoliFunnel(this._inputNode, {
       include: ['*.ts', '**/*.ts', '**/*.d.ts'],
       destDir: this._sourceDir
     });
@@ -218,7 +254,7 @@ class Angular2App {
    * @return {Tree} Tree for the src dir.
    */
   _getTypingsTree() {
-    return new Funnel('typings', {
+    return new BroccoliFunnel('typings', {
       include: ['browser.d.ts', 'browser/**'],
       destDir: 'typings'
     });
@@ -266,18 +302,18 @@ class Angular2App {
     // element.
     tsconfig.files = tsconfig.files.map(name => path.join(this._sourceDir, name));
 
-    var mergedTree = mergeTrees([sourceTree, typingsTree, configTree], { overwrite: true });
-    var tsTree = new compileWithTypescript(mergedTree, tsconfig);
+    var mergedTree = BroccoliMergeTrees([sourceTree, typingsTree, configTree], { overwrite: true });
+    var tsTree = new BroccoliTypescript(mergedTree, tsconfig);
 
     var tsTreeExcludes = ['*.d.ts', 'tsconfig.json'];
     var excludeSpecFiles = '**/*.spec.*';
 
     if (isProduction) {
       tsTreeExcludes.push(excludeSpecFiles);
-      tsTree = uglify(tsTree);
+      tsTree = BroccoliUglify(tsTree);
     }
 
-    tsTree = new Funnel(tsTree, {
+    tsTree = new BroccoliFunnel(tsTree, {
       srcDir: this._sourceDir,
       exclude: tsTreeExcludes
     });
@@ -311,12 +347,10 @@ class Angular2App {
       vendorNpmFiles = vendorNpmFiles.concat(this._options.vendorNpmFiles);
     }
 
-    var vendorNpmTree = new Funnel('node_modules', {
+    return new BroccoliFunnel('node_modules', {
       include: vendorNpmFiles,
       destDir: 'vendor'
     });
-
-    return vendorNpmTree;
   }
 
   /**
@@ -327,8 +361,7 @@ class Angular2App {
    * @return {Tree} The assets tree.
    */
   _getAssetsTree() {
-    return new Funnel(this._sourceDir, {
-      include: ['**/*.*'],
+    return new BroccoliFunnel(this._inputNode, {
       exclude: [
         '**/*.ts',
         '**/*.js',
@@ -349,7 +382,7 @@ class Angular2App {
    * @return {Tree} The dotfiles exclusion tree.
    */
   _getPublicTree() {
-    return new Funnel('public', {
+    return new BroccoliFunnel('public', {
       exclude: ['**/.*'],
       allowEmpty: true
     });
@@ -364,8 +397,8 @@ class Angular2App {
    */
   _getConfigTree() {
     var envConfigFile = isProduction ? 'environment.prod.ts' : 'environment.dev.ts';
-    // console.log(envConfigFile);
-    return new Funnel('config', {
+
+    return new BroccoliFunnel('config', {
       include: [envConfigFile],
       destDir: 'src/client/app',
       getDestinationPath: () => 'environment.ts'