feat(aio): add a tinyMCE page, update an angular cli to 1.0.1, setup the polyfills

src/app/@shared/shared.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgaCardModule } from '@nga/theme';
+
+@NgModule({
+  exports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    NgaCardModule,
+  ],
+})
+export class NgxSharedModule { }

src/app/pages/charts/charts.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-charts',
+  template: `
+    <p>charts work!</p>
+  `,
+})
+export class NgxChartsComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}

src/app/pages/editors/editors-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NgxEditorsComponent } from './editors.component';
+import { NgxTinyMCEComponent, NgxTinyMCEEditorComponent } from './tinyMCE.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: NgxEditorsComponent,
+    children: [
+      {
+        path: 'tinymce',
+        component: NgxTinyMCEComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class NgxEditorsRoutingModule { }
+
+export const routedComponents = [NgxEditorsComponent, NgxTinyMCEComponent, NgxTinyMCEEditorComponent];

src/app/pages/editors/editors.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-editors',
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class NgxEditorsComponent implements OnInit {
+  constructor() { }
+
+  ngOnInit() { }
+}

src/app/pages/editors/editors.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+
+import { NgxSharedModule } from '../../@shared/shared.module';
+
+import { NgxEditorsRoutingModule, routedComponents } from './editors-routing.module';
+
+@NgModule({
+  imports: [
+    NgxSharedModule,
+    NgxEditorsRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class NgxEditorsModule { }

src/app/pages/editors/tinyMCE.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit, OnDestroy, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ngx-tinymce-editor',
+  template: `
+    <textarea id="{{ elementId }}"></textarea>
+  `,
+})
+export class NgxTinyMCEEditorComponent implements OnInit, OnDestroy, AfterViewInit {
+
+  @Input() elementId: string;
+
+  @Output() editorKeyup = new EventEmitter<any>();
+
+  editor: any;
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  ngAfterViewInit() {
+    tinymce.init({
+      selector: '#' + this.elementId,
+      plugins: ['link', 'paste', 'table'],
+      skin_url: 'assets/skins/lightgray',
+      setup: editor => {
+        this.editor = editor;
+
+        editor.on('keyup', () => {
+          const content = editor.getContent();
+
+          this.editorKeyup.emit(content);
+        });
+      },
+    });
+  }
+
+  ngOnDestroy() {
+    tinymce.remove(this.editor);
+  }
+
+}
+
+@Component({
+  selector: 'ngx-tinymce',
+  template: `
+    <nga-card>
+      <nga-card-body>
+        <ngx-tinymce-editor elementId="tinymceEditor" (editorKeyup)="editorKeyupHandler($event)"></ngx-tinymce-editor>
+      </nga-card-body>
+    </nga-card>
+  `,
+})
+export class NgxTinyMCEComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+  editorKeyupHandler($event) {
+    console.info($event);
+  }
+
+}

src/app/pages/pages-menu.ts

@@ -28,4 +28,20 @@ export const menuItems: List<NgaMenuItem> = List([
     icon: 'ion ion-ios-location-outline',
     link: '/pages/maps',
   },
+  {
+    title: 'Charts',
+    icon: 'ion ion-arrow-graph-up-right',
+    link: '/pages/charts',
+  },
+  {
+    title: 'Editors',
+    icon: 'ion ion-edit',
+    link: '/pages/editors',
+    children: List([
+      {
+        title: 'TinyMCE',
+        link: '/pages/editors/tinymce',
+      },
+    ]),
+  },
 ]);

src/app/pages/pages-routing.module.ts

@@ -6,6 +6,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { UiFeaturesComponent } from './ui-features/ui-features.component';
 import { ComponentsComponent } from './components/components.component';
 import { MapsComponent } from './maps/maps.component';
+import { NgxChartsComponent } from './charts/charts.component';
+import { NgxEditorsComponent } from './editors/editors.component';
 
 const routes: Routes = [
   {
@@ -16,6 +18,8 @@ const routes: Routes = [
       { path: 'ui-features', component: UiFeaturesComponent },
       { path: 'components', component: ComponentsComponent },
       { path: 'maps', component: MapsComponent },
+      { path: 'charts', component: NgxChartsComponent },
+      { path: 'editors', loadChildren: './editors/editors.module#NgxEditorsModule' },
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
     ],
   },

src/app/pages/pages.module.ts

@@ -11,6 +11,16 @@ import { ThemeModule } from '../@theme/theme.module';
 import { UiFeaturesComponent } from './ui-features/ui-features.component';
 import { MapsComponent } from './maps/maps.component';
 import { ComponentsComponent } from './components/components.component';
+import { NgxChartsComponent } from './charts/charts.component';
+
+const PAGES_COMPONENTS = [
+  PagesComponent,
+  DashboardComponent,
+  UiFeaturesComponent,
+  MapsComponent,
+  ComponentsComponent,
+  NgxChartsComponent,
+];
 
 @NgModule({
   imports: [
@@ -21,11 +31,7 @@ import { ComponentsComponent } from './components/components.component';
     ThemeModule,
   ],
   declarations: [
-    PagesComponent,
-    DashboardComponent,
-    UiFeaturesComponent,
-    MapsComponent,
-    ComponentsComponent,
+    ...PAGES_COMPONENTS,
   ],
 })
 export class PagesModule {