angular · Brocco · Apr 8, 2016 · hansl · Apr 17, 2016 · hansl
diff --git a/...nts/component/files/__path__/__name__.css → .../__path__/__name__.component.__styleext__ b/...nts/component/files/__path__/__name__.css → .../__path__/__name__.component.__styleext__
diff --git a/...ts/component/files/__path__/__name__.html → ...nt/files/__path__/__name__.component.html b/...ts/component/files/__path__/__name__.html → ...nt/files/__path__/__name__.component.html
diff --git a/...component/files/__path__/__name__.spec.ts → ...files/__path__/__name__.component.spec.ts b/...component/files/__path__/__name__.spec.ts → ...files/__path__/__name__.component.spec.ts
@@ -1,24 +1,25 @@
 import {
-  it,
-  iit,
+  beforeEachProviders,
   describe,
   ddescribe,
   expect,
+  iit,
+  it,
   inject,
   injectAsync,
-  TestComponentBuilder,
-  beforeEachProviders
+  ComponentFixture,
+  TestComponentBuilder
 } from 'angular2/testing';
 import {provide} from 'angular2/core';
-import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>';
+import {<%= classifiedModuleName %>Component} from './<%= dasherizedModuleName %>.component';
 
 describe('<%= classifiedModuleName %> Component', () => {
 
   beforeEachProviders((): any[] => []);
 
 
   it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-    return tcb.createAsync(<%= classifiedModuleName %>).then((fixture) => {
+    return tcb.createAsync(<%= classifiedModuleName %>Component).then((fixture: ComponentFixture) => {
       fixture.detectChanges();
     });
   }));

diff --git a/addon/ng2/blueprints/component/files/__path__/__name__.component.ts b/addon/ng2/blueprints/component/files/__path__/__name__.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnInit} from 'angular2/core';
+
+@Component({
+  moduleId: __moduleName,
+  selector: '<%= dasherizedModuleName %>',
+  templateUrl: '<%= dasherizedModuleName %>.component.html',
+  styleUrls: ['<%= dasherizedModuleName %>.component.<%= styleExt %>']
+})
+export class <%= classifiedModuleName %>Component implements OnInit {
+
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+}
diff --git a/addon/ng2/blueprints/component/files/__path__/__name__.ts b/addon/ng2/blueprints/component/files/__path__/__name__.ts
diff --git a/addon/ng2/blueprints/component/files/__path__/index.ts b/addon/ng2/blueprints/component/files/__path__/index.ts
@@ -0,0 +1 @@
+export {<%= classifiedModuleName %>Component} from './<%= dasherizedModuleName %>.component';
diff --git a/addon/ng2/blueprints/component/index.js b/addon/ng2/blueprints/component/index.js
@@ -1,11 +1,14 @@
 var path = require('path');
+var Blueprint = require('ember-cli/lib/models/blueprint');
 var dynamicPathParser = require('../../utilities/dynamic-path-parser');
 
+var getFiles = Blueprint.prototype.files;
+
 module.exports = {
   description: '',
 
   availableOptions: [
-    { name: 'flat', type: Boolean, default: false, aliases: ['f'] }
+    { name: 'flat', type: Boolean, default: false }
   ],
 
   normalizeEntityName: function (entityName) {
@@ -16,22 +19,60 @@ module.exports = {
   },
 
   locals: function (options) {
+    //TODO: pull value from config
+    this.styleExt = 'css';
+
     return {
       dynamicPath: this.dynamicPath.dir.replace(this.dynamicPath.appRoot, ''),
-      flat: options.flat
+      flat: options.flat,
+      styleExt: this.styleExt,
+      isLazyRoute: !!options.isLazyRoute,
+      isAppComponent: !!options.isAppComponent
     };
   },
+
+  files: function() {
+    var fileList = getFiles.call(this);
+
+    if (this.options.flat) {
+      fileList = fileList.filter(p => p.indexOf('index.ts') <= 0);
+    }
 
+    return fileList;
+  },
+
   fileMapTokens: function (options) {
     // Return custom template variables here.
     return {
       __path__: () => {
         var dir = this.dynamicPath.dir;
         if (!options.locals.flat) {
           dir += path.sep + options.dasherizedModuleName;
+
+          if (options.locals.isLazyRoute) {
+            var dirParts = dir.split(path.sep);
+            dirParts[dirParts.length - 1] = `+${dirParts[dirParts.length - 1]}`;
+            dir = dirParts.join(path.sep);
+          }
         }
+        this.appDir = dir.replace(`src${path.sep}client${path.sep}`, '');
         return dir;
+      },
+      __styleext__: () => {
+        return options.locals.styleExt;
       }
     };
+  },
+
+  afterInstall: function(options) {
+    if (!options.flat) {
+      var filePath = path.join('src', 'client', 'system-config.ts');
+      var barrelUrl = this.appDir.replace(path.sep, '/');
+      return this.insertIntoFile(
+        filePath,
+        `  '${barrelUrl}',`,
+        { before: '  /** @cli-barrel */' }
+      );
+    }
   }
 };
diff --git a/...directive/files/__path__/__name__.spec.ts → ...files/__path__/__name__.directive.spec.ts b/...directive/files/__path__/__name__.spec.ts → ...files/__path__/__name__.directive.spec.ts
@@ -1,16 +1,17 @@
 import {
-  it,
-  iit,
+  beforeEachProviders,
   describe,
   ddescribe,
   expect,
+  iit,
+  it,
   inject,
   injectAsync,
-  TestComponentBuilder,
-  beforeEachProviders
+  ComponentFixture,
+  TestComponentBuilder
 } from 'angular2/testing';
 import {provide, Component} from 'angular2/core';
-import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>';
+import {<%= classifiedModuleName %>} from './<%= dasherizedModuleName %>.directive';
 
 
 @Component({
@@ -25,7 +26,7 @@ describe('<%= classifiedModuleName %> Directive', () => {
 
 
   it('should ...', injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => {
-    return tcb.createAsync(TestComponent).then((fixture) => {
+    return tcb.createAsync(TestComponent).then((fixture: ComponentFixture) => {
       fixture.detectChanges();
     });
   }));

diff --git a/...ints/directive/files/__path__/__name__.ts → ...tive/files/__path__/__name__.directive.ts b/...ints/directive/files/__path__/__name__.ts → ...tive/files/__path__/__name__.directive.ts
@@ -1,11 +1,7 @@
 import {Directive} from 'angular2/core';
 
-
 @Directive({
-  selector: '<%= dasherizedModuleName %>',
-  providers: [],
-  host: {},
-
+  selector: '<%= rawEntityName %>'
 })
 export class <%= classifiedModuleName %> {
 

diff --git a/addon/ng2/blueprints/directive/index.js b/addon/ng2/blueprints/directive/index.js
@@ -5,20 +5,22 @@ module.exports = {
   description: '',
 
   availableOptions: [
-    { name: 'flat', type: Boolean, default: false, aliases: ['f'] }
+    { name: 'flat', type: Boolean, default: false }
   ],
 
   normalizeEntityName: function (entityName) {
     var parsedPath = dynamicPathParser(this.project, entityName);
 
     this.dynamicPath = parsedPath;
+    this.rawEntityName = parsedPath.name;
     return parsedPath.name;
   },
 
   locals: function (options) {
     return {
       dynamicPath: this.dynamicPath.dir,
-      flat: options.flat
+      flat: options.flat,
+      rawEntityName: this.rawEntityName
     };
   },
 

diff --git a/addon/ng2/blueprints/ng2/files/karma-test-shim.js b/addon/ng2/blueprints/ng2/files/karma-test-shim.js
@@ -1,49 +1,59 @@
 /*global jasmine, __karma__, window*/
 Error.stackTraceLimit = Infinity;
-
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
 
 __karma__.loaded = function () {
 };
 
-System.config({
-  packages: {
-    'base/dist/app': {
-      defaultExtension: false,
-      format: 'register',
-      map: Object.keys(window.__karma__.files)
-        .filter(onlyAppFiles)
-        .reduce(function (pathsMapping, appPath) {
-          var moduleName = appPath.replace(/^\/base\/dist\/app\//, './').replace(/\.js$/, '');
-          pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
-          return pathsMapping;
-        }, {})
-    }
-  }
-});
+var distPath = '/base/dist/';
+var appPath = distPath + 'app/';
 
-System.import('angular2/testing').then(function (testing) {
-  return System.import('angular2/platform/testing/browser').then(function (providers) {
-    testing.setBaseTestProviders(providers.TEST_BROWSER_PLATFORM_PROVIDERS,
-      providers.TEST_BROWSER_APPLICATION_PROVIDERS);
-  });
-}).then(function () {
-  return Promise.all(
-    Object.keys(window.__karma__.files)
-      .filter(onlySpecFiles)
-      .map(function (moduleName) {
-        return System.import(moduleName);
-      }));
-}).then(function () {
-  __karma__.start();
-}, function (error) {
-  __karma__.error(error.stack || error);
-});
-
-function onlyAppFiles(filePath) {
-  return /^\/base\/dist\/app\/(?!.*\.spec\.js$)([a-z0-9-_\.\/]+)\.js$/.test(filePath);
+function isJsFile(path) {
+  return path.slice(-3) == '.js';
 }
 
-function onlySpecFiles(path) {
-  return /\.spec\.js$/.test(path);
+function isSpecFile(path) {
+  return path.slice(-8) == '.spec.js';
 }
+
+function isAppFile(path) {
+  return isJsFile(path) && (path.substr(0, appPath.length) == appPath);
+}
+
+var allSpecFiles = Object.keys(window.__karma__.files)
+  .filter(isSpecFile)
+  .filter(isAppFile);
+
+// Load our SystemJS configuration.
+System.import('base/dist/system-config.js').then(function(systemJsConfig) {
+  // We need to add the distPrefix to our system config packages.
+  var config = systemJsConfig.config;
+  Object.keys(config.packages).forEach(function(pkgName) {
+    if (pkgName[0] != '/' && pkgName[0] != '.') {
+      var pkg = config.packages[pkgName];
+      delete config.packages[pkgName];
+      config.packages[distPath + pkgName] = pkg;
+    }
+  });
+
+  System.config(config);
+}).then(function() {
+  // Load and configure the TestComponentBuilder.
+  return Promise.all([
+    System.import('angular2/testing'),
+    System.import('angular2/platform/testing/browser')
+  ]).then(function (providers) {
+    var testing = providers[0];
+    var testingBrowser = providers[1];
+
+    testing.setBaseTestProviders(testingBrowser.TEST_BROWSER_PLATFORM_PROVIDERS,
+      testingBrowser.TEST_BROWSER_APPLICATION_PROVIDERS);
+  });
+}).then(function() {
+  // Finally, load all spec files.
+  // This will run the tests directly.
+  return Promise.all(
+    allSpecFiles.map(function (moduleName) {
+      return System.import(moduleName);
+    }));
+}).then(__karma__.start, __karma__.error);
diff --git a/addon/ng2/blueprints/ng2/files/src/client/app/__name__.__styleext__ b/addon/ng2/blueprints/ng2/files/src/client/app/__name__.__styleext__
diff --git a/addon/ng2/blueprints/ng2/files/src/client/app/__name__.ts b/addon/ng2/blueprints/ng2/files/src/client/app/__name__.ts
@@ -2,9 +2,11 @@ import {Component} from 'angular2/core';
 import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
 
 @Component({
+  moduleId: __moduleName,
   selector: '<%= htmlComponentName %>-app',
   providers: [ROUTER_PROVIDERS],
-  templateUrl: 'app/<%= htmlComponentName %>.html',
+  templateUrl: '<%= htmlComponentName %>.html',
+  styleUrls: ['<%= dasherizedModuleName %>.<%= styleExt %>'],
   directives: [ROUTER_DIRECTIVES],
   pipes: []
 })

diff --git a/addon/ng2/blueprints/ng2/files/src/client/index.html b/addon/ng2/blueprints/ng2/files/src/client/index.html
@@ -31,17 +31,14 @@
   <script src="vendor/angular2/bundles/angular2.dev.js"></script>
   <script src="vendor/angular2/bundles/http.dev.js"></script>
   <script src="vendor/angular2/bundles/router.dev.js"></script>
-
+
+  <script src="system-config.js"></script>
   <script>
-    System.config({
-      packages: {
-        app: {
-          format: 'register',
-          defaultExtension: 'js'
-        }
-      }
-    });
-    System.import('app.js').then(null, console.error.bind(console));
+    System.import('system-config.js').then(function(systemConfig) {
+      System.config(systemConfig.config);
+    }).then(function () {
+      System.import('main.js')
+    }).catch(console.error.bind(console));
   </script>
 </body>
 </html>
diff --git a/...g2/blueprints/ng2/files/src/client/app.ts → ...2/blueprints/ng2/files/src/client/main.ts b/...g2/blueprints/ng2/files/src/client/app.ts → ...2/blueprints/ng2/files/src/client/main.ts
diff --git a/addon/ng2/blueprints/ng2/files/src/client/system-config.ts b/addon/ng2/blueprints/ng2/files/src/client/system-config.ts
@@ -0,0 +1,23 @@
+const barrels: string[] = [
+  'app',
+  /** @cli-barrel */
+];
+
+function createPackageConfig(barrels: string[]): any {
+  return barrels.reduce((barrelConfig: any, barrelName: string) => {
+    barrelConfig[barrelName] = {
+      format: 'register',
+      defaultExtension: 'js',
+      main: 'index'
+    };
+    return barrelConfig;
+  }, {});
+}
+
+
+// Add your custom SystemJS configuration here.
+export const config: any = {
+  packages: Object.assign({
+    // Add your custom SystemJS packages here.
+  }, createPackageConfig(barrels))
+};
diff --git a/addon/ng2/blueprints/ng2/files/src/client/typings.d.ts b/addon/ng2/blueprints/ng2/files/src/client/typings.d.ts
@@ -1 +1,3 @@
 /// <reference path="../../typings/browser.d.ts" />
+
+declare var __moduleName: string;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {<%= classifiedModuleName %>Component} from './<%= dasherizedModuleName %>.component';
Original file line number	Diff line number	Diff line change
		@@ -1 +1,3 @@
		/// <reference path="../../typings/browser.d.ts" />

		declare var __moduleName: string;