feat(migration): added Angular CLI version

Author: Ismaestro

angular-cli.json

@@ -0,0 +1,59 @@
+{
+  "project": {
+    "version": "1.0.0-beta.24",
+    "name": "angular-hero-cli"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "toh",
+      "mobile": false,
+      "styles": [
+        "assets/css/styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "addons": [],
+  "packages": [],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "prefixInterfaces": false,
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
+  }
+}

e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import {AngularTOHPage} from './app.po';
+
+describe('angular-hero-cli App', function () {
+  let page: AngularTOHPage;
+
+  beforeEach(() => {
+    page = new AngularTOHPage();
+  });
+
+  it('Title', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Tour of Heroes');
+  });
+});

e2e/app.po.ts

@@ -0,0 +1,11 @@
+import {browser, element, by} from 'protractor';
+
+export class AngularTOHPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('toh-app > h1')).getText();
+  }
+}

e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/out-tsc-e2e",
+    "sourceMap": true,
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
+  }
+}

karma.conf.js

@@ -0,0 +1,40 @@
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      {pattern: './src/test.ts', watched: false}
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts', 'tsx']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+      ? ['progress', 'karma-remap-istanbul']
+      : ['progress'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "angular-hero-cli",
+  "version": "0.0.0",
+  "license": "MIT",
+  "angular-cli": {},
+  "scripts": {
+    "start": "npm run server | npm run ng",
+    "server": "json-server --port 3000 --watch server/db.json --routes server/routes.json",
+    "ng": "ng serve --proxy-config proxy.conf.json",
+    "tslint": "tslint \"src/**/*.ts\"; exit 0",
+    "test": "ng test",
+    "e2e": "npm run pree2e | protractor",
+    "pree2e": "webdriver-manager update --standalone false --gecko false"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^2.3.1",
+    "@angular/compiler": "^2.3.1",
+    "@angular/core": "^2.3.1",
+    "@angular/forms": "^2.3.1",
+    "@angular/http": "^2.3.1",
+    "@angular/platform-browser": "^2.3.1",
+    "@angular/platform-browser-dynamic": "^2.3.1",
+    "@angular/router": "^3.3.1",
+    "core-js": "^2.4.1",
+    "json-server": "^0.9.4",
+    "rxjs": "^5.0.1",
+    "ts-helpers": "^1.1.1",
+    "zone.js": "^0.7.2"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^2.3.1",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
+    "angular-cli": "1.0.0-beta.24",
+    "codelyzer": "~2.0.0-beta.1",
+    "jasmine-core": "2.5.2",
+    "jasmine-spec-reporter": "2.5.0",
+    "karma": "1.2.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-cli": "^1.0.1",
+    "karma-jasmine": "^1.0.2",
+    "karma-remap-istanbul": "^0.2.1",
+    "protractor": "~4.0.13",
+    "ts-node": "1.2.1",
+    "tslint": "^4.0.2",
+    "typescript": "~2.0.3"
+  }
+}

protractor.conf.js

@@ -0,0 +1,33 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+/*global jasmine */
+var SpecReporter = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:3002/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function () {
+    }
+  },
+  useAllAngular2AppRoots: true,
+  beforeLaunch: function () {
+    require('ts-node').register({
+      project: 'e2e'
+    });
+  },
+  onPrepare: function () {
+    jasmine.getEnv().addReporter(new SpecReporter());
+  }
+};

proxy.conf.json

@@ -0,0 +1,6 @@
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}

server/db.json

@@ -0,0 +1,58 @@
+{
+  "heroesPowers": [
+    "Really Smart",
+    "Super Flexible",
+    "Super Hot",
+    "Weather Changer"
+  ],
+  "heroes": [
+    {
+      "id": 12,
+      "name": "Narco",
+      "power": "Weather Changer",
+      "alterEgo": "pe"
+    },
+    {
+      "id": 13,
+      "name": "Bombasto",
+      "power": "Weather Changer",
+      "alterEgo": "bombi"
+    },
+    {
+      "id": 14,
+      "name": "Celeritas",
+      "power": "Super Hot",
+      "alterEgo": "cele"
+    },
+    {
+      "id": 15,
+      "name": "Magneta",
+      "power": "Really Smart",
+      "alterEgo": "magne"
+    },
+    {
+      "id": 17,
+      "name": "Dynama",
+      "power": "Super Flexible",
+      "alterEgo": "dy"
+    },
+    {
+      "id": 18,
+      "name": "Dr IQ",
+      "power": "Really Smart",
+      "alterEgo": "iq"
+    },
+    {
+      "id": 19,
+      "name": "Magma",
+      "power": "Super Flexible",
+      "alterEgo": "cold"
+    },
+    {
+      "id": 20,
+      "name": "Tornado",
+      "power": "Really Smart",
+      "alterEgo": "torny"
+    }
+  ]
+}

server/routes.json

@@ -0,0 +1,3 @@
+{
+  "/api/": "/"
+}

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule}             from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
+
+const routes: Routes = [
+  {path: '', redirectTo: '/', pathMatch: 'full'},
+  {path: '', component: HeroTopComponent}
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+
+export class AppRoutingModule {
+}

src/app/app.component.html

@@ -0,0 +1,3 @@
+<h1>{{title}}</h1>
+<toh-nav></toh-nav>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -0,0 +1,18 @@
+import {Component, Inject} from '@angular/core';
+
+import {APP_CONFIG} from './config/app.config';
+import {IAppConfig} from './config/iapp.config';
+
+@Component({
+  selector: 'toh-app',
+  templateUrl: './app.component.html',
+  styleUrls: [],
+})
+
+export class AppComponent {
+  title: string;
+
+  constructor(@Inject(APP_CONFIG) private appConfig: IAppConfig) {
+    this.title = this.appConfig.title;
+  }
+}

src/app/app.module.ts

@@ -0,0 +1,37 @@
+import {NgModule}      from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {FormsModule}   from '@angular/forms';
+import {HttpModule}    from '@angular/http';
+
+import {APP_CONFIG, AppConfig} from './config/app.config';
+
+import {AppRoutingModule} from './app-routing.module';
+import {SharedModule}     from './shared/shared.module';
+import {CoreModule}       from './core/core.module';
+import {HeroesModule}     from './heroes/heroes.module';
+
+import {AppComponent}     from './app.component';
+import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    AppRoutingModule,
+    CoreModule,
+    HeroesModule,
+    SharedModule
+  ],
+  declarations: [
+    AppComponent,
+    HeroTopComponent
+  ],
+  providers: [
+    {provide: APP_CONFIG, useValue: AppConfig}
+  ],
+  bootstrap: [AppComponent]
+})
+
+export class AppModule {
+}