Feature/happy lint

config/tslint/codelizer.tslint.json

@@ -0,0 +1,29 @@
+{
+  "rulesDirectory": [
+    "./../../node_modules/codelyzer"
+  ],
+  "rules": {
+    "directive-selector-name": [true, "camelCase"],
+    "component-selector-name": [true, "kebab-case"],
+    "directive-selector-type": [true, "attribute"],
+    "component-selector-type": [true, "element"],
+    "directive-selector-prefix": [true, "my"],
+    "component-selector-prefix": [true, "my"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-attribute-parameter-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "no-forward-ref": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "pipe-naming": [true, "camelCase", "my"],
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "import-destructuring-spacing": true,
+    "templates-use-public": true,
+    "no-access-missing-member": true,
+    "invoke-injectable": true
+  }
+}

package.json

@@ -89,7 +89,7 @@
     "@types/webpack": "^1.12.34",
     "angular2-template-loader": "^0.5.0",
     "awesome-typescript-loader": "^2.2.1",
-    "codelyzer": "~0.0.28",
+    "codelyzer": "^1.0.0-beta.2",
     "copy-webpack-plugin": "^3.0.1",
     "css-loader": "^0.25.0",
     "exports-loader": "^0.6.3",
@@ -120,7 +120,7 @@
     "to-string-loader": "^1.1.4",
     "ts-helpers": "1.1.1",
     "ts-node": "^1.3.0",
-    "tslint": "3.15.1",
+    "tslint": "^4.0.0-dev.0",
     "tslint-loader": "^2.1.3",
     "typedoc": "^0.4.5",
     "typescript": "2.0.3",

src/app/+detail/detail.component.ts

@@ -1,19 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'detail',
+  selector: 'my-detail',
   template: `
     <h1>Hello from Detail</h1>
     <router-outlet></router-outlet>
-  `
+  `,
 })
-export class Detail {
-  constructor() {
-
-  }
-
-  ngOnInit() {
-    console.log('hello `Detail` component');
+export class DetailComponent implements OnInit {
+  public ngOnInit(): void {
+    console.info('hello `Detail` component');
   }
 
 }

src/app/+detail/index.ts

@@ -3,25 +3,25 @@ import { FormsModule } from '@angular/forms';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
-import { Detail } from './detail.component';
+import { DetailComponent } from './detail.component';
 
-console.log('`Detail` bundle loaded asynchronously');
+console.info('`Detail` bundle loaded asynchronously');
 // async components must be named routes for WebpackAsyncRoute
 export const routes = [
-  { path: '', component: Detail, pathMatch: 'full' }
+  { path: '', component: DetailComponent, pathMatch: 'full' },
 ];
 
 @NgModule({
   declarations: [
     // Components / Directives/ Pipes
-    Detail
+    DetailComponent,
   ],
   imports: [
     CommonModule,
     FormsModule,
     RouterModule.forChild(routes),
-  ]
+  ],
 })
 export default class AboutModule {
-  static routes = routes;
+  public static routes = routes;
 }

src/app/about/about.component.ts

@@ -1,15 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 /*
  * We're loading this component asynchronously
  * We are using some magic with es6-promise-loader that will wrap the module with a Promise
  * see https://github.com/gdi2290/es6-promise-loader for more info
  */
 
-console.log('`About` component loaded asynchronously');
+console.info('`About` component loaded asynchronously');
 
 @Component({
-  selector: 'about',
+  selector: 'my-about',
   styles: [`
   `],
   template: `
@@ -24,38 +24,38 @@ console.log('`About` component loaded asynchronously');
       </h3>
     </div>
     <pre>this.localState = {{ localState | json }}</pre>
-  `
+  `,
 })
-export class About {
-  localState: any;
+export class AboutComponent implements OnInit {
+  public localState: any;
   constructor(public route: ActivatedRoute) {
 
   }
 
-  ngOnInit() {
+  public ngOnInit(): void {
     this.route
       .data
       .subscribe((data: any) => {
         // your resolved data from route
         this.localState = data.yourData;
       });
 
-    console.log('hello `About` component');
+    console.info('hello `About` component');
     // static data that is bundled
     // var mockData = require('assets/mock-data/mock-data.json');
-    // console.log('mockData', mockData);
+    // console.debug('mockData', mockData);
     // if you're working with mock data you can also use http.get('assets/mock-data/mock-data.json')
     this.asyncDataWithWebpack();
   }
-  asyncDataWithWebpack() {
+  private asyncDataWithWebpack(): void {
     // you can also async load mock data with 'es6-promise-loader'
     // you would do this if you don't want the mock-data bundled
     // remember that 'es6-promise-loader' is a promise
     setTimeout(() => {
 
       System.import('../../assets/mock-data/mock-data.json')
         .then(json => {
-          console.log('async mockData', json);
+          console.info('async mockData', json);
           this.localState = json;
         });
 

src/app/about/about.spec.ts

@@ -1,9 +1,8 @@
 import { ActivatedRoute, Data } from '@angular/router';
-import { Component } from '@angular/core';
 import { inject, TestBed } from '@angular/core/testing';
 
 // Load the implementations that should be tested
-import { About } from './about.component';
+import { AboutComponent } from './about.component';
 
 describe('About', () => {
   // provide our implementations or mocks to the dependency injector
@@ -15,21 +14,21 @@ describe('About', () => {
         useValue: {
           data: {
             subscribe: (fn: (value: Data) => void) => fn({
-              yourData: 'yolo'
-            })
-          }
-        }
+              yourData: 'yolo',
+            }),
+          },
+        },
       },
-      About
-    ]
+      AboutComponent,
+    ],
   }));
 
-  it('should log ngOnInit', inject([About], (about: About) => {
-    spyOn(console, 'log');
-    expect(console.log).not.toHaveBeenCalled();
+  it('should log ngOnInit using info', inject([AboutComponent], (about: AboutComponent) => {
+    spyOn(console, 'info');
+    expect(console.info).not.toHaveBeenCalled();
 
     about.ngOnInit();
-    expect(console.log).toHaveBeenCalled();
+    expect(console.info).toHaveBeenCalled();
   }));
 
 });

src/app/app.component.html

@@ -0,0 +1,40 @@
+<nav>
+  <span>
+    <a [routerLink]=" ['./'] ">
+      Index
+    </a>
+  </span>
+  |
+  <span>
+    <a [routerLink]=" ['./home'] ">
+      Home
+    </a>
+  </span>
+  |
+  <span>
+    <a [routerLink]=" ['./detail'] ">
+      Detail
+    </a>
+  </span>
+  |
+  <span>
+    <a [routerLink]=" ['./about'] ">
+      About
+    </a>
+  </span>
+</nav>
+
+<main>
+  <router-outlet></router-outlet>
+</main>
+
+<pre class="app-state">this.appState.state = {{ appState.state | json }}</pre>
+
+<footer>
+  <span>WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a></span>
+  <div>
+    <a [href]="url">
+      <img [src]="angularclassLogo" width="25%">
+    </a>
+  </div>
+</footer>

src/app/app.component.ts

@@ -1,7 +1,7 @@
 /*
  * Angular 2 decorators and services
  */
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
 
 import { AppState } from './app.service';
 
@@ -10,66 +10,25 @@ import { AppState } from './app.service';
  * Top Level Component
  */
 @Component({
-  selector: 'app',
+  selector: 'my-app',
   encapsulation: ViewEncapsulation.None,
   styleUrls: [
-    './app.component.css'
+    './app.component.css',
   ],
-  template: `
-    <nav>
-      <span>
-        <a [routerLink]=" ['./'] ">
-          Index
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./home'] ">
-          Home
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./detail'] ">
-          Detail
-        </a>
-      </span>
-      |
-      <span>
-        <a [routerLink]=" ['./about'] ">
-          About
-        </a>
-      </span>
-    </nav>
-
-    <main>
-      <router-outlet></router-outlet>
-    </main>
-
-    <pre class="app-state">this.appState.state = {{ appState.state | json }}</pre>
-
-    <footer>
-      <span>WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a></span>
-      <div>
-        <a [href]="url">
-          <img [src]="angularclassLogo" width="25%">
-        </a>
-      </div>
-    </footer>
-  `
+  templateUrl: './app.component.html',
 })
-export class App {
-  angularclassLogo = 'assets/img/angularclass-avatar.png';
-  name = 'Angular 2 Webpack Starter';
-  url = 'https://twitter.com/AngularClass';
+export class AppComponent implements OnInit {
+  public angularclassLogo = 'assets/img/angularclass-avatar.png';
+  public name = 'Angular 2 Webpack Starter';
+  public url = 'https://twitter.com/AngularClass';
 
   constructor(
     public appState: AppState) {
 
   }
 
-  ngOnInit() {
-    console.log('Initial App State', this.appState.state);
+  public ngOnInit(): void {
+    console.info('Initial App State', this.appState.state);
   }
 
 }

src/app/app.e2e.ts

@@ -4,7 +4,6 @@ describe('App', () => {
     browser.get('/');
   });
 
-
   it('should have a title', () => {
     let subject = browser.getTitle();
     let result  = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass';
@@ -17,8 +16,8 @@ describe('App', () => {
     expect(subject).toEqual(result);
   });
 
-  it('should have <home>', () => {
-    let subject = element(by.css('app home')).isPresent();
+  it('should have <my-home>', () => {
+    let subject = element(by.css('my-app my-home')).isPresent();
     let result  = true;
     expect(subject).toEqual(result);
   });