How to bundle an Angular app for production

Question

What is the best method to bundle Angular  version 2  4  6       for production on a live web server   Please include the Angular version within answers so we can track better when it moves to later releases

User · Answer

Angular 2 production workflow with SystemJs builder and gulp

Angular.io have quick start tutorial. I copied this tutorial and extended with some simple gulp tasks for bundling everything to dist folder which can be copied to server and work just like that. I tried to optimize everything to work well on Jenkis CI, so node_modules can be cached and don't need to be copied.

Source code with sample app on Github: https://github.com/Anjmao/angular2-production-workflow

Steps to production

Clean typescripts compiled js files and dist folder
Compile typescript files inside app folder
Use SystemJs bundler to bundle everything to dist folder with generated hashes for browser cache refresh
Use gulp-html-replace to replace index.html scripts with bundled versions and copy to dist folder
Copy everything inside assets folder to dist folder

Node: While you always can create your own build process, but I highly recommend to use angular-cli, because it have all needed workflows and it works perfectly now. We are already using it in production and don't have any issues with angular-cli at all.

User · Answer

You can deploy your angular application on github using  angular-cli-ghpages  check out the link to find how to deploy using this cli   the deployed website will be stored in some branch in github typically   gh-pages  use can clone the git branch and use it like static website in your server

User · Answer

Angular CLI 1 x x  Works with Angular 4 x x  5 x x   This supports    Angular 2 x and 4 x Latest Webpack 2 x Angular AoT compiler Routing  normal and lazy  SCSS Custom file bundling  assets  Additional development tools  linter  unit  amp  end-to-end test setups    Initial Setup   ng new project-name --routing   You can add --style scss for SASS  scss support   You can add --ng4 for using Angular 4 instead of Angular 2   After creating the project  the CLI will automatically run npm install for you  If you want to use Yarn instead  or just want to look at the project skeleton without install  check how to do it here   Bundle Steps  Inside the project folder    ng build -prod   At the current version you need to to specify --aot manually  because it can be used in development mode  although that s not practical due to slowness    This also performs AoT compilation for even smaller bundles  no Angular compiler  instead  generated compiler output   The bundles are much smaller with AoT if you use Angular 4 as the generated code is smaller  You can test your app with AoT in development mode  sourcemaps  no minification  and AoT by running ng build --aot   Output  The default output dir is   dist  although it can be changed in   angular-cli json   Deployable Files  The result of build step is the following    Note   lt content-hash gt  refers to hash   fingerprint of the contents of the file that s meant to be a cache busting way  this is possible since Webpack writes the script tags by itself      dist assets Files copied as-is from   src assets      dist index html From   src index html  after adding webpack scripts to it Source template file is configurable in   angular-cli json   dist inline js Small webpack loader   polyfill   dist main  lt content-hash gt  bundle js The main  js file containing all the  js scripts generated   imported   dist styles  lt content-hash gt  bundle js When you use Webpack loaders for CSS  which is the CLI way  they are loaded via JS here   In older versions it also created gzipped versions for checking their size  and  map sourcemaps files  but this is no longer happening as people kept asking to remove these   Other Files  In certain other occasions  you might find other unwanted files folders      out-tsc  From   src tsconfig json s outDir   out-tsc-e2e  From   e2e tsconfig json s outDir   dist ngfactory  From AoT compiler  not configurable without forking the CLI as of beta 16

User · Answer

As of today I still find the Ahead-of-Time Compilation cookbook as the best recipe for production bundling  You can find it here  https   angular io docs ts latest cookbook aot-compiler html  My experience with Angular 2 so far is that AoT creates the smallest builds with almost no loading time  And most important as the question here is about - you only need to ship a few files to production   This seems to be because the Angular compiler will not be shipped with the production builds as the templates are compiled  Ahead of Time   It s also very cool to see your HTML template markup transformed to javascript instructions that would be very hard to reverse engineer into the original HTML   I ve made a simple video where I demonstrate download size  number of files etc  for an Angular 2 app in dev vs AoT build - which you can see here   https   youtu be ZoZDCgQwnmQ  You ll find the source code used in the video here   https   github com fintechneo angular2-templates

User · Answer

2 0 1 Final using Gulp  TypeScript - Target  ES5     OneTime Setup   npm install   run in cmd when direcory is projectFolder    Bundling Steps   npm run bundle   run in cmd when direcory is projectFolder   bundles are generated to projectFolder   bundles      Output   bundles dependencies bundle js   size    1 MB  as small as possible      contains rxjs and angular dependencies  not the whole frameworks   bundles app bundle js   size  depends on your project  mine is   0 5 MB     contains your project    File Structure   projectFolder   app    all components  directives  templates  etc  projectFolder   gulpfile js     var gulp   require  gulp      tsc   require  gulp-typescript      Builder   require  systemjs-builder      inlineNg2Template   require  gulp-inline-ng2-template     gulp task  bundle     bundle-app    bundle-dependencies    function        gulp task  inline-templates   function        return gulp src  app      ts        pipe inlineNg2Template   useRelativePaths  true  indent  0  removeLineBreaks  true         pipe tsc          target    ES5          module    system          moduleResolution    node          sourceMap   true         emitDecoratorMetadata   true         experimentalDecorators   true         removeComments   true         noImplicitAny   false              pipe gulp dest  dist app          gulp task  bundle-app     inline-templates    function          optional constructor options      sets the baseURL and loads the configuration file   var builder   new Builder      dist-systemjs config js       return builder      bundle  dist app      -   angular      js  -  rxjs      js     bundles app bundle js     minify  true        then function           console log  Build complete                catch function err          console log  Build error          console log err                gulp task  bundle-dependencies     inline-templates    function          optional constructor options      sets the baseURL and loads the configuration file   var builder   new Builder      dist-systemjs config js       return builder      bundle  dist app      js -  dist app      js     bundles dependencies bundle js     minify  true        then function           console log  Build complete                catch function err          console log  Build error          console log err                  projectFolder   package json  same as Quickstart guide  just shown devDependencies and npm-scripts required to bundle           name    angular2-quickstart      version    1 0 0      scripts                   gulp    gulp         rimraf    rimraf         bundle    gulp bundle         postbundle    rimraf dist          license    ISC      dependencies                     devDependencies          rimraf     2 5 2        gulp     3 9 1        gulp-typescript    2 13 6        gulp-inline-ng2-template    2 0 1        systemjs-builder     0 15 16           projectFolder   systemjs config js  same as Quickstart guide  not available there anymore       function global          map tells the System loader where to look for things   var map          app                           app        rxjs                          node modules rxjs        angular2-in-memory-web-api    node modules angular2-in-memory-web-api         angular                      node modules  angular             packages tells the System loader how to load when no filename and or no extension   var packages          app                            main   app boot js    defaultExtension   js          rxjs                           defaultExtension   js          angular2-in-memory-web-api     defaultExtension   js            var packageNames           angular common         angular compiler         angular core         angular forms         angular http         angular platform-browser         angular platform-browser-dynamic         angular router         angular router-deprecated         angular testing         angular upgrade              add package entries for angular packages in the form   angular common     main   index js   defaultExtension   js      packageNames forEach function pkgName        packages pkgName      main   index js   defaultExtension   js              var config         map  map      packages  packages            filterSystemConfig - index asp s chance to modify config before we register it    if  global filterSystemConfig    global filterSystemConfig config        System config config       this      projetcFolder   dist-systemjs config js  just shown the difference with systemjs config json      var map          app                           dist app           projectFolder   index html  production  - The order of the script tags is critical  Placing the dist-systemjs config js tag after the bundle tags would still allow the program to run but the dependency bundle would be ignored and dependencies would be loaded from the node modules folder       lt  doctype html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8   gt     lt meta name  viewport  content  width device-width  initial-scale 1   gt     lt base href      gt     lt title gt Angular lt  title gt     lt link rel  stylesheet  type  text css  href  style css   gt   lt  head gt   lt body gt    lt my-app gt    loading     lt  my-app gt    lt  -- Polyfill s  for older browsers -- gt   lt script src  node modules core-js client shim min js  gt  lt  script gt    lt script src  node modules zone js dist zone min js  gt  lt  script gt   lt script src  node modules reflect-metadata Reflect js  gt  lt  script gt   lt script src  node modules systemjs dist system js  gt  lt  script gt    lt script src  dist-systemjs config js  gt  lt  script gt   lt  -- Project Bundles  Note that these have to be loaded AFTER the systemjs config script -- gt   lt script src  bundles dependencies bundle js  gt  lt  script gt   lt script src  bundles app bundle js  gt  lt  script gt    lt script gt      System import  app boot   catch function  err          console error err            lt  script gt   lt  body gt   lt  html gt     projectFolder   app   boot ts is where the bootstrap is      The best I could do yet

User · Answer

Angular 2 with Webpack  without CLI setup   1- The tutorial by the Angular2 team  The Angular2 team published a tutorial for using Webpack  I created and placed the files from the tutorial in a small GitHub seed project  So you can quickly try the workflow   Instructions    npm install npm start  For development  This will create a virtual  dist  folder that will be livereloaded at your localhost address  npm run build  For production   This will create a physical  dist  folder version    than can be sent to a webserver  The dist   folder is 7 8MB but only    234KB is actually required to load the   page in a web browser      2 - A Webkit starter kit    This Webpack Starter Kit offers some more testing features than the above tutorial and seem quite popular

User · Answer

Please try below CLI command in current project directory   It will create dist folder bundle  so you can upload all files within dist folder for deployments   ng build --prod --aot --base-href

User · Answer

Best  depends on the scenario  There are times when you only care about the smallest possible single bundle  but in large apps you may have to consider lazy loading  At some point it becomes impractical to serve the entire app as a single bundle   In the latter case Webpack is generally the best way since it supports code splitting   For a single bundle I would consider Rollup  or the Closure compiler if you are feeling brave  -   I have created samples of all Angular bundlers I ve ever used here  http   www syntaxsuccess com viewarticle angular-production-builds  The code can be found here  https   github com thelgevold angular-2-samples  Angular version  4 1 x

User · Answer

Production build with           - Angular Rc5          - Gulp          - typescripts           - systemjs            1 con-cat all js files  and css files include on index html using   gulp-concat             - styles css  all css concat in this files            - shims js all js concat in this files           2 copy all images and fonts as well as html files  with gulp task to   dist            3 Bundling -minify angular libraries and app components mentioned in systemjs config js file           Using gulp   systemjs-builder               SystemBuilder   require  systemjs-builder                gulp task  system-build     tsc    function                      var builder   new SystemBuilder                    return builder loadConfig  systemjs config js                        then function                              builder buildStatic  assets    dist app app libs bundle js                                               then function                              del  temp                                                4 Minify bundles  using  gulp-uglify   jsMinify   require  gulp-uglify         gulp task  minify   function              var options                 mangle  false                    var js   gulp src  dist app shims js                pipe jsMinify                 pipe gulp dest  dist app              var js1   gulp src  dist app app libs bundle js                pipe jsMinify options                pipe gulp dest  dist app              var css   gulp src  dist css styles min css            return merge js js1  css            5  In index html for production        lt html gt       lt head gt           lt title gt Hello lt  title gt            lt meta name  viewport  content  width device-width  initial-scale 1  gt           lt meta charset  utf-8    gt           lt link rel  stylesheet  href  app css styles min css    gt             lt script type  text javascript  src  app shims js  gt  lt  script gt            lt base href     gt       lt  head gt        lt body gt       lt my-app gt Loading    lt  my-app gt        lt script type  text javascript  src  app app libs bundle js  gt  lt  script gt        lt  body gt        lt  html gt    6  Now just copy your dist folder to   www  in wamp server node need to copy node modules in www

User · Answer

ng serve works for serving our application for development purposes  What about for production  If we look into our package json file  we can see that there are scripts we can use    scripts        ng    ng      start    ng serve      build    ng build --prod      test    ng test      lint    ng lint      e2e    ng e2e       The build script uses the Angular CLI s ng build with the --prod flag  Let s try that now  We can do it one of two ways     using the npm scripts  npm run build     using the cli directly  ng build --prod   This time we are given four files instead of the five  The --prod flag tells Angular to make our application much smaller in size

User · Answer

2  4  5  6  7  8  9  10  11  TypeScript  with Angular CLI OneTime Setup  npm install -g  angular cli ng new projectFolder creates a new application  Bundling Step  ng build --prod  run in command line when directory is projectFolder  flag prod bundle for production  see the Angular documentation for the list of option included with the production flag    Compress using Brotli compression the resources using the following command for i in dist    do brotli  i  done   bundles are generated by default to projectFolder dist   projectFolder for v6     Output Sizes with Angular 11 0 5 with CLI 11 0 5and option CSS without Angular routing  dist main- es-version   hash  js Your application bundled   ES5 size  136 KB for new Angular CLI application empty  38 KB compressed   dist polyfill- es-version   hash  bundle js the polyfill dependencies   angular  RxJS     bundled   ES5 size  36 KB for new Angular CLI application empty  11 KB compressed   dist index html entry point of your application  dist runtime- es-version   hash  bundle js webpack loader dist style  hash  bundle css the style definitions dist assets resources copied from the Angular CLI assets configuration  Deployment You can get a preview of your application using the ng serve --prod command that starts a local HTTP server such that the application with production files is accessible using http   localhost 4200  For a production usage  you have to deploy all the files from the dist folder in the HTTP server of your choice

User · Answer

Just setup angular 4 with webpack 3 within a minute your development and production ENV bundle will become ready without any issue just follow the below github doc  https   github com roshan3133 angular2-webpack-starter

[angular] How to bundle an Angular app for production

Angular 2 production workflow with SystemJs builder and gulp

Examples related to angular

Examples related to webpack

Examples related to systemjs

Examples related to angular-cli