Restructuring the project with lazy loading

.angular-cli.json

@@ -17,7 +17,7 @@
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
-      "prefix": "seed",
+      "prefix": "ns",
       "styles": [
         "styles.scss"
       ],

nativescript/src/_app-common.scss

@@ -4,16 +4,16 @@
 
 SegmentedBar, ActionBar {
     border-color: transparent;
-    background-color: theme-color(primary);
+    background-color: theme-color(black); //primary
     color: white;
   }
   
   .issue-open {
-    background-color: theme-color(success); // #2AC46D;
+    background-color: theme-color(#2AC46D); //success
   }
   
   .issue-closed {
-    background-color: theme-color(danger); //#CF3257;
+    background-color: theme-color(#CF3257); //danger
   }
   
   .tag,.avatar-small {
@@ -48,7 +48,7 @@ SegmentedBar, ActionBar {
   }
   
   .username {
-    color: theme-color(primary);
+    color: theme-color(black); //primary
     vertical-align: center;
     margin: 0 12;
   }
@@ -101,6 +101,6 @@ SegmentedBar, ActionBar {
   }
   
   .link-btn {
-    color: theme-color(primary);
+    color: theme-color(black); //primary
   }
   

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

@@ -2,7 +2,7 @@
 import { NgModule } from '@angular/core';
 import { NativeScriptRouterModule } from 'nativescript-angular';
 // app
-import { AppRoutes } from './app.routes.mobile';
+import { AppRoutes } from './app.routes';
 
 @NgModule({
     imports: [

src/app/app.component.tns.html

@@ -1,3 +1,2 @@
-<StackLayout orientation="vertical">
-    <page-router-outlet></page-router-outlet>
-</StackLayout>
+<page-router-outlet></page-router-outlet>
+

src/app/app.module.tns.ts

@@ -2,20 +2,13 @@ import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 // nativescript
 import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
 import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
+
 // app
 import { Config } from './common/index';
 import { AppComponent } from './app.component';
 import { SHARED_MODULES, SHARED_PROVIDERS } from './app.common';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { IssuesComponent } from './issues/issues.component';
-import { IssueDetailComponent } from './issues/issue-detail.component';
-import { ProfileComponent } from './profile/profile.component';
+
 import { SigninComponent } from './signin/signin.component';
-import { StatusImagePipe } from './issues/statusImage.pipe';
-import { TruncatePipe } from './issues/truncate.pipe';
-import { SegmentedBarDirective } from './../segmented-bar.directive';
-import { ActionBarDirective } from './../action-bar.directive';
-import { SearchBarDirective } from './../search-bar.directive';
 
 Config.PLATFORM_TARGET = Config.PLATFORMS.MOBILE_NATIVE;
 
@@ -30,16 +23,7 @@ Config.PLATFORM_TARGET = Config.PLATFORMS.MOBILE_NATIVE;
     ],
     declarations: [
         AppComponent,
-        DashboardComponent,
-        IssuesComponent,
-        IssueDetailComponent,
-        ProfileComponent,
         SigninComponent,
-        StatusImagePipe,
-        SegmentedBarDirective,
-        ActionBarDirective,
-        SearchBarDirective,
-        TruncatePipe
     ],
     providers: [
         ...SHARED_PROVIDERS,

src/app/app.module.ts

@@ -19,47 +19,23 @@ import { LayoutModule } from '@progress/kendo-angular-layout';
 // Components
 import { MainMenuComponent } from './main-menu/main-menu.component';
 import { SigninComponent } from './signin/signin.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { ProfileComponent } from './profile/profile.component';
-import { IssuesComponent } from './issues/issues.component';
-import { LabelClass } from './issues/label.directive';
-import { MarkdownComponent } from './markdown/markdown.component';
-import { ActiveIssuesComponent } from './charts/active-issues.component';
-import { TypesDistributionComponent } from './charts/types-distribution.component';
-import { IssueTypesComponent } from './charts/issue-types.component';
-import { StatisticsComponent } from './charts/statistics.component';
 
 Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
 
 @NgModule({
     declarations: [
-        LabelClass,
         AppComponent,
         MainMenuComponent,
         SigninComponent,
-        DashboardComponent,
-        ProfileComponent,
-        IssuesComponent,
-        MarkdownComponent,
-        ActiveIssuesComponent,
-        TypesDistributionComponent,
-        IssueTypesComponent,
-        StatisticsComponent
     ],
     imports: [
         BrowserModule,
-        ChartsModule,
-        GridModule,
-        DialogModule,
-        InputsModule,
-        ButtonsModule,
         BrowserAnimationsModule,
-        LayoutModule,
         HttpClientModule,
         ...SHARED_MODULES
     ],
     providers: [
-        ...SHARED_PROVIDERS,
+        ...SHARED_PROVIDERS
     ],
     bootstrap: [ AppComponent ]
 })

src/app/app.routes.mobile.tns.ts

@@ -1,13 +0,0 @@
-import { Routes } from '@angular/router';
-import { IssuesComponent } from './issues';
-import { IssueDetailComponent } from './issues/issue-detail.component';
-
-/**
- * Define app module routes here, e.g., to lazily load a module
- * (do not place feature module routes here, use an own -routing.module.ts in the feature instead)
- */
-export const AppRoutes: Routes = [
-    { path: '', pathMatch: 'full', redirectTo: '/issues' },
-    { path: 'issues', pathMatch: 'full', component: IssuesComponent },
-    { path: 'detail/:id', component: IssueDetailComponent }
-];

src/app/app.routes.tns.ts

@@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+import { SigninComponent } from './signin';
+/**
+ * Define app module routes here, e.g., to lazily load a module
+ * (do not place feature module routes here, use an own -routing.module.ts in the feature instead)
+ */
+export const AppRoutes: Routes = [
+    { path: '', pathMatch: 'full', redirectTo: '/signin' },
+    // { path: '', pathMatch: 'full', redirectTo: '/issues' },
+    // { path: '', pathMatch: 'full', redirectTo: '/issues/detail/33' },
+    // { path: '', pathMatch: 'full', redirectTo: '/dashboard' },
+    // { path: '', pathMatch: 'full', redirectTo: '/profile' },
+    { path: 'signin',  component: SigninComponent },
+    {
+        path: 'profile',
+        loadChildren: '~/app/profile/profile.module#ProfileModule' },
+    {
+        path: 'issues',
+        loadChildren: '~/app/issues/issues.module#IssuesModule'
+    },
+    {
+        path: 'dashboard',
+        loadChildren: '~/app/dashboard/dashboard.module#DashboardModule'
+    },
+];

src/app/dashboard/dashboard.common.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// vendor dependencies
+const core_1 = require("@ngx-translate/core");
+// app
+const shared_1 = require("../shared");
+const common_1 = require("../common");
+classifiedModuleName %  > Routes;
+from;
+'./dashboard.routes';
+classifiedModuleName %  > Component;
+from;
+'./dashboard/dashboard.component';
+exports.SHARED_MODULES = [
+    shared_1.SharedModule,
+    common_1.RouterModule.forChild(, classifiedModuleName %  > Routes),
+    core_1.TranslateModule.forChild(),
+];
+exports.COMPONENT_DECLARATIONS = [
+    , classifiedModuleName %  > Component
+];
+//# sourceMappingURL=__name__.common.js.map

src/app/dashboard/dashboard.common.ts

@@ -0,0 +1,24 @@
+// app
+import { SharedModule } from '../shared';
+import { RouterModule } from '../common';
+import { DashboardRoutes } from './dashboard.routes';
+import { DashboardComponent } from './dashboard/dashboard.component';
+
+import { ActiveIssuesComponent } from './charts/active-issues.component';
+import { TypesDistributionComponent } from './charts/types-distribution.component';
+import { IssueTypesComponent } from './charts/issue-types.component';
+import { StatisticsComponent } from './charts/statistics.component';
+
+export const SHARED_MODULES: any[] = [
+  SharedModule,
+  RouterModule.forChild(<any>DashboardRoutes)
+];
+
+export const COMPONENT_DECLARATIONS: any[] = [
+  DashboardComponent,
+
+  ActiveIssuesComponent,
+  TypesDistributionComponent,
+  IssueTypesComponent,
+  StatisticsComponent
+];

src/app/dashboard/dashboard.component.tns.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'dashboard',
-    templateUrl: './dashboard.template.html'
-})
-export class DashboardComponent {};

src/app/dashboard/dashboard.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./dashboard.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.js.map

src/app/dashboard/dashboard.module.tns.js

@@ -0,0 +1,28 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./dashboard.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+        schemas: [
+            core_1.NO_ERRORS_SCHEMA
+        ]
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.tns.js.map

src/app/dashboard/dashboard.module.tns.ts

@@ -0,0 +1,15 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './dashboard.common';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ]
+})
+export class DashboardModule { }

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './dashboard.common';
+
+// Kendo UI
+import { ChartsModule } from '@progress/kendo-angular-charts';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+    ChartsModule,
+    ButtonsModule,
+    LayoutModule,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS,
+  ],
+})
+export class DashboardModule { }

src/app/dashboard/dashboard.routes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const router_1 = require("@angular/router");
+classifiedModuleName %  > Component;
+from;
+'./dashboard/dashboard.component';
+;
+classifiedModuleName %  > router_1.Routes;
+router_1.Routes = [
+    {
+        path: '',
+        component: , classifiedModuleName:  %  > Component
+    }
+];
+//# sourceMappingURL=__name__.routes.js.map

src/app/dashboard/dashboard.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+// app
+import { DashboardComponent } from './dashboard/dashboard.component';
+
+export const DashboardRoutes: Routes = [
+  {
+    path: '',
+    component: DashboardComponent
+  }
+];

src/app/dashboard/dashboard.template.tns.html

@@ -1 +0,0 @@
-Dashboard mobile

src/app/dashboard/dashboard/dashboard.component.ts

@@ -1,31 +1,27 @@
 import { Component, ViewEncapsulation, NgModule, HostBinding } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute } from '@angular/router';
-import { GithubService } from './../shared/github.service'
-import { IssuesProcessor } from './../shared/issues-processor.service'
 
+// import { IssueTypesComponent } from '../charts/issue-types.component';
+// import { TypesDistributionComponent } from '../charts/types-distribution.component';
+// import { ActiveIssuesComponent } from '../charts/active-issues.component';
+// import { StatisticsComponent } from '../charts/statistics.component';
 
-import { IssueTypesComponent } from '../charts/issue-types.component';
-import { TypesDistributionComponent } from '../charts/types-distribution.component';
-import { ActiveIssuesComponent } from '../charts/active-issues.component';
-import { StatisticsComponent } from '../charts/statistics.component';
-
-import { IssuesModel } from './../shared/issues.model';
-import { ChartsModule } from '@progress/kendo-angular-charts';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import { LayoutModule } from '@progress/kendo-angular-layout';
+import { IssuesModel } from './../../shared/issues.model';
 import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/merge';
-
 // import 'hammerjs';
 
+import { GithubService } from './../../shared/github.service';
+import { IssuesProcessor } from './../../shared/issues-processor.service';
+
 @Component({
     moduleId: module.id,
     selector: 'dashboard',
-    providers: [GithubService, IssuesProcessor],
+    // providers: [GithubService, IssuesProcessor],
     encapsulation: ViewEncapsulation.None,
     templateUrl: './dashboard.template.html'
 })
@@ -38,8 +34,8 @@ export class DashboardComponent {
     private subscription: Subscription;
     private selectedIndex = 0;
 
-    @HostBinding('attr.id') get get_id() { return 'dashboard'; }
-    @HostBinding('class') get get_class() { return 'dashboard'; }
+    // @HostBinding('attr.id') get get_id() { return 'dashboard'; }
+    // @HostBinding('class') get get_class() { return 'dashboard'; }
 
     constructor(public githubService: GithubService, public issuesProcessor: IssuesProcessor) {
         this.rangeStart = this.issuesProcessor.getMonthsRange(this.months);

src/app/dashboard/dashboard/dashboard.template.tns.html

@@ -0,0 +1,6 @@
+<ActionBar title="Dashboard" class="action-bar">
+</ActionBar>
+<StackLayout>
+  <Label text="Dashboard" textWrap="true"></Label>
+</StackLayout>
+

src/app/issues/index.ts

@@ -1 +1 @@
-export * from './issues.component';
+// export * from './issues.module';

src/app/issues/issue-detail.component.tns.ts

@@ -1,46 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
-import { GithubService } from './../shared/github.service';
-import { IssuesProcessor } from './../shared/issues-processor.service';
-import { RouterExtensions } from "nativescript-angular/router";
-import { Issue } from './../shared/issues.model';
-import { Page } from "ui/page";
-
-@Component({
-  moduleId: module.id,
-  selector: "ns-issue-detail",
-  templateUrl: './issue-detail.component.html',
-  encapsulation: ViewEncapsulation.None
-})
-export class IssueDetailComponent implements OnInit {
-  issue: Issue;
-  isTruncating: boolean = true;
-
-  get truncateLength(): number {
-    return this.isTruncating ? 200 : 10000;
-  }
-
-  constructor(
-      public page: Page,
-      public route: ActivatedRoute,
-      public githubService: GithubService,
-      private routerExtensions: RouterExtensions) {
-    this.page.actionBarHidden = true;
-  }
-
-  ngOnInit() {
-    const id = +this.route.snapshot.params['id'];
-
-    this.githubService.getGithubIssue(id).toPromise().then((data) => {
-      this.page.actionBarHidden = false;
-      this.issue = IssuesProcessor.mapIssue(data);
-    });
-  }
-
-  onNavBtnTap(){
-    this.routerExtensions.back();
-  }
-  toggleTruncate() {
-    this.isTruncating = !this.isTruncating;
-  }
-}

src/app/issues/issue-detail/issue-detail.component.tns.html

@@ -1,11 +1,12 @@
-<ActionBar [title]="'Issue #' + issue?.id" [class.issue-open]="issue?.state === 'open'" [class.issue-closed]="issue?.state === 'closed'">
-  <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onNavBtnTap()"></NavigationButton>
+<!-- <ActionBar [title]="'Issue #' + id" [class.issue-open]="issue?.state === 'open'" [class.issue-closed]="issue?.state === 'closed'"> -->
+<ActionBar [title]="'Issue #' + id" class="action-bar">
+  <!-- <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" (tap)="onNavBtnTap()"></NavigationButton> -->
 </ActionBar>
 
-<GridLayout rows="auto *">
+<GridLayout rows="auto *" class="m-5">
   <!-- Header -->
   <StackLayout *ngIf="issue" class="issue-detail-title" [class.issue-open]="issue?.state === 'open'" [class.issue-closed]="issue?.state === 'closed'">
-    <Label [text]="issue?.title" textWrap="true" class="title"></Label>
+    <Label [text]="issue?.title" textWrap="true" class="h2 text-center"></Label>
     <Label [text]="issue?.state | uppercase" class="status-tag"></Label>
   </StackLayout>
 

src/app/issues/issue-detail/issue-detail.component.ts

@@ -0,0 +1,39 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GithubService } from './../../shared/github.service';
+import { IssuesProcessor } from './../../shared/issues-processor.service';
+import { Issue } from './../../shared/issues.model';
+
+@Component({
+  moduleId: module.id,
+  selector: 'ns-issue-detail',
+  templateUrl: './issue-detail.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class IssueDetailComponent implements OnInit {
+  id: number;
+  issue: Issue;
+  isTruncating = true;
+
+  get truncateLength(): number {
+    return this.isTruncating ? 200 : 10000;
+  }
+
+  constructor(
+    public route: ActivatedRoute,
+    public githubService: GithubService,
+    private router: Router) {
+  }
+
+  ngOnInit() {
+    this.id = +this.route.snapshot.params['id'];
+
+    this.githubService.getGithubIssue(this.id).toPromise().then((data) => {
+      this.issue = IssuesProcessor.mapIssue(data);
+    });
+  }
+
+  toggleTruncate() {
+    this.isTruncating = !this.isTruncating;
+  }
+}

src/app/issues/issues.common.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// vendor dependencies
+const core_1 = require("@ngx-translate/core");
+// app
+const shared_1 = require("../shared");
+const common_1 = require("../common");
+classifiedModuleName %  > Routes;
+from;
+'./issues.routes';
+classifiedModuleName %  > Component;
+from;
+'./issues/issues.component';
+exports.SHARED_MODULES = [
+    shared_1.SharedModule,
+    common_1.RouterModule.forChild(, classifiedModuleName %  > Routes),
+    core_1.TranslateModule.forChild(),
+];
+exports.COMPONENT_DECLARATIONS = [
+    , classifiedModuleName %  > Component
+];
+//# sourceMappingURL=__name__.common.js.map

src/app/issues/issues.common.ts

@@ -0,0 +1,16 @@
+// app
+import { SharedModule } from '../shared';
+import { RouterModule } from '../common';
+import { IssuesRoutes } from './issues.routes';
+import { IssuesComponent } from './issues/issues.component';
+import { IssueDetailComponent } from './issue-detail/issue-detail.component';
+
+export const SHARED_MODULES: any[] = [
+  SharedModule,
+  RouterModule.forChild(<any>IssuesRoutes)
+];
+
+export const COMPONENT_DECLARATIONS: any[] = [
+  IssuesComponent,
+  IssueDetailComponent
+];

src/app/issues/issues.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./issues.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.js.map

src/app/issues/issues.module.tns.js

@@ -0,0 +1,28 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./issues.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+        schemas: [
+            core_1.NO_ERRORS_SCHEMA
+        ]
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.tns.js.map

src/app/issues/issues.module.tns.ts

@@ -0,0 +1,20 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './issues.common';
+
+import { StatusImagePipe } from './statusImage.pipe';
+import { TruncatePipe } from './truncate.pipe';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS,
+    StatusImagePipe,
+    TruncatePipe
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ]
+})
+export class IssuesModule { }

src/app/issues/issues.module.ts

@@ -0,0 +1,33 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './issues.common';
+
+// Kendo UI
+import { GridModule } from '@progress/kendo-angular-grid';
+import { ChartsModule } from '@progress/kendo-angular-charts';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+
+import { LabelClass } from './label.directive';
+import { MarkdownComponent } from './markdown/markdown.component';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+    GridModule,
+    DialogModule,
+    InputsModule,
+    ButtonsModule,
+    LayoutModule,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS,
+    LabelClass,
+    MarkdownComponent,
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ]
+})
+export class IssuesModule { }

src/app/issues/issues.routes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const router_1 = require("@angular/router");
+classifiedModuleName %  > Component;
+from;
+'./issues/issues.component';
+;
+classifiedModuleName %  > router_1.Routes;
+router_1.Routes = [
+    {
+        path: '',
+        component: , classifiedModuleName:  %  > Component
+    }
+];
+//# sourceMappingURL=__name__.routes.js.map

src/app/issues/issues.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+// app
+import { IssuesComponent } from './issues/issues.component';
+import { IssueDetailComponent } from './issue-detail/issue-detail.component';
+
+export const IssuesRoutes: Routes = [
+  {
+    path: '',
+    component: IssuesComponent
+  },
+  {
+    path: 'detail/:id',
+    component: IssueDetailComponent
+  }
+];

src/app/issues/issues/issues.component.tns.html

@@ -1,11 +1,10 @@
-<ActionBar title="Issues"></ActionBar>
-<GridLayout class="issue-container" rows="auto auto auto *">
-
-  <ListView [items]="filteredIssues$ | async" row="3">
+<ActionBar title="Issues" class="action-bar">
+</ActionBar>
+<GridLayout rows="*">
+  <ListView [items]="filteredIssues$ | async" row="0">
     <ng-template let-item="item" let-i="index">
-
-      <GridLayout rows="auto auto auto" columns="auto * auto" [nsRouterLink]="['/detail', item.id]">
-
+      
+      <GridLayout rows="auto, auto, auto" columns="auto, *, auto" [nsRouterLink]="['detail', item.id]">
         <Image [src]='item.state | statusImage' col="0" rowSpan="3" class="status-image"></Image>
         <Label [text]='"#" + item.id' col="2" rowSpan="3" class="issue-number"></Label>
 
@@ -15,7 +14,12 @@
         <WrapLayout orientation="horizontal" col="1" row="2" margin="6 0">
           <Image [src]="item.author.avatarUrlThumb" class="avatar-small"></Image>
 
-          <Label *ngFor="let label of item.labels" [text]="label.name" [style.backgroundColor]="label.color" class="tag"></Label>
+          <Label 
+            *ngFor="let label of item.labels"
+            [text]="label.name"
+            [style.backgroundColor]="label.color"
+            class="tag">
+          </Label>
         </WrapLayout>
 
       </GridLayout>
@@ -23,5 +27,5 @@
     </ng-template>
   </ListView>
 
-  <ActivityIndicator width="100" height="100" [busy]="loading" row="3"></ActivityIndicator>
+  <ActivityIndicator width="100" height="100" [busy]="loading" row="0"></ActivityIndicator>
 </GridLayout>

src/app/issues/issues/issues.component.tns.ts

@@ -6,9 +6,8 @@ import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 
-import { GithubService } from './../shared/github.service';
-import { IssuesProcessor } from './../shared/issues-processor.service';
-import { prompt } from 'ui/dialogs';
+import { GithubService } from './../../shared/github.service';
+import { IssuesProcessor } from './../../shared/issues-processor.service';
 
 export interface Label {
     name: string;
@@ -44,7 +43,7 @@ export interface Issue {
 @Component({
     moduleId: module.id,
     selector: 'issues',
-    templateUrl: './issues.template.html'
+    templateUrl: './issues.component.html'
 })
 export class IssuesComponent {
     loading = true;
@@ -66,7 +65,6 @@ export class IssuesComponent {
           if (!issues) {
             return [];
           }
-
           return issues;
         });
     }

src/app/issues/issues/issues.component.ts

@@ -1,30 +1,25 @@
-import { Component, ViewEncapsulation, NgModule, HostBinding } from '@angular/core';
+import { Component, ViewEncapsulation, NgModule, HostBinding, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MarkdownComponent } from '../markdown/markdown.component';
-import { Http, Headers } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { Subject } from 'rxjs/Subject';
-import { GithubService } from './../shared/github.service';
-import { IssuesProcessor } from './../shared/issues-processor.service';
+
+import { GithubService } from './../../shared/github.service';
+import { IssuesProcessor } from './../../shared/issues-processor.service';
+
 import { GridModule } from '@progress/kendo-angular-grid';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import { LabelClass } from './label.directive';
 
 @Component({
-    moduleId: module.id,
-    selector: 'issues',
-    encapsulation: ViewEncapsulation.None,
-    providers: [
-    GithubService,
-    IssuesProcessor
-    ],
-  templateUrl: './issues.template.html'
+  moduleId: module.id,
+  selector: 'issues',
+  templateUrl: './issues.component.html'
 })
-export class IssuesComponent {
+export class IssuesComponent implements OnInit {
     public isLoading = true;
     public selectedPeriod = 3;
-    public issues: any;
-    public allIssues: any;
+    public issues: any[];
+    public allIssues: any[];
     public view: any;
     public total = 5;
     public pageSize = 10;
@@ -39,22 +34,29 @@ export class IssuesComponent {
     @HostBinding('attr.id') get get_id() { return 'issues'; }
     @HostBinding('class') get get_class() { return 'issues'; }
 
-    constructor(public http: Http, public githubService: GithubService, public issuesProcessor: IssuesProcessor) {
+    constructor(public http: HttpClient, public githubService: GithubService, public issuesProcessor: IssuesProcessor) {
         githubService.getGithubIssues({pages: 12}).subscribe((data: any[]) => {
             data = data.reduce((agg, curr) => [...agg, ...curr], []).filter(issue => issue.pull_request ? false : true);
             this.allIssues = data;
-            this.applyPaging(this.issuesProcessor.filterByMonth(this.allIssues, this.months))
+            this.applyPaging(this.issuesProcessor.filterByMonth(this.allIssues, this.months));
             this.isLoading = false;
         });
     }
 
+    ngOnInit(): void {
+        // this.githubService.getGithubIssues({pages: 12}).map((data: any[]) => {
+        //     data = data.reduce((agg, curr) => [...agg, ...curr], []).filter(issue => issue.pull_request ? false : true);
+        //     this.allIssues = data;
+        //     this.applyPaging(this.issuesProcessor.filterByMonth(this.allIssues, this.months));
+        //     this.isLoading = false;
+        // });
+    }
     onFilterClick(e) {
         this.selectedPeriod = e;
         this.skip = 0;
         this.months = e;
         this.range = this.dateRange();
         this.applyPaging(this.issuesProcessor.filterByMonth(this.allIssues, e));
-
     }
 
     onPageChange(e) {

src/app/issues/section/section.component.tns.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'ns-section',
-  styles: [require("../app-styles").all],
+  styles: [require('../../app-styles').all],
   template: `
     <GridLayout rows="auto auto auto" [row]="row">
         <Label *ngIf="title" [text]="title" class="section-title" margin="16 16 4 16"></Label>

src/app/issues/truncate.pipe.tns.ts

@@ -1,8 +1,8 @@
-import { Pipe, PipeTransform } from "@angular/core";
+import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'truncate' })
 export class TruncatePipe implements PipeTransform {
   transform(value: string, limit: number = 200): string {
-    return value.length > limit ? value.substring(0, limit) + "..." : value;
+    return value.length > limit ? value.substring(0, limit) + '...' : value;
   }
-}
+}

src/app/issues/user/user.component.tns.ts

@@ -1,5 +1,5 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { User } from './../shared/issues.model';
+import { User } from './../../shared/issues.model';
 
 @Component({
   selector: 'ns-user',

src/app/profile/index.ts

@@ -1 +0,0 @@
-export * from './profile.component';

src/app/profile/profile.common.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// vendor dependencies
+const core_1 = require("@ngx-translate/core");
+// app
+const shared_1 = require("../shared");
+const common_1 = require("../common");
+classifiedModuleName %  > Routes;
+from;
+'./profile.routes';
+classifiedModuleName %  > Component;
+from;
+'./profile/profile.component';
+exports.SHARED_MODULES = [
+    shared_1.SharedModule,
+    common_1.RouterModule.forChild(, classifiedModuleName %  > Routes),
+    core_1.TranslateModule.forChild(),
+];
+exports.COMPONENT_DECLARATIONS = [
+    , classifiedModuleName %  > Component
+];
+//# sourceMappingURL=__name__.common.js.map

src/app/profile/profile.common.ts

@@ -0,0 +1,14 @@
+// app
+import { SharedModule } from '../shared';
+import { RouterModule } from '../common';
+import { ProfileRoutes } from './profile.routes';
+import { ProfileComponent } from './profile/profile.component';
+
+export const SHARED_MODULES: any[] = [
+  SharedModule,
+  RouterModule.forChild(<any>ProfileRoutes)
+];
+
+export const COMPONENT_DECLARATIONS: any[] = [
+  ProfileComponent
+];

src/app/profile/profile.component.tns.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'profile',
-    template: 'profile mobile'
-})
-export class ProfileComponent {};

src/app/profile/profile.module.js

@@ -0,0 +1,25 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./profile.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.js.map

src/app/profile/profile.module.tns.js

@@ -0,0 +1,28 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular/core");
+const ____dasherizedModuleName____common_1 = require("./profile.common");
+let default_1 = class {
+};
+default_1 = __decorate([
+    core_1.NgModule({
+        imports: [
+            ...____dasherizedModuleName____common_1.SHARED_MODULES,
+        ],
+        declarations: [
+            ...____dasherizedModuleName____common_1.COMPONENT_DECLARATIONS
+        ],
+        schemas: [
+            core_1.NO_ERRORS_SCHEMA
+        ]
+    })
+], default_1);
+ %  > Module;
+{ }
+//# sourceMappingURL=__name__.module.tns.js.map

src/app/profile/profile.module.tns.ts

@@ -0,0 +1,15 @@
+import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './profile.common';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS
+  ],
+  schemas: [
+    NO_ERRORS_SCHEMA
+  ]
+})
+export class ProfileModule { }

src/app/profile/profile.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { SHARED_MODULES, COMPONENT_DECLARATIONS } from './profile.common';
+
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { DialogModule } from '@progress/kendo-angular-dialog';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+
+@NgModule({
+  imports: [
+    ...SHARED_MODULES,
+    ButtonsModule,
+    DialogModule,
+    InputsModule,
+  ],
+  declarations: [
+    ...COMPONENT_DECLARATIONS
+  ],
+})
+export class ProfileModule { }

src/app/profile/profile.routes.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const router_1 = require("@angular/router");
+classifiedModuleName %  > Component;
+from;
+'./profile/profile.component';
+;
+classifiedModuleName %  > router_1.Routes;
+router_1.Routes = [
+    {
+        path: '',
+        component: , classifiedModuleName:  %  > Component
+    }
+];
+//# sourceMappingURL=__name__.routes.js.map

src/app/profile/profile.routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+// app
+import { ProfileComponent } from './profile/profile.component';
+
+export const ProfileRoutes: Routes = [
+  {
+    path: '',
+    component: ProfileComponent
+  }
+];

src/app/profile/profile/profile.component.ts

@@ -1,9 +1,9 @@
 import { Component, ViewEncapsulation, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { GithubService } from './../shared/github.service';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
-import { DialogModule } from '@progress/kendo-angular-dialog';
-import { InputsModule } from '@progress/kendo-angular-inputs';
+import { GithubService } from './../../shared/github.service';
+// import { ButtonsModule } from '@progress/kendo-angular-buttons';
+// import { DialogModule } from '@progress/kendo-angular-dialog';
+// import { InputsModule } from '@progress/kendo-angular-inputs';
 import { Router } from '@angular/router';
 
 @Component({

src/app/profile/profile/profile.template.tns.html

@@ -0,0 +1,5 @@
+<ActionBar title="Profile"  class="action-bar">
+</ActionBar>
+<StackLayout>
+    <Label text="Profile" textWrap="true"></Label>
+</StackLayout>

src/app/shared/shared.module.tns.ts

@@ -1,5 +1,7 @@
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 
+import { RouterModule } from '../common';
+
 import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
 import { NativeScriptFormsModule } from 'nativescript-angular/forms';
 
@@ -7,7 +9,8 @@ import { NativeScriptFormsModule } from 'nativescript-angular/forms';
     declarations: [],
     exports: [
         NativeScriptModule,
-        NativeScriptFormsModule
+        NativeScriptFormsModule,
+        RouterModule,
     ],
     schemas: [ NO_ERRORS_SCHEMA ]
 })

src/app/shared/shared.module.ts

@@ -1,15 +1,17 @@
 import { NgModule } from '@angular/core';
 
 import { CommonModule } from '@angular/common';
-
 import { FormsModule } from '@angular/forms';
 
+import { RouterModule } from '../common';
+
 @NgModule({
     imports: [ CommonModule ],
     declarations: [],
     exports: [
         CommonModule,
-        FormsModule
+        FormsModule,
+        RouterModule
     ]
 })
 export class SharedModule { };

src/app/signin/signin.component.tns.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-    moduleId: module.id,
-    selector: 'signin',
-    template: 'signin mobile'
-})
-export class SigninComponent {};

src/app/signin/signin.component.ts

@@ -11,16 +11,20 @@ import { Router } from '@angular/router';
 })
 export class SigninComponent {
     constructor(private router: Router) {}
+    public email = 'ggkrustev';
+    public password = 'passw0rd';
 
     @HostBinding('attr.id') protected get id(): string {
         return 'signin';
     }
 
     @HostBinding('class') protected get appClass(): string {
-        return 'signin'
+        return 'signin';
     }
 
     public onLoginClick() {
-        this.router.navigate(['/dashboard']);
+        // this.router.navigate(['/dashboard']);
+        // this.router.navigate(['/issues']);
+        this.router.navigate(['/profile']);
     }
 }

src/app/signin/signin.template.html

@@ -3,10 +3,10 @@
 	<p id="app-subtitle">SAMPLE DASHBOARD</p>
 
 	<div class="form-group mt-4">
-		<input type="text" class="form-control" placeholder="Email or Username" />
+		<input [value]="email" type="text" class="form-control" placeholder="Email or Username"/>
 	</div>
 	<div class="form-group mb-4">
-		<input type="password" class="form-control" placeholder="Password" />
+		<input [value]="password" type="password" class="form-control" placeholder="Password"/>
 		<p class="text-xs-right small">
 			<a href="#">Forgot it?</a>
 		</p>

src/app/signin/signin.template.tns.html

@@ -0,0 +1,21 @@
+<ActionBar title="Signin" class="action-bar">
+</ActionBar>
+
+<GridLayout backgroundColor="#CCCCCC">
+    <StackLayout verticalAlignment="center">
+        <StackLayout class="form m-10 p-15" backgroundColor="#FFFFFF">
+            <StackLayout class="input-field">
+                <Label text="Email" class="label font-weight-bold m-b-5"></Label>
+                <TextField [text]="email" class="input"></TextField>
+                <StackLayout class="hr-light"></StackLayout>
+            </StackLayout>
+            <StackLayout class="input-field">
+                <Label text="Password" class="label font-weight-bold m-b-5"></Label>
+                <TextField [text]="password" secure="true" class="input"></TextField>
+                <StackLayout class="hr-light"></StackLayout>
+            </StackLayout>
+            <Button class="btn btn-primary w-full" text="Login" [nsRouterLink]="['/issues']" clearHistory="true"></Button>
+            <Label text="Forgot it?" class="text-center footnote"></Label>
+        </StackLayout>
+    </StackLayout>
+</GridLayout>