From 77a4a96193797d8e503969dc1cb010351475022c Mon Sep 17 00:00:00 2001 From: Evan Schultz Date: Tue, 16 Aug 2016 15:34:48 -0400 Subject: [PATCH 1/4] Update Dependencies Update from RC4 to RC5, most applications should still run but display deprecation warnings for you. --- package.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index d69d78c..2b60985 100644 --- a/package.json +++ b/package.json @@ -45,13 +45,13 @@ "winston": "^2.1.1" }, "devDependencies": { - "@angular/common": "2.0.0-rc.4", - "@angular/compiler": "2.0.0-rc.4", - "@angular/core": "2.0.0-rc.4", - "@angular/forms": "^0.2.0", - "@angular/http": "2.0.0-rc.4", - "@angular/platform-browser": "2.0.0-rc.4", - "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/common": "2.0.0-rc.5", + "@angular/compiler": "2.0.0-rc.5", + "@angular/core": "2.0.0-rc.5", + "@angular/forms": "^0.3.0", + "@angular/http": "2.0.0-rc.5", + "@angular/platform-browser": "2.0.0-rc.5", + "@angular/platform-browser-dynamic": "2.0.0-rc.5", "autoprefixer": "^6.3.3", "autoprefixer-core": "^6.0.1", "awesome-typescript-loader": "^1.0.0", @@ -110,7 +110,7 @@ "raf": "^3.2.0", "ramda": "^0.21.0", "raw-loader": "^0.5.1", - "redux": "^3.4.0", + "redux": "^3.5.0", "redux-localstorage": "^0.4.0", "redux-logger": "^2.6.1", "reflect-metadata": "0.1.3", From cdf0605bc344abf139853fa59845443e0068e9e5 Mon Sep 17 00:00:00 2001 From: Evan Schultz Date: Tue, 16 Aug 2016 15:37:37 -0400 Subject: [PATCH 2/4] Change Bootstrap Import `@NgModule`, and other modules that you need. What used to be in your providers array for bootstrap, are bassed into the providers property of the `@NgModule` decorator. We also change the bootstrapping to now bootstrap our new Angular Module. --- src/index.ts | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/index.ts b/src/index.ts index a58554f..312cac3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,10 +6,11 @@ import '../shims/shims_for_IE'; import 'zone.js/dist/zone'; import 'ts-helpers'; -import { enableProdMode, provide } from '@angular/core'; -import { bootstrap } from '@angular/platform-browser-dynamic'; +import { enableProdMode, provide, NgModule } from '@angular/core'; +import { BrowserModule, platformBrowser} from '@angular/platform-browser'; +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { APP_BASE_HREF } from '@angular/common/index'; -import { provideForms } from '@angular/forms'; +import { FormsModule} from '@angular/forms'; import { DevToolsExtension, NgRedux } from 'ng2-redux'; import { PartyService } from './services/party'; @@ -19,6 +20,17 @@ import { HomePage } from './pages/home.page'; declare const __PRODUCTION__: boolean; declare const __TEST__: boolean; +@NgModule({ + imports: [BrowserModule, FormsModule], + declarations: [HomePage], + bootstrap: [HomePage], + providers: [NgRedux, + DevToolsExtension, + ACTION_PROVIDERS, + PartyService, { provide: APP_BASE_HREF, useValue: '/' }] +}) +class MyAppModule { } + if (__PRODUCTION__) { enableProdMode(); } else { @@ -26,12 +38,5 @@ if (__PRODUCTION__) { } if (!__TEST__) { - bootstrap(HomePage, [ - provideForms(), - NgRedux, - DevToolsExtension, - ACTION_PROVIDERS, - PartyService, - provide(APP_BASE_HREF, { useValue: '/' }) - ]); -} + platformBrowserDynamic().bootstrapModule(MyAppModule) +} \ No newline at end of file From c7eb9d24379c7ed26e0b3c85bb8edf501067bf07 Mon Sep 17 00:00:00 2001 From: Evan Schultz Date: Tue, 16 Aug 2016 15:41:26 -0400 Subject: [PATCH 3/4] Remove unnessicary component imports Since we are registering the `FormsModule` at the app module level, we no longer need to import things like `REACTIVE_FORM_DIRECTIVES` into each of the components that were using them previously. --- src/components/lineup/lineup.component.ts | 4 +--- src/components/table/table.component.ts | 4 ++-- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/lineup/lineup.component.ts b/src/components/lineup/lineup.component.ts index 56d173a..109baf4 100644 --- a/src/components/lineup/lineup.component.ts +++ b/src/components/lineup/lineup.component.ts @@ -5,15 +5,13 @@ import { ChangeDetectionStrategy, EventEmitter } from '@angular/core'; -import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; import { ILineup } from '../../store'; const TEMPLATE = require('./lineup.component.html'); @Component({ selector: 'tb-lineup', template: TEMPLATE, - changeDetection: ChangeDetectionStrategy.OnPush, - directives: [REACTIVE_FORM_DIRECTIVES] + changeDetection: ChangeDetectionStrategy.OnPush }) export class Lineup { @Input() lineup: ILineup; diff --git a/src/components/table/table.component.ts b/src/components/table/table.component.ts index 1573616..07dc3dd 100644 --- a/src/components/table/table.component.ts +++ b/src/components/table/table.component.ts @@ -8,12 +8,12 @@ import { import { Observable } from 'rxjs'; import { IParty } from '../../store'; import { Panel } from '../'; -import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'; const TEMPLATE = require('./table.template.html'); + @Component({ selector: 'tb-table', template: TEMPLATE, - directives: [Panel, REACTIVE_FORM_DIRECTIVES ] + directives: [Panel ] }) export class Table { @Input() table: any; From 24f8e727715073f299c9f3cf4bd27a29db390fa5 Mon Sep 17 00:00:00 2001 From: Evan Schultz Date: Tue, 16 Aug 2016 15:47:32 -0400 Subject: [PATCH 4/4] Create a ComponentModule Now that we have the basics of upgrading to RC5 done, we can start thinking about what areas of our application to start breaking off into their own modules. An obvious starting point is to create a Module to hold our common display components. We can bundle these up into a `ComponentModule` and register this with our App Module foor bootstrapping. We are now able to use our directives like `Table`, `Panel`, etc in our homepage without needing to explicitly import them and define them in the direvties for `home.page.ts` --- src/components/index.ts | 17 +++++++++++++++++ src/components/menu/menu.component.ts | 3 +-- src/components/table/table.component.ts | 4 ++-- src/index.ts | 4 ++-- src/pages/home.page.ts | 3 --- 5 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/index.ts b/src/components/index.ts index 6d0f79e..dcbaf39 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,5 +1,22 @@ +import { NgModule } from '@angular/core'; +import { Lineup } from './lineup'; +import { Panel } from './panel'; +import { Table } from './table'; +import { Menu } from './menu'; +import { Orders } from './orders'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; export * from './lineup'; export * from './panel'; export * from './table'; export * from './menu'; export * from './orders'; + +@NgModule({ + imports: [CommonModule, FormsModule], + declarations: [Lineup, Panel, Table, Menu, Orders], + exports: [Lineup, Panel, Table, Menu, Orders] +}) +export class ComponentsModule { + +} \ No newline at end of file diff --git a/src/components/menu/menu.component.ts b/src/components/menu/menu.component.ts index 5c024f0..1b19db4 100644 --- a/src/components/menu/menu.component.ts +++ b/src/components/menu/menu.component.ts @@ -5,13 +5,12 @@ import { ChangeDetectionStrategy, EventEmitter } from '@angular/core'; -import { Panel } from '../'; + @Component({ selector: 'tb-menu', template: require('./menu.template.html'), changeDetection: ChangeDetectionStrategy.OnPush, - directives: [ Menu ] }) export class Menu { @Input() menuItems: any; diff --git a/src/components/table/table.component.ts b/src/components/table/table.component.ts index 07dc3dd..f4c6847 100644 --- a/src/components/table/table.component.ts +++ b/src/components/table/table.component.ts @@ -7,13 +7,13 @@ import { } from '@angular/core'; import { Observable } from 'rxjs'; import { IParty } from '../../store'; -import { Panel } from '../'; + const TEMPLATE = require('./table.template.html'); @Component({ selector: 'tb-table', template: TEMPLATE, - directives: [Panel ] + }) export class Table { @Input() table: any; diff --git a/src/index.ts b/src/index.ts index 312cac3..365ae7d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,16 +12,16 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { APP_BASE_HREF } from '@angular/common/index'; import { FormsModule} from '@angular/forms'; import { DevToolsExtension, NgRedux } from 'ng2-redux'; - import { PartyService } from './services/party'; import { ACTION_PROVIDERS } from './actions'; import { HomePage } from './pages/home.page'; +import { ComponentsModule } from './components'; declare const __PRODUCTION__: boolean; declare const __TEST__: boolean; @NgModule({ - imports: [BrowserModule, FormsModule], + imports: [BrowserModule, FormsModule, ComponentsModule], declarations: [HomePage], bootstrap: [HomePage], providers: [NgRedux, diff --git a/src/pages/home.page.ts b/src/pages/home.page.ts index 26237c1..1ecae79 100644 --- a/src/pages/home.page.ts +++ b/src/pages/home.page.ts @@ -1,5 +1,4 @@ import { Component, ViewEncapsulation } from '@angular/core'; -import { Lineup, Panel, Table, Menu } from '../components'; import { DevToolsExtension, NgRedux, select } from 'ng2-redux'; import { IAppState, @@ -10,7 +9,6 @@ import { } from '../store'; import { Observable } from 'rxjs'; import { LineupActions, TableActions } from '../actions'; -import { Orders } from '../components'; import { placedOrders } from '../selectors/selectors'; import { reimmutify } from '../store'; @@ -18,7 +16,6 @@ const TEMPLATE = require('./home.template.html'); @Component({ selector: 'tb-home', template: TEMPLATE, - directives: [ Lineup, Panel, Table, Menu, Orders ], encapsulation: ViewEncapsulation.None, styles: [ require('../styles/index.css') ], })