feat(umd): add support to generate UMD bundle

README.md

@@ -5,7 +5,7 @@
 
 If you want to create an Angular library with directives, services and/or pipes, then this generator is just what you need.
 
-This generator aligns with the [official Angular Package Format](https://goo.gl/AMOU5G) and automatically generates a [Flat ES Module](http://angularjs.blogspot.be/2017/03/angular-400-now-available.html), a single metadata.json and type definitions to make your library ready for AOT compilation by the consuming Angular application.
+This generator aligns with the [official Angular Package Format](https://goo.gl/AMOU5G) and automatically generates a [Flat ES Module](http://angularjs.blogspot.be/2017/03/angular-400-now-available.html), a UMD bundle, a single metadata.json and type definitions to make your library ready for AOT compilation by the consuming Angular application.
 
 Watch [Jason Aden's talk](https://www.youtube.com/watch?v=unICbsPGFIA) to learn more about the Angular Package Format.
 
@@ -19,6 +19,7 @@ More specifically, this generator:
 - creates the main library file, a sample directive, a sample component, a sample service and a sample pipe
 - configures [tslint](https://palantir.github.io/tslint/) for you with [codelyzer](https://github.com/mgechev/codelyzer) support
 - creates and configures build scripts to generate a Flat ES Module (FESM), type definitions and metadata files for your library to make it ready for AOT compilation
+- creates and configures build scripts to generate a Universal Module Definition (UMD) bundle to use your library in Node.js, SystemJS and with script tags (Plunker, Fiddle, etc)
 - inlines templates automatically for you so you can use external HTML templates
 - inlines styles automatically for you so you can use external CSS templates
 - supports .scss files
@@ -63,7 +64,7 @@ and create the following files for you:
 ```bash
 .
 ├── README.MD
-├── build.sh
+├── gulpfile.js
 ├── package.json
 ├── src
 │   ├── index.ts
@@ -83,18 +84,38 @@ You can then add or edit `*.ts` files in the `src/` directory and run:
 $ npm run build
 ```
 
-to automatically create all `*.js`, `*.d.ts` and `*.metadata.json` files in the `dist/` directory.
+to automatically create all `*.js`, `*.d.ts` and `*.metadata.json` files in the `dist` directory:
+
+```bash
+dist
+├── index.d.ts                  # Typings for AOT compilation
+├── index.js                    # Flat ES Module (FESM) for us with webpack
+├── lib.d.ts                    # Typings for AOT compilation
+├── lib.metadata.json           # Metadata for AOT compilation
+├── lib.umd.js                  # UMD bundle for use with Node.js, SystemJS or script tag
+├── package.json                # package.json for consumer of your library
+├── sample.component.d.ts       # Typings for AOT compilation
+├── sample.directive.d.ts       # Typings for AOT compilation
+├── sample.pipe.d.ts            # Typings for AOT compilation
+└── sample.service.d.ts         # Typings for AOT compilation
+```
+
+Finally you publish your library to NPM by publishing the contents of the `dist` directory:
+
+```bash
+$ npm publish dist
+```
 
 ## TypeScript config
 
-The generates creates 2 TypeScript config files:
+The generator creates 2 TypeScript config files:
 
 - `tsconfig.json` is used to configure your editor during development and is not used for building your library
 - `src/tsconfig.es5.json` is used by the Angular compiler to build the files in the `dist` directory when you run `npm run build`
 
 ## Linting your code
 
-Everything comes pre-configured with tslint and codelyzer support. To lint your code:
+Your library comes pre-configured with tslint and codelyzer support. To lint your code:
 
 ```bash
 $ npm run lint
@@ -112,6 +133,7 @@ This will generate a `dist` directory with:
 
 - a `package.json` file specifically for distribution with Angular listed in the `peerDependencies`
 - `sample-library.js`: a Flat ES Module (FESM) file that contains all your library code in a single file
+- `sample-library.umd.js`: a Universal Module Definition (UMD) bundle file that contains all your library code in UMD format for use in Node.js, SystemJS or via a script tag (e.g. in Plunker, Fiddle, etc)
 - `*.d.ts`: type definitions for you library
 - `sample-library.metadata.json`: metadata for your library to support AOT compilation 
 

generators/app/templates/_package.json

@@ -40,6 +40,7 @@
     "core-js": "^2.4.1",
     "del": "^2.2.2",
     "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
     "gulp-rollup": "^2.11.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",

generators/app/templates/gulpfile.js

@@ -3,6 +3,7 @@ var gulp = require('gulp'),
   path = require('path'),
   ngc = require('@angular/compiler-cli/src/main').main,
   rollup = require('gulp-rollup'),
+  rename = require('gulp-rename'),
   del = require('del'),
   runSequence = require('run-sequence'),
   inlineResources = require('./tools/gulp/inline-resources');
@@ -61,23 +62,74 @@ gulp.task('ngc', function () {
  * 5. Run rollup inside the /build folder to generate our Flat ES module and place the
  *    generated file into the /dist folder
  */
-gulp.task('rollup', function () {
+gulp.task('rollup:fesm', function () {
   return gulp.src(`${buildFolder}/**/*.js`)
   // transform the files here.
     .pipe(rollup({
-      // any option supported by Rollup can be set here.
+
+      // Bundle's entry point
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
       entry: `${buildFolder}/index.js`,
+
+      // A list of IDs of modules that should remain external to the bundle
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
       external: [
         '@angular/core',
         '@angular/common'
       ],
+
+      // Format of generated bundle
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
       format: 'es'
     }))
     .pipe(gulp.dest(distFolder));
 });
 
 /**
- * 6. Copy all the files from /build to /dist, except .js files. We ignore all .js from /build
+ * 6. Run rollup inside the /build folder to generate our UMD module and place the
+ *    generated file into the /dist folder
+ */
+gulp.task('rollup:umd', function () {
+  return gulp.src(`${buildFolder}/**/*.js`)
+  // transform the files here.
+    .pipe(rollup({
+
+      // Bundle's entry point
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#entry
+      entry: `${buildFolder}/index.js`,
+
+      // A list of IDs of modules that should remain external to the bundle
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#external
+      external: [
+        '@angular/core',
+        '@angular/common'
+      ],
+
+      // Format of generated bundle
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#format
+      format: 'umd',
+
+      // Export mode to use
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#exports
+      exports: 'named',
+
+      // The name to use for the module for UMD/IIFE bundles
+      // (required for bundles with exports)
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#modulename
+      moduleName: '<%= props.libraryName.original %>',
+
+      // See https://github.com/rollup/rollup/wiki/JavaScript-API#globals
+      globals: {
+        typescript: 'ts'
+      }
+
+    }))
+    .pipe(rename('<%= props.libraryName.kebabCase %>.umd.js'))
+    .pipe(gulp.dest(distFolder));
+});
+
+/**
+ * 7. Copy all the files from /build to /dist, except .js files. We ignore all .js from /build
  *    because with don't need individual modules anymore, just the Flat ES module generated
  *    on step 5.
  */
@@ -87,22 +139,22 @@ gulp.task('copy:build', function () {
 });
 
 /**
- * 7. Copy package.json from /src to /dist
+ * 8. Copy package.json from /src to /dist
  */
 gulp.task('copy:manifest', function () {
   return gulp.src([`${srcFolder}/package.json`])
     .pipe(gulp.dest(distFolder));
 });
 
 /**
- * 8. Delete /.tmp folder
+ * 9. Delete /.tmp folder
  */
 gulp.task('clean:tmp', function () {
   return deleteFolders([tmpFolder]);
 });
 
 /**
- * 9. Delete /build folder
+ * 10. Delete /build folder
  */
 gulp.task('clean:build', function () {
   return deleteFolders([buildFolder]);
@@ -114,7 +166,8 @@ gulp.task('compile', function () {
     'copy:source',
     'inline-resources',
     'ngc',
-    'rollup',
+    'rollup:fesm',
+    'rollup:umd',
     'copy:build',
     'copy:manifest',
     'clean:build',