refactor: add src folder (#3171)

* boilerplate, gulpfile, quickstart

* move ts files up to cookbooks

* move rest of ts files

* fix tsconfig, default build task, json file

* fix js examples

* fix webpack example

* remove a2docs.css references

* fix aot examples

* fix webpack run task

* fix cb-i18n

* fix upgrade examples

* fix unit tests

* fix comment in deployment index

* removed unused typings.json

* fix plunkers

* fix js example paths

* fix ts quickstart/setup prose

* add src folder note to setup

* broadly replace app/ -> src/app/

* broadly replace main.ts

* broadly replaced index.html

* broadly replace tsconfig

* replace systemjs

* fix filetrees

* Minor prose fixes to aot, i18n cookbooks

* remove char harp was complaining about

* update new reactive forms example

* fix quickstart jade error

* fix mistakes uncovered by CI

* fix bad filename errors

* edit style guide 04-06 rule to use src

* add changelog

* Incorporate Jesus's feedback

* fix snippet headers in toh1/2

* chore: tweak changelog and setup text

.gitignore

@@ -31,7 +31,6 @@ eplnkr.html
 public/docs/*/latest/guide/cheatsheet.json
 protractor-results.txt
 link-checker-results.txt
-*a2docs.css
 /dist
 /public/docs/dart
 /public/docs/ts/_cache

gulpfile.js

@@ -84,26 +84,23 @@ var _excludeMatchers = _excludePatterns.map(function(excludePattern){
 });
 
 var _exampleBoilerplateFiles = [
-  'a2docs.css',
+  'src/styles.css',
+  'src/systemjs.config.js',
+  'src/tsconfig.json',
+  'bs-config.json',
+  'bs-config.e2e.json',
   'package.json',
-  'styles.css',
-  'systemjs.config.js',
-  'tsconfig.json',
   'tslint.json'
 ];
 
-var _exampleDartWebBoilerPlateFiles = ['a2docs.css', 'styles.css'];
-
 var _exampleUnitTestingBoilerplateFiles = [
-  'browser-test-shim.js',
+  'src/browser-test-shim.js',
   'karma-test-shim.js',
   'karma.conf.js'
 ];
 
 var _exampleConfigFilename = 'example-config.json';
 
-var _styleLessName = 'a2docs.less';
-
 // Gulp flags:
 //
 //   --lang=[all | ts | js | dart | 'ts|js' | 'ts|js|dart' | ...]
@@ -182,21 +179,12 @@ function runE2e() {
     // fast; skip all setup
     promise = Promise.resolve(true);
   } else  {
-    /*
-       // Not 'fast'; do full setup
-    var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
-    promise = spawnInfo.promise.then(function() {
-      copyExampleBoilerplate();
-      spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
-      return spawnInfo.promise;
-    });
-    */
     // Not 'fast'; do full setup
     gutil.log('runE2e: install _examples stuff');
     var spawnInfo = spawnExt('npm', ['install'], { cwd: EXAMPLES_PATH});
     promise = spawnInfo.promise
+      .then(copyExampleBoilerplate)
       .then(function() {
-        buildStyles(copyExampleBoilerplate, _.noop);
         gutil.log('runE2e: update webdriver');
         spawnInfo = spawnExt('npm', ['run', 'webdriver:update'], {cwd: EXAMPLES_PATH});
         return spawnInfo.promise;
@@ -283,8 +271,8 @@ function runE2eTsTests(appDir, outputFile) {
   }
 
   var config = {
-    build: exampleConfig.build || 'tsc',
-    run: exampleConfig.run || 'http-server:e2e'
+    build: exampleConfig.build || 'build',
+    run: exampleConfig.run || 'serve:e2e'
   };
 
   var appBuildSpawnInfo = spawnExt('npm', ['run', config.build], { cwd: appDir });
@@ -350,7 +338,7 @@ function runProtractorAoT(appDir, outputFile) {
     promise = promise.then(() =>
      spawnExt('node', [copyFileCmd], { cwd: appDir }).promise );
   }
-  var aotRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', 'aot', '--', '-s'], { cwd: appDir });
+  var aotRunSpawnInfo = spawnExt('npm', ['run', 'serve:aot'], { cwd: appDir });
   return runProtractor(promise, appDir, aotRunSpawnInfo, outputFile);
 }
 
@@ -364,7 +352,7 @@ function runE2eDartTests(appDir, outputFile) {
   gutil.log('AppDir for Dart e2e: ' + appDir);
   gutil.log('Deploying from: ' + deployDir);
 
-  var appRunSpawnInfo = spawnExt('npm', ['run', 'http-server:e2e', '--', deployDir, '-s'], { cwd: httpLaunchDir });
+  var appRunSpawnInfo = spawnExt('npm', ['run', 'serve:e2e', '--', deployDir, '-s'], { cwd: httpLaunchDir });
   if (!appRunSpawnInfo.proc.pid) {
     gutil.log('http-server failed to launch over ' + deployDir);
     return false;
@@ -448,7 +436,7 @@ gulp.task('help', taskListing.withFilters(function(taskName) {
 }));
 
 // requires admin access because it adds symlinks
-gulp.task('add-example-boilerplate', function(done) {
+gulp.task('add-example-boilerplate', function() {
   var realPath = path.join(EXAMPLES_PATH, '/node_modules');
   var nodeModulesPaths = excludeDartPaths(getNodeModulesPaths(EXAMPLES_PATH));
 
@@ -457,55 +445,31 @@ gulp.task('add-example-boilerplate', function(done) {
     fsUtils.addSymlink(realPath, linkPath);
   });
 
-  return buildStyles(copyExampleBoilerplate, done);
+  return copyExampleBoilerplate();
 });
 
 
 // copies boilerplate files to locations
 // where an example app is found
 gulp.task('_copy-example-boilerplate', function (done) {
-  return argv.fast ? done() : buildStyles(copyExampleBoilerplate, done);
+  return argv.fast ? done() : copyExampleBoilerplate();
 });
 
-//Builds Angular Docs CSS file from Bootstrap npm LESS source
-//and copies the result to the _examples folder to be included as
-//part of the example boilerplate.
-function buildStyles(cb, done){
-  gulp.src(path.join(STYLES_SOURCE_PATH, _styleLessName))
-    .pipe(less())
-    .pipe(gulp.dest(BOILERPLATE_PATH)).on('end', function(){
-      cb().then(function() { done(); });
-    });
-}
-
 // copies boilerplate files to locations
 // where an example app is found
 // also copies certain web files (e.g., styles.css) to ~/_examples/**/dart/**/web
 function copyExampleBoilerplate() {
   gutil.log('Copying example boilerplate files');
-  var sourceFiles = _exampleBoilerplateFiles.map(function(fn) {
-    return path.join(BOILERPLATE_PATH, fn);
-  });
   var examplePaths = excludeDartPaths(getExamplePaths(EXAMPLES_PATH));
 
-  var dartWebSourceFiles = _exampleDartWebBoilerPlateFiles.map(function(fn){
-    return path.join(BOILERPLATE_PATH, fn);
-  });
-  var dartExampleWebPaths = getDartExampleWebPaths(EXAMPLES_PATH);
-
   // Make boilerplate files read-only to avoid that they be edited by mistake.
   var destFileMode = '444';
-  return copyFiles(sourceFiles, examplePaths, destFileMode)
-    .then(function() {
-      return copyFiles(dartWebSourceFiles, dartExampleWebPaths, destFileMode);
-    })
+  return copyFiles(_exampleBoilerplateFiles, BOILERPLATE_PATH, examplePaths, destFileMode)
     // copy the unit test boilerplate
     .then(function() {
-      var unittestSourceFiles =
-        _exampleUnitTestingBoilerplateFiles
-          .map(function(name) { return path.join(EXAMPLES_TESTING_PATH, name); });
       var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
-      return copyFiles(unittestSourceFiles, unittestPaths, destFileMode);
+      return copyFiles(_exampleUnitTestingBoilerplateFiles,
+        EXAMPLES_TESTING_PATH, unittestPaths, destFileMode);
     })
     .catch(function(err) {
       gutil.log(err);
@@ -582,9 +546,6 @@ function deleteExampleBoilerPlate() {
   var unittestPaths = getUnitTestingPaths(EXAMPLES_PATH);
 
   return deleteFiles(_exampleBoilerplateFiles, examplePaths)
-    .then(function() {
-      return deleteFiles(_exampleDartWebBoilerPlateFiles, dartExampleWebPaths);
-    })
     .then(function() {
       return deleteFiles(_exampleUnitTestingBoilerplateFiles, unittestPaths);
     });
@@ -1053,15 +1014,15 @@ function harpJsonSetJade2NgTo(v) {
 // Copies fileNames into destPaths, setting the mode of the
 // files at the destination as optional_destFileMode if given.
 // returns a promise
-function copyFiles(fileNames, destPaths, optional_destFileMode) {
+function copyFiles(fileNames, originPath, destPaths, optional_destFileMode) {
   var copy = Q.denodeify(fsExtra.copy);
   var chmod = Q.denodeify(fsExtra.chmod);
   var copyPromises = [];
   destPaths.forEach(function(destPath) {
     fileNames.forEach(function(fileName) {
-      var baseName = path.basename(fileName);
-      var destName = path.join(destPath, baseName);
-      var p = copy(fileName, destName, { clobber: true});
+      var originName = path.join(originPath, fileName);
+      var destName = path.join(destPath, fileName);
+      var p = copy(originName, destName, { clobber: true});
       if(optional_destFileMode !== undefined) {
         p = p.then(function () {
           return chmod(destName, optional_destFileMode);

public/_includes/_util-fns.jade

@@ -46,8 +46,8 @@
 
 //- NgModule related
 - var _AppModuleVsAppComp = 'AppModule'
-- var _appModuleTsVsAppCompTs = 'app/app.module.ts'
-- var _appModuleTsVsMainTs = 'app/app.module.ts'
+- var _appModuleTsVsAppCompTs = 'src/app/app.module.ts'
+- var _appModuleTsVsMainTs = 'src/app/app.module.ts'
 - var _bootstrapModule = 'bootstrapModule'
 - var _declsVsDirectives = 'declarations'
 - var _moduleVsComp = 'module'

public/docs/_examples/.gitignore

@@ -1,22 +1,18 @@
-# _exampleBoilerplateFiles
-.editorconfig
-karma.conf.js
-karma-test-shim.js
-package.json
-*/**/styles.css
-systemjs.config.js
-*/**/tsconfig.json
-tslint.json
-wallaby.js
+# _boilerplate files
+!_boilerplate/*
+*/*/src/styles.css
+*/*/src/systemjs.config.js
+*/*/src/tsconfig.json
+*/*/bs-config.e2e.json
+*/*/bs-config.json
+*/*/package.json
+*/*/tslint.json
 
+# example files
 _test-output
+protractor-helpers.js
+*/e2e-spec.js
 **/ts/**/*.js
 **/js-es6*/**/*.js
 **/ts-snippets/**/*.js
-*.d.ts
-
-!**/*e2e-spec.js
-!systemjs.config.1.js
 !**/systemjs.config.extras.js
-!_boilerplate/*
-_boilerplate/a2docs.css

public/docs/_examples/_boilerplate/bs-config.e2e.json

@@ -0,0 +1,14 @@
+{
+  "open": false,
+  "logLevel": "silent",
+  "port": 8080,
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    },
+    "middleware": {
+      "0": null
+    }
+  }
+}

public/docs/_examples/_boilerplate/bs-config.json

@@ -0,0 +1,8 @@
+{
+  "server": {
+    "baseDir": "src",
+    "routes": {
+      "/node_modules": "node_modules"
+    }
+  }
+}

public/docs/_examples/_boilerplate/example-config.json

@@ -0,0 +1,4 @@
+{
+  "build": "build",
+  "run": "serve"
+}

public/docs/_examples/_boilerplate/package.json

@@ -4,22 +4,32 @@
   "private": true,
   "description": "Example package.json, only contains needed scripts for examples. See _examples/package.json for master package.json.",
   "scripts": {
-    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
-    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",
-    "http-server": "tsc && http-server",
-    "http-server:e2e": "http-server",
-    "http-server:cli": "http-server dist/",
-    "lite": "lite-server",
-    "lite:aot": "lite-server -c aot/bs-config.json",
-    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",
-    "tsc": "tsc",
-    "tsc:w": "tsc -w",
+    "build": "tsc -p src/",
+    "build:watch": "tsc -p src/ -w",
+    "build:e2e": "tsc -p e2e/",
+    "serve": "lite-server -c=bs-config.json",
+    "serve:e2e": "lite-server -c=bs-config.e2e.json",
+    "prestart": "npm run build",
+    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
+    "pree2e": "webdriver-manager update && npm run build:e2e",
+    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
+    "protractor": "protractor protractor.config.js",
+    "pretest": "npm run build",
+    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
+    "pretest:once": "npm run build",
+    "test:once": "karma start karma.conf.js --single-run",
+    "lint": "tslint ./src/**/*.ts -t verbose",
+
+    "build:upgrade": "tsc",
+    "serve:upgrade": "http-server",
+    "build:cli": "ng build --no-progress",
+    "serve:cli": "http-server dist/",
+    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
+    "serve:aot": "lite-server -c bs-config.aot.json",
     "start:webpack": "webpack-dev-server --inline --progress --port 8080",
     "test:webpack": "karma start karma.webpack.conf.js",
     "build:webpack": "rimraf dist && webpack --config config/webpack.prod.js --bail",
-    "build:cli": "ng build --no-progress",
-    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
-    "build:babel": "babel app -d app --extensions \".es6\" --source-maps",
+    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
     "copy-dist-files": "node ./copy-dist-files.js",
     "i18n": "ng-xi18n"
   },

public/docs/_examples/_boilerplate/plnkr.json

@@ -0,0 +1,10 @@
+{
+  "description": "QuickStart",
+  "basePath": "src/",
+  "files": [
+    "app/app.component.ts",
+    "index.html"
+  ],
+  "open": "app/app.component.ts",
+  "tags": ["quickstart"]
+}

public/docs/_examples/_boilerplate/src/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "lib": [ "es2015", "dom" ],
+    "noImplicitAny": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "typeRoots": [
+      "../../../node_modules/@types/"
+    ]
+  },
+  "compileOnSave": true,
+  "exclude": [
+    "node_modules/*",
+    "**/*-aot.ts"
+  ]
+}

public/docs/_examples/animations/ts/plnkr.json

@@ -1,5 +1,6 @@
 {
   "description": "Angular Animations",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js"

public/docs/_examples/animations/ts/src/index.html

@@ -18,7 +18,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 

public/docs/_examples/animations/ts/src/main.ts

@@ -1,4 +1,4 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/architecture/ts/plnkr.json

@@ -1,5 +1,6 @@
 {
   "description": "Intro to Angular",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js",

public/docs/_examples/architecture/ts/src/index.html

@@ -15,7 +15,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 

public/docs/_examples/architecture/ts/src/main.ts

@@ -1,5 +1,5 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/attribute-directives/ts/plnkr.json

@@ -1,5 +1,6 @@
 {
   "description": "Attribute Directive",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js",

public/docs/_examples/attribute-directives/ts/src/index.html

@@ -16,7 +16,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
   <body>

public/docs/_examples/attribute-directives/ts/src/main.ts

@@ -1,5 +1,5 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-ajs-quick-reference/ts/plnkr.json

@@ -1,5 +1,6 @@
 {
   "description": "AngularJS to Angular Quick Reference",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js",

public/docs/_examples/cb-ajs-quick-reference/ts/src/index.html

@@ -17,7 +17,7 @@
 
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app').catch(function(err){ console.error(err); });
+      System.import('main.js').catch(function(err){ console.error(err); });
     </script>
   </head>
 

public/docs/_examples/cb-ajs-quick-reference/ts/src/main.ts

@@ -1,5 +1,5 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app.module';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-aot-compiler/ts/example-config.json

@@ -1,4 +1,3 @@
 {
-  "build": "build:aot",  
-  "run": "http-server:e2e" 
+  "build": "build:aot"
 }

public/docs/_examples/cb-aot-compiler/ts/rollup-config.js

@@ -6,8 +6,8 @@ import uglify      from 'rollup-plugin-uglify'
 
 // #docregion config
 export default {
-  entry: 'app/main.js',
-  dest: 'dist/build.js', // output a single application bundle
+  entry: 'src/main.js',
+  dest: 'src/build.js', // output a single application bundle
   sourceMap: false,
   format: 'iife',
   onwarn: function(warning) {

public/docs/_examples/cb-aot-compiler/ts/src/index-jit.html

@@ -14,7 +14,7 @@
     <script src="node_modules/systemjs/dist/system.src.js"></script>
     <script src="systemjs.config.js"></script>
     <script>
-      System.import('app/main-jit').catch(function(err){ console.error(err); });
+      System.import('main-jit.js').catch(function(err){ console.error(err); });
     </script>
   <!-- #enddocregion jit -->
   </head>

public/docs/_examples/cb-aot-compiler/ts/src/index.html

@@ -18,6 +18,6 @@
     <my-app>Loading...</my-app>
   </body>
   <!-- #docregion bundle -->
-  <script src="dist/build.js"></script>
+  <script src="build.js"></script>
   <!-- #enddocregion bundle -->
 </html>

public/docs/_examples/cb-aot-compiler/ts/src/main-jit.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule }              from './app.module';
+import { AppModule }              from './app/app.module';
 
 console.log('Running JIT compiled');
 platformBrowserDynamic().bootstrapModule(AppModule);

public/docs/_examples/cb-aot-compiler/ts/src/main.ts

@@ -1,6 +1,6 @@
 // #docregion
 import { platformBrowser }    from '@angular/platform-browser';
-import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
+import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';
 
 console.log('Running AOT compiled');
 platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

public/docs/_examples/cb-aot-compiler/ts/tsconfig-aot.json

@@ -12,8 +12,8 @@
   },
 
   "files": [
-    "app/app.module.ts",
-    "app/main.ts"
+    "src/app/app.module.ts",
+    "src/main.ts"
   ],
 
   "angularCompilerOptions": {

public/docs/_examples/cb-component-communication/ts/plnkr.json

@@ -1,5 +1,6 @@
 {
   "description": "Component Communication Cookbook samples",
+  "basePath": "src/",
   "files":[
     "!**/*.d.ts",
     "!**/*.js"