Skip to content
| Marketplace
Sign in
Visual Studio>Tools>AngularToolbox
AngularToolbox

AngularToolbox

Bernd Wessels

|
6,950 installs
| (1) | Free
The Angular Toolbox adds flexible build automation to Visual Studio Web Projects.
Download

Quickstart: (Version 2.0)

This Visual Studio Extension will process the angular.config file in the root of each project in your solution whenever a relevant file (*.js, *.css, *.less, *.html, angular.config) has been saved.

  • It compiles all configured html templates to javascript and puts them into the angular template cache.
  • It concatenates, compiles and combines all configured JavaScripts.
  • It concatenates and compiles all configured StyleSheets.

Output Window Pane: (New Feature in 2.0)

The Output Window now got a new AngularToolbox Pane. It will show the result of each compilation and can help you to identify problems in your configuration or your JavaScript.

Compiler Arguments: (New Feature in 2.0)

The closurecompiler and yuicompressor elements got a newargs attribute that allows you to add or change the command line arguments used in each compilation.

angular.config Example: (Version 2.0)

            <build debug="false">              <templates>                <generate path="Views" pattern="*.template.html" recursive="true" />                <generate path="Scripts\Common" pattern="*.template.html" recursive="true" />              </templates>              <scripts file="app.js">                <combine file="Scripts\Vendor\jquery\jquery-1.10.2.min.js" />                <combine file="Scripts\Vendor\lodash\lodash.min.js" />                <combine file="Scripts\Vendor\angular\angular-1.2.3.min.js" />                <combine file="Scripts\Vendor\angular-ui-router\angular-ui-router.min.js" />                <combine file="Scripts\Vendor\restangular\restangular.min.js" />                <compile path="Scripts\Common" pattern="*.js" recursive="true" />                <compile path="Scripts\App" pattern="*.js" recursive="true" />              </scripts>              <styles file="app.css">                <compile file="Scripts\Vendor\bootstrap\css\bootstrap-slate-theme.css" />                <compile path="Scripts\Common" pattern="*.css" recursive="true" />                <compile path="Scripts\App" pattern="*.css" recursive="true" />                <compile path="Views\App" pattern="*.css" recursive="true" />              </styles>              <tools>                <closurecompiler file="W:\closure-compiler\Compiler.jar" args="--compilation_level SIMPLE_OPTIMIZATIONS --language_in=ECMASCRIPT5 --warning_level=VERBOSE --jscomp_off=checkVars --jscomp_off=missingProperties" />                <yuicompressor file="W:\yuicompressor\yuicompressor-2.4.7.jar" args="" />              </tools>            </build>        

Generated Files:

These files appear under the angular.config project item and are located in the root of your web project.

 debug="false"

  • app.js
  • app.min.js
  • app.min.map
  • app.debug.js
  • app.templates.js
  • app.css
  • app.debug.css

debug="true"

  • app.debug.js
  • app.templates.js
  • app.debug.css

Important:

  • Java has to be installed and added to your PATH environment variable in order to run the tools.
  • All paths are relative to the project path.
  • The very latest yuicompressor seems to have bugs that prevent it from giving a result. Please use the last know version to be working which is 2.4.7.

Output Window Pane Example: (Successful compilation)

            **********************************************************            Document saved: [angular.config]            **********************************************************            ----------------------------------------------------------            Combine Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\jquery\jquery-1.10.2.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\lodash\lodash.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular\angular-1.2.3.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular-ui-router\angular-ui-router.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\restangular\restangular.min.js            ----------------------------------------------------------            Compile Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.js            W:\InfoDisplay\InfoDisplay\Scripts\App\App.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Admin.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Display.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Home\Home.js            ----------------------------------------------------------            Compile Templates            ----------------------------------------------------------            Views/App/Admin/Admin.template.html            Views/App/Admin/Example1/Example1.template.html            Views/App/Display/Display.template.html            Views/App/Display/Example1/Example1.template.html            Views/App/Home/Home.template.html            Common/angular-ui-carousel/angular-ui-carousel.template.html            ----------------------------------------------------------            Compile Scripts            ----------------------------------------------------------            ...            **********************************************************            Document saved: [angular.config]            **********************************************************            ----------------------------------------------------------            Compile Style Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\bootstrap\css\bootstrap-slate-theme.css            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.css            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.min.css            W:\InfoDisplay\InfoDisplay\Views\App\App.css            W:\InfoDisplay\InfoDisplay\Views\App\App.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Display.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Display.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Example1\Example1.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Example1\Example1.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Display.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Display.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Example1\Example1.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Example1\Example1.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Home\Home.css            W:\InfoDisplay\InfoDisplay\Views\App\Home\Home.min.css            ----------------------------------------------------------            Compile Styles            ----------------------------------------------------------            ...            ----------------------------------------------------------            Finished            ----------------------------------------------------------        

Output Window Pane Example: (Failed compilation due to JavaScript Error)

            **********************************************************            Document saved: [example1.js]            **********************************************************            ----------------------------------------------------------            Combine Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\jquery\jquery-1.10.2.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\lodash\lodash.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular\angular-1.2.3.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular-ui-router\angular-ui-router.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\restangular\restangular.min.js            ----------------------------------------------------------            Compile Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.js            W:\InfoDisplay\InfoDisplay\Scripts\App\App.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Admin.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Display.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Home\Home.js            ----------------------------------------------------------            Compile Templates            ----------------------------------------------------------            Views/App/Admin/Admin.template.html            Views/App/Admin/Example1/Example1.template.html            Views/App/Display/Display.template.html            Views/App/Display/Example1/Example1.template.html            Views/App/Home/Home.template.html            Common/angular-ui-carousel/angular-ui-carousel.template.html            ----------------------------------------------------------            Compile Scripts            ----------------------------------------------------------            ...            ----------------------------------------------------------            Closure Compiler Error            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\app.debug.js:248: ERROR - Parse error. missing } after property list                            );                            ^            1 error(s), 0 warning(s)            ----------------------------------------------------------            Finished            ----------------------------------------------------------        
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft