(WIP) Implement application decoupling

README.md

@@ -179,12 +179,11 @@ Forks of this project demonstrate how to extend and integrate with other librari
 .
 ├── LICENSE
 ├── README.md
+├── appveyor.yml
 ├── gulpfile.ts                <- configuration of the gulp tasks
-├── karma.conf.js              <- configuration of the test runner
 ├── package.json               <- dependencies of the project
-├── protractor.conf.js         <- e2e tests configuration
 ├── src                        <- source code of the application
-│   └── client
+│   └── browser
 │       ├── app
 │       │   ├── +about
 │       │   │   ├── about.component.css
@@ -223,14 +222,17 @@ Forks of this project demonstrate how to extend and integrate with other librari
 │       │           ├── toolbar.component.html
 │       │           └── toolbar.component.ts
 │       ├── assets
+│       │   ├── data.json
 │       │   └── svg
 │       │       └── more.svg
 │       ├── css
 │       │   └── main.css
 │       ├── index.html
+│       ├── karma.conf.js      <- configuration of the test runner
+│       ├── protractor.conf.js <- e2e tests configuration
+│       ├── test-main.js       <- testing configuration
 │       ├── tsconfig.json
 │       └── typings.d.ts
-├── test-main.js               <- testing configuration
 ├── tools
 │   ├── README.md              <- build documentation
 │   ├── config
@@ -314,8 +316,7 @@ Forks of this project demonstrate how to extend and integrate with other librari
 ├── tsconfig.json              <- configuration of the typescript project (ts-node, which runs the tasks defined in gulpfile.ts)
 ├── tslint.json                <- tslint configuration
 ├── typings                    <- typings directory. Contains all the external typing definitions defined with typings
-├── typings.json
-└── appveyor.yml
+└── typings.json
 ```
 
 # Contributors

package.json

@@ -13,8 +13,9 @@
     "build.test": "gulp build.test --color",
     "build.test.watch": "gulp build.test.watch --color",
     "generate.manifest": "gulp generate.manifest --color",
-    "e2e": "protractor",
-    "e2e.live": "protractor --elementExplorer",
+    "e2e": "protractor src/browser/protractor.conf.js",
+    "e2e.live": "protractor src/browser/protractor.conf.js --elementExplorer",
+    "e2e.singleRun": "gulp build.prod --color && gulp build.js.e2e --color && gulp e2e --color",
     "gulp": "gulp",
     "karma": "karma",
     "karma.start": "karma start",
@@ -27,8 +28,7 @@
     "start": "gulp serve.dev --color",
     "tasks.list": "gulp --tasks-simple --color",
     "test": "gulp test --color",
-    "e2e.ci": "gulp build.prod --color && gulp build.js.e2e --color && gulp e2e --color",
-    "tests.all": "npm test && npm run e2e.ci",
+    "tests.all": "npm test && npm run e2e.singleRun",
     "webdriver-start": "webdriver-manager start",
     "webdriver-update": "webdriver-manager update"
   },

karma.conf.js → src/browser/karma.conf.js

@@ -8,7 +8,7 @@ module.exports = function(config) {
   config.set({
 
     // base path that will be used to resolve all patterns (eg. files, exclude)
-    basePath: './',
+    basePath: '../../',
 
 
     // frameworks to use
@@ -47,7 +47,7 @@ module.exports = function(config) {
       // suppress annoying 404 warnings for resources, images, etc.
       { pattern: 'dist/dev/assets/**/*', watched: false, included: false, served: true },
 
-      'test-main.js'
+      'src/browser/test-main.js'
     ],
 
     // must go along with above, suppress annoying 404 warnings.

src/browser/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "angular2-seed",
+  "version": "0.0.0",
+  "description": "Modular seed project for Angular 2 apps with fast, statically typed build",
+  "repository": {
+    "url": "https://github.com/mgechev/angular2-seed"
+  },
+  "author": "Minko Gechev <mgechev>",
+  "license": "MIT",
+  "dependencies": {
+    "@angular/common": "2.0.0-rc.1",
+    "@angular/compiler": "2.0.0-rc.1",
+    "@angular/core": "2.0.0-rc.1",
+    "@angular/http": "2.0.0-rc.1",
+    "@angular/platform-browser": "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
+    "@angular/router": "2.0.0-rc.1",
+    "es6-module-loader": "^0.17.8",
+    "core-js": "^2.4.0",
+    "rxjs": "5.0.0-beta.6",
+    "systemjs": "0.19.26",
+    "zone.js": "^0.6.12"
+  }
+}

protractor.conf.js → src/browser/protractor.conf.js

@@ -2,7 +2,7 @@ const config = {
   baseUrl: 'http://localhost:5555/',
 
   specs: [
-    './dist/dev/**/*.e2e-spec.js'
+    '../../dist/dev/**/*.e2e-spec.js'
   ],
 
   exclude: [],

tools/config/seed.config.ts

@@ -102,11 +102,11 @@ export class SeedConfig {
   BOOTSTRAP_DIR = 'app';
 
   /**
-   * The directory where the client files are located.
-   * The default directory is `client`.
+   * The directory where the browser files are located.
+   * The default directory is `browser`.
    * @type {string}
    */
-  APP_CLIENT = argv['client'] || 'client';
+  APP_BROWSER = argv['browser'] || 'browser';
 
   /**
    * The bootstrap file to be used to boot the application. The file to be used is dependent if the hot-loader option is
@@ -128,7 +128,7 @@ export class SeedConfig {
    * The base folder of the applications source files.
    * @type {string}
    */
-  APP_SRC = `src/${this.APP_CLIENT}`;
+  APP_SRC = `src/${this.APP_BROWSER}`;
 
   /**
    * The folder of the applications asset files.

tools/tasks/seed/build.assets.dev.ts

@@ -11,7 +11,9 @@ export = () => {
   let paths: string[] = [
     join(APP_SRC, '**'),
     '!' + join(APP_SRC, '**', '*.ts'),
-    '!' + join(APP_SRC, '**', '*.scss')
+    '!' + join(APP_SRC, '**', '*.scss'),
+    '!' + join(APP_SRC, '*.js'), // Do not copy `karma.conf.js`, `protractor.conf.js`, `test-main.js`
+    '!' + join(APP_SRC, '*.json') // Do not copy `tsconfig.json`
   ].concat(TEMP_FILES.map((p) => { return '!' + p; }));
 
   return gulp.src(paths)

tools/tasks/seed/build.assets.prod.ts

@@ -26,6 +26,8 @@ export = () => {
     '!' + join(APP_SRC, '**', '*.css'),
     '!' + join(APP_SRC, '**', '*.html'),
     '!' + join(APP_SRC, '**', '*.scss'),
+    '!' + join(APP_SRC, '*.js'), // Do not copy `karma.conf.js`, `protractor.conf.js`, `test-main.js`
+    '!' + join(APP_SRC, '*.json'), // Do not copy `tsconfig.json`
     '!' + join(ASSETS_SRC, '**', '*.js')
   ].concat(TEMP_FILES.map((p) => { return '!' + p; })))
     .pipe(onlyDirs(es))

tools/tasks/seed/e2e.ts

@@ -1,6 +1,10 @@
 import * as express from 'express';
 import * as gulp from 'gulp';
 import { protractor } from 'gulp-protractor';
+import { join } from 'path';
+
+import { APP_SRC } from '../../config';
+
 
 class Protractor {
   server(port: number, dir: string) {
@@ -23,7 +27,7 @@ export = (done: any) => {
     .then((server: any) => {
       gulp
         .src('./dist/dev/**/*.e2e-spec.js')
-        .pipe(protractor({ configFile: 'protractor.conf.js' }))
+        .pipe(protractor({ configFile: join(process.cwd(), APP_SRC, 'protractor.conf.js') }))
         .on('error', (error: string) => { throw error; })
         .on('end', () => { server.close(done); });
     });

tools/tasks/seed/karma.start.ts

@@ -1,12 +1,14 @@
 import * as karma from 'karma';
 import { join } from 'path';
 
+import { APP_SRC } from '../../config';
+
 /**
  * Executes the build process, running all unit tests using `karma`.
  */
 export = (done: any) => {
   new (<any>karma).Server({
-    configFile: join(process.cwd(), 'karma.conf.js'),
+    configFile: join(process.cwd(), APP_SRC, 'karma.conf.js'),
     singleRun: true
   }).start(done);
 };