diff --git a/config/tslint/codelizer.tslint.json b/config/tslint/codelizer.tslint.json new file mode 100644 index 0000000000..fd4295a93d --- /dev/null +++ b/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 + } +} diff --git a/package.json b/package.json index f02481b243..6fbc834f94 100644 --- a/package.json +++ b/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", diff --git a/src/app/+detail/detail.component.ts b/src/app/+detail/detail.component.ts index afe5b371f4..d3b8e5eccf 100644 --- a/src/app/+detail/detail.component.ts +++ b/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: `

Hello from Detail

- ` + `, }) -export class Detail { - constructor() { - - } - - ngOnInit() { - console.log('hello `Detail` component'); +export class DetailComponent implements OnInit { + public ngOnInit(): void { + console.info('hello `Detail` component'); } } diff --git a/src/app/+detail/index.ts b/src/app/+detail/index.ts index f874b18dc8..68730d3b90 100644 --- a/src/app/+detail/index.ts +++ b/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; } diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index 3e9fffaef5..e0180cf6a9 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; /* * We're loading this component asynchronously @@ -6,10 +6,10 @@ import { ActivatedRoute } from '@angular/router'; * 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,15 +24,15 @@ console.log('`About` component loaded asynchronously'); 
this.localState = {{ localState | json }}
- ` + `, }) -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) => { @@ -40,14 +40,14 @@ export class About { 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 @@ -55,7 +55,7 @@ export class About { System.import('../../assets/mock-data/mock-data.json') .then(json => { - console.log('async mockData', json); + console.info('async mockData', json); this.localState = json; }); diff --git a/src/app/about/about.spec.ts b/src/app/about/about.spec.ts index 99933c3666..568958a6dc 100644 --- a/src/app/about/about.spec.ts +++ b/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(); })); }); diff --git a/src/app/app.component.html b/src/app/app.component.html new file mode 100644 index 0000000000..59711bdb42 --- /dev/null +++ b/src/app/app.component.html @@ -0,0 +1,40 @@ + + +
+ +
+ +
this.appState.state = {{ appState.state | json }}
+ + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 08148e71e2..260de0f517 100644 --- a/src/app/app.component.ts +++ b/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: ` - - -
- -
- - 
this.appState.state = {{ appState.state | json }}
- - - ` + 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); } } diff --git a/src/app/app.e2e.ts b/src/app/app.e2e.ts index 59cb21719d..44d74c76b2 100644 --- a/src/app/app.e2e.ts +++ b/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 ', () => { - let subject = element(by.css('app home')).isPresent(); + it('should have ', () => { + let subject = element(by.css('my-app my-home')).isPresent(); let result = true; expect(subject).toEqual(result); }); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2f22d38c93..0f1aefddd5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,57 +11,59 @@ import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularcla import { ENV_PROVIDERS } from './environment'; import { ROUTES } from './app.routes'; // App is our top level component -import { App } from './app.component'; +import { AppComponent } from './app.component'; import { APP_RESOLVER_PROVIDERS } from './app.resolver'; import { AppState, InternalStateType } from './app.service'; -import { Home } from './home'; -import { About } from './about'; -import { NoContent } from './no-content'; -import { XLarge } from './home/x-large'; +import { HomeComponent } from './home'; +import { AboutComponent } from './about'; +import { NoContentComponent } from './no-content'; +import { XLargeDirective } from './home/x-large'; // Application wide providers const APP_PROVIDERS = [ ...APP_RESOLVER_PROVIDERS, - AppState + AppState, ]; type StoreType = { state: InternalStateType, restoreInputValues: () => void, - disposeOldHosts: () => void + disposeOldHosts: () => void, }; /** * `AppModule` is the main entry point into Angular2's bootstraping process */ @NgModule({ - bootstrap: [ App ], + bootstrap: [ AppComponent ], declarations: [ - App, - About, - Home, - NoContent, - XLarge + AppComponent, + AboutComponent, + HomeComponent, + NoContentComponent, + XLargeDirective, ], imports: [ // import Angular's modules BrowserModule, FormsModule, HttpModule, - RouterModule.forRoot(ROUTES, { useHash: true }) + RouterModule.forRoot(ROUTES, { useHash: true }), ], providers: [ // expose our Services and Providers into Angular's dependency injection ENV_PROVIDERS, - APP_PROVIDERS - ] + APP_PROVIDERS, + ], }) export class AppModule { constructor(public appRef: ApplicationRef, public appState: AppState) {} - hmrOnInit(store: StoreType) { - if (!store || !store.state) return; - console.log('HMR store', JSON.stringify(store, null, 2)); + public hmrOnInit(store: StoreType): void { + if (!store || !store.state) { + return; + } + console.info('HMR store', JSON.stringify(store, null, 2)); // set state - this.appState._state = store.state; + this.appState.state = store.state; // set input values if ('restoreInputValues' in store) { let restoreInputValues = store.restoreInputValues; @@ -73,10 +75,10 @@ export class AppModule { delete store.restoreInputValues; } - hmrOnDestroy(store: StoreType) { + public hmrOnDestroy(store: StoreType): void { const cmpLocation = this.appRef.components.map(cmp => cmp.location.nativeElement); // save state - const state = this.appState._state; + const state = this.appState.state; store.state = state; // recreate root elements store.disposeOldHosts = createNewHosts(cmpLocation); @@ -86,11 +88,10 @@ export class AppModule { removeNgStyles(); } - hmrAfterDestroy(store: StoreType) { + public hmrAfterDestroy(store: StoreType): void { // display new elements store.disposeOldHosts(); delete store.disposeOldHosts; } } - diff --git a/src/app/app.resolver.ts b/src/app/app.resolver.ts index 09cf0fc8f4..0ae9fd18e6 100644 --- a/src/app/app.resolver.ts +++ b/src/app/app.resolver.ts @@ -5,15 +5,15 @@ import 'rxjs/add/observable/of'; @Injectable() export class DataResolver implements Resolve { - constructor() { - - } - resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + public resolve( + route: ActivatedRouteSnapshot, + state: RouterStateSnapshot, + ): Observable<{res}> { return Observable.of({ res: 'I am data'}); } } // an array of services to resolve routes with data export const APP_RESOLVER_PROVIDERS = [ - DataResolver + DataResolver, ]; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 15cc50375d..378e36d8f6 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -1,17 +1,14 @@ -import { Routes, RouterModule } from '@angular/router'; -import { Home } from './home'; -import { About } from './about'; -import { NoContent } from './no-content'; - -import { DataResolver } from './app.resolver'; - +import { Routes } from '@angular/router'; +import { HomeComponent } from './home'; +import { AboutComponent } from './about'; +import { NoContentComponent } from './no-content'; export const ROUTES: Routes = [ - { path: '', component: Home }, - { path: 'home', component: Home }, - { path: 'about', component: About }, + { path: '', component: HomeComponent }, + { path: 'home', component: HomeComponent }, + { path: 'about', component: AboutComponent }, { - path: 'detail', loadChildren: () => System.import('./+detail') + path: 'detail', loadChildren: () => System.import('./+detail'), }, - { path: '**', component: NoContent }, + { path: '**', component: NoContentComponent }, ]; diff --git a/src/app/app.service.ts b/src/app/app.service.ts index 854db96fb3..577ab2429a 100644 --- a/src/app/app.service.ts +++ b/src/app/app.service.ts @@ -1,19 +1,15 @@ import { Injectable } from '@angular/core'; export type InternalStateType = { - [key: string]: any + [key: string]: any, }; @Injectable() export class AppState { - _state: InternalStateType = { }; - - constructor() { - - } + private _state: InternalStateType = { }; // already return a clone of the current state - get state() { + get state(): InternalStateType { return this._state = this._clone(this._state); } // never allow mutation @@ -21,21 +17,21 @@ export class AppState { throw new Error('do not mutate the `.state` directly'); } - - get(prop?: any) { + public get(prop?: T): T; + public get(prop?: any): any { // use our state getter for the clone const state = this.state; return state.hasOwnProperty(prop) ? state[prop] : state; } - set(prop: string, value: any) { + public set(prop: string, value: T): T; + public set(prop: string, value: any): any { // internally mutate our state return this._state[prop] = value; } - - private _clone(object: InternalStateType) { + private _clone(object: InternalStateType): InternalStateType { // simple object clone - return JSON.parse(JSON.stringify( object )); + return JSON.parse(JSON.stringify(object)); } } diff --git a/src/app/app.spec.ts b/src/app/app.spec.ts index 80a8ef3a9d..af6acd4b8a 100644 --- a/src/app/app.spec.ts +++ b/src/app/app.spec.ts @@ -1,10 +1,10 @@ import { inject, - TestBed + TestBed, } from '@angular/core/testing'; // Load the implementations that should be tested -import { App } from './app.component'; +import { AppComponent } from './app.component'; import { AppState } from './app.service'; describe('App', () => { @@ -12,10 +12,10 @@ describe('App', () => { beforeEach(() => TestBed.configureTestingModule({ providers: [ AppState, - App + AppComponent, ]})); - it('should have a url', inject([ App ], (app: App) => { + it('should have a url', inject([ AppComponent ], (app: AppComponent) => { expect(app.url).toEqual('https://twitter.com/AngularClass'); })); diff --git a/src/app/environment.ts b/src/app/environment.ts index 8d5288f957..e6c08e1490 100644 --- a/src/app/environment.ts +++ b/src/app/environment.ts @@ -28,10 +28,10 @@ if ('production' === ENV) { const appRef = modRef.injector.get(ApplicationRef); const cmpRef = appRef.components[0]; - let _ng = (window).ng; + let _ng = ( window).ng; enableDebugTools(cmpRef); - (window).ng.probe = _ng.probe; - (window).ng.coreTokens = _ng.coreTokens; + ( window).ng.probe = _ng.probe; + ( window).ng.coreTokens = _ng.coreTokens; return modRef; }; @@ -46,5 +46,5 @@ if ('production' === ENV) { export const decorateModuleRef = _decorateModuleRef; export const ENV_PROVIDERS = [ - ...PROVIDERS + ...PROVIDERS, ]; diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index dcc5f59e86..74feaf7dd2 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,5 +1,5 @@
-

Your Content Here

+

Your Content Here

For material design components use the material2 branch diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index a9fe4944b7..1f36f1a99b 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,38 +1,37 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { AppState } from '../app.service'; import { Title } from './title'; -import { XLarge } from './x-large'; @Component({ // The selector is what angular internally uses // for `document.querySelectorAll(selector)` in our index.html // where, in this case, selector is the string 'home' - selector: 'home', // + selector: 'my-home', // // We need to tell Angular's Dependency Injection which providers are in our app. providers: [ - Title + Title, ], // Our list of styles in our component. We may add more to compose many styles together styleUrls: [ './home.component.css' ], // Every Angular template is first compiled by the browser before Angular runs it's compiler - templateUrl: './home.component.html' + templateUrl: './home.component.html', }) -export class Home { +export class HomeComponent implements OnInit { // Set our default values - localState = { value: '' }; + public localState = { value: '' }; // TypeScript public modifiers constructor(public appState: AppState, public title: Title) { } - ngOnInit() { - console.log('hello `Home` component'); + public ngOnInit(): void { + console.info('hello `Home` component'); // this.title.getData().subscribe(data => this.data = data); } - submitState(value: string) { - console.log('submitState', value); + public submitState(value: string): void { + console.info('submitState', value); this.appState.set('value', value); this.localState.value = ''; } diff --git a/src/app/home/home.e2e.ts b/src/app/home/home.e2e.ts index ec1f519ee2..69f7e9e2d5 100644 --- a/src/app/home/home.e2e.ts +++ b/src/app/home/home.e2e.ts @@ -5,18 +5,16 @@ describe('App', () => { browser.get('/#/home'); }); - it('should have a title', () => { let subject = browser.getTitle(); let result = 'Angular2 Webpack Starter by @gdi2290 from @AngularClass'; expect(subject).toEqual(result); }); - it('should have `your content here` x-large', () => { - let subject = element(by.css('[x-large]')).getText(); + it('should have `your content here` myXLarge', () => { + let subject = element(by.css('[myXLarge]')).getText(); let result = 'Your Content Here'; expect(subject).toEqual(result); }); - }); diff --git a/src/app/home/home.spec.ts b/src/app/home/home.spec.ts index 0c3fe14e2e..93e81944b2 100644 --- a/src/app/home/home.spec.ts +++ b/src/app/home/home.spec.ts @@ -1,18 +1,17 @@ import { inject, - TestBed + TestBed, } from '@angular/core/testing'; -import { Component } from '@angular/core'; import { BaseRequestOptions, ConnectionBackend, - Http + Http, } from '@angular/http'; import { MockBackend } from '@angular/http/testing'; // Load the implementations that should be tested import { AppState } from '../app.service'; -import { Home } from './home.component'; +import { HomeComponent } from './home.component'; import { Title } from './title'; describe('Home', () => { @@ -23,31 +22,34 @@ describe('Home', () => { MockBackend, { provide: Http, - useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) { + useFactory: function( + backend: ConnectionBackend, + defaultOptions: BaseRequestOptions, + ): Http { return new Http(backend, defaultOptions); }, - deps: [MockBackend, BaseRequestOptions] + deps: [MockBackend, BaseRequestOptions], }, AppState, Title, - Home - ] + HomeComponent, + ], })); - it('should have default data', inject([ Home ], (home: Home) => { + it('should have default data', inject([ HomeComponent ], (home: HomeComponent) => { expect(home.localState).toEqual({ value: '' }); })); - it('should have a title', inject([ Home ], (home: Home) => { + it('should have a title', inject([ HomeComponent ], (home: HomeComponent) => { expect(!!home.title).toEqual(true); })); - it('should log ngOnInit', inject([ Home ], (home: Home) => { - spyOn(console, 'log'); - expect(console.log).not.toHaveBeenCalled(); + it('should log ngOnInit with info', inject([ HomeComponent ], (home: HomeComponent) => { + spyOn(console, 'info'); + expect(console.info).not.toHaveBeenCalled(); home.ngOnInit(); - expect(console.log).toHaveBeenCalled(); + expect(console.info).toHaveBeenCalled(); })); }); diff --git a/src/app/home/title/title.service.ts b/src/app/home/title/title.service.ts index 599ef56c13..44b3b7755b 100644 --- a/src/app/home/title/title.service.ts +++ b/src/app/home/title/title.service.ts @@ -3,17 +3,17 @@ import { Http } from '@angular/http'; @Injectable() export class Title { - value = 'Angular 2'; - constructor(public http: Http) { + private value = 'AngularClass'; + constructor(public http: Http) { } - getData() { - console.log('Title#getData(): Get Data'); + public getData(): {value} { + console.info('Title#getData(): Get Data'); // return this.http.get('/assets/data.json') // .map(res => res.json()); return { - value: 'AngularClass' + value: this.value, }; } diff --git a/src/app/home/title/title.spec.ts b/src/app/home/title/title.spec.ts index 8cca3fdd1e..80e3dcc9e0 100644 --- a/src/app/home/title/title.spec.ts +++ b/src/app/home/title/title.spec.ts @@ -1,12 +1,11 @@ import { inject, - TestBed + TestBed, } from '@angular/core/testing'; -import { Component } from '@angular/core'; import { BaseRequestOptions, ConnectionBackend, - Http + Http, } from '@angular/http'; import { MockBackend } from '@angular/http/testing'; @@ -19,12 +18,15 @@ describe('Title', () => { MockBackend, { provide: Http, - useFactory: function(backend: ConnectionBackend, defaultOptions: BaseRequestOptions) { + useFactory: function( + backend: ConnectionBackend, + defaultOptions: BaseRequestOptions, + ): Http { return new Http(backend, defaultOptions); }, - deps: [MockBackend, BaseRequestOptions] + deps: [MockBackend, BaseRequestOptions], }, - Title + Title, ]})); it('should have http', inject([ Title ], (title: Title) => { @@ -32,11 +34,11 @@ describe('Title', () => { })); it('should get data from the server', inject([ Title ], (title: Title) => { - spyOn(console, 'log'); - expect(console.log).not.toHaveBeenCalled(); + spyOn(console, 'info'); + expect(console.info).not.toHaveBeenCalled(); title.getData(); - expect(console.log).toHaveBeenCalled(); + expect(console.info).toHaveBeenCalled(); expect(title.getData()).toEqual({ value: 'AngularClass' }); })); diff --git a/src/app/home/x-large/x-large.directive.ts b/src/app/home/x-large/x-large.directive.ts index 3719f7596d..569c1d2dd4 100644 --- a/src/app/home/x-large/x-large.directive.ts +++ b/src/app/home/x-large/x-large.directive.ts @@ -1,16 +1,16 @@ -import { Component, Directive, ElementRef, Renderer } from '@angular/core'; +import { Directive, ElementRef, Renderer } from '@angular/core'; /* * Directive * XLarge is a simple directive to show how one is made */ @Directive({ - selector: '[x-large]' // using [ ] means selecting attributes + selector: '[myXLarge]', // using [ ] means selecting attributes }) -export class XLarge { +export class XLargeDirective { constructor(element: ElementRef, renderer: Renderer) { - // simple DOM manipulation to set font size to x-large + // simple DOM manipulation to set font size to myXLarge // `nativeElement` is the direct reference to the DOM element - // element.nativeElement.style.fontSize = 'x-large'; + // element.nativeElement.style.fontSize = 'myXLarge'; // for server/webworker support use the renderer renderer.setElementStyle(element.nativeElement, 'fontSize', 'x-large'); diff --git a/src/app/home/x-large/x-large.spec.ts b/src/app/home/x-large/x-large.spec.ts index 9f23b2a960..9839bde679 100644 --- a/src/app/home/x-large/x-large.spec.ts +++ b/src/app/home/x-large/x-large.spec.ts @@ -1,30 +1,27 @@ import { fakeAsync, - inject, tick, - TestBed + TestBed, } from '@angular/core/testing'; import { Component } from '@angular/core'; -import { BaseRequestOptions, Http } from '@angular/http'; import { By } from '@angular/platform-browser/src/dom/debug/by'; -import { MockBackend } from '@angular/http/testing'; // Load the implementations that should be tested -import { XLarge } from './x-large.directive'; +import { XLargeDirective } from './x-large.directive'; describe('x-large directive', () => { // Create a test component to test directives @Component({ - template: '
Content
' + template: '
Content
', }) class TestComponent { } beforeEach(() => { TestBed.configureTestingModule({ declarations: [ - XLarge, - TestComponent - ] + XLargeDirective, + TestComponent, + ], }); }); diff --git a/src/app/no-content/no-content.ts b/src/app/no-content/no-content.ts index 3e287d4c0d..9023e680ee 100644 --- a/src/app/no-content/no-content.ts +++ b/src/app/no-content/no-content.ts @@ -1,13 +1,13 @@ import { Component } from '@angular/core'; @Component({ - selector: 'no-content', + selector: 'my-no-content', template: `

404: page missing

- ` + `, }) -export class NoContent { +export class NoContentComponent { } diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts index 0ad70d90df..ed877f9f4d 100644 --- a/src/custom-typings.d.ts +++ b/src/custom-typings.d.ts @@ -1,3 +1,5 @@ +// tslint:disable + /* * Custom Type Definitions * When including 3rd party modules you also need to include the type definition for the module diff --git a/src/index.html b/src/index.html index 28d912f50a..d6862fc6da 100644 --- a/src/index.html +++ b/src/index.html @@ -22,9 +22,9 @@ - + Loading... - +