From febd3ce4b17f899e47a7aaae05b6d8097475d103 Mon Sep 17 00:00:00 2001 From: Michael Cacek Date: Sat, 15 Apr 2017 15:09:33 -0500 Subject: [PATCH] ISSUE-100: Add lazy loading of modules Add lazy loading for modules with the exception of timesheet due to an unresolved issue. Upgrade zone.js to fix weird testing messages. Also ad sidenav. --- ng-client/package.json | 2 +- ng-client/src/app/app-routing.module.ts | 11 +++- ng-client/src/app/app.component.html | 1 - ng-client/src/app/app.module.ts | 22 +------ ng-client/src/app/core/auth-guard.service.ts | 24 ++++++++ ng-client/src/app/core/core.module.ts | 15 ++++- ng-client/src/app/core/login.component.ts | 3 +- .../src/app/core/navigation.component.html | 58 +++++++++++++------ .../src/app/core/navigation.component.scss | 30 ++++++++++ .../employee-list/employee-list.component.ts | 1 - .../employee-new/employee-new.component.ts | 1 - .../employee-root.component.html | 1 + .../employee-root/employee-root.component.ts | 12 ++++ .../app/employee/employee-routing.module.ts | 20 ++++++- ng-client/src/app/employee/employee.module.ts | 19 ++++-- .../project-list/project-list.component.ts | 1 - .../project-new/project-new.component.ts | 1 - .../project-root/project-root.component.html | 1 + .../project-root/project-root.component.ts | 12 ++++ .../src/app/project/project-routing.module.ts | 21 ++++++- ng-client/src/app/project/project.module.ts | 21 +++++-- .../src/app/time-units/time-units.module.ts | 2 +- .../timesheet-root.component.html | 1 + .../timesheet-root.component.ts | 12 ++++ .../app/timesheet/timesheet-routing.module.ts | 28 +++++++-- .../app/timesheet/timesheet.component.html | 2 +- .../src/app/timesheet/timesheet.module.ts | 21 +++++-- ng-client/src/styles.scss | 3 - ng-client/yarn.lock | 6 +- 29 files changed, 274 insertions(+), 78 deletions(-) create mode 100644 ng-client/src/app/core/auth-guard.service.ts create mode 100644 ng-client/src/app/employee/employee-root/employee-root.component.html create mode 100644 ng-client/src/app/employee/employee-root/employee-root.component.ts create mode 100644 ng-client/src/app/project/project-root/project-root.component.html create mode 100644 ng-client/src/app/project/project-root/project-root.component.ts create mode 100644 ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.html create mode 100644 ng-client/src/app/timesheet/timesheet-root/timesheet-root.component.ts diff --git a/ng-client/package.json b/ng-client/package.json index 443ce32..8277995 100644 --- a/ng-client/package.json +++ b/ng-client/package.json @@ -28,7 +28,7 @@ "hammerjs": "2.0.8", "moment": "2.17.1", "rxjs": "5.1.0", - "zone.js": "0.8.4" + "zone.js": "0.8.5" }, "devDependencies": { "@angular/cli": "1.0.0", diff --git a/ng-client/src/app/app-routing.module.ts b/ng-client/src/app/app-routing.module.ts index 854e43f..2bb2106 100644 --- a/ng-client/src/app/app-routing.module.ts +++ b/ng-client/src/app/app-routing.module.ts @@ -7,10 +7,18 @@ import { import { PageNotFoundComponent } from './core/not-found.component'; const appRoutes: Routes = [ + { + path: 'employees', + loadChildren: './employee/employee.module#EmployeeModule', + }, + { + path: 'projects', + loadChildren: './project/project.module#ProjectModule', + }, { path: '', redirectTo: '/projects', - pathMatch: 'full' + pathMatch: 'full', }, { path: '**', component: PageNotFoundComponent }, ]; @@ -18,6 +26,7 @@ const appRoutes: Routes = [ imports: [ RouterModule.forRoot(appRoutes) ], + declarations: [ PageNotFoundComponent ], exports: [ RouterModule ] diff --git a/ng-client/src/app/app.component.html b/ng-client/src/app/app.component.html index a85d660..c75c123 100644 --- a/ng-client/src/app/app.component.html +++ b/ng-client/src/app/app.component.html @@ -1,2 +1 @@ - diff --git a/ng-client/src/app/app.module.ts b/ng-client/src/app/app.module.ts index 6137e0c..acd8124 100644 --- a/ng-client/src/app/app.module.ts +++ b/ng-client/src/app/app.module.ts @@ -1,29 +1,19 @@ import { BrowserModule } from '@angular/platform-browser'; -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { HttpModule } from '@angular/http'; -import { FormsModule } from '@angular/forms'; +import { NgModule } from '@angular/core'; +import { MaterialModule } from '@angular/material'; import { Router } from '@angular/router'; -// import { routing } from './app.routes'; - import { AppComponent } from './app.component'; -import { ProjectModule } from './project'; -import { EmployeeModule } from './employee/'; import { CoreModule } from './core'; -import 'hammerjs'; - -import { MaterialModule } from '@angular/material'; - import { ExtHttpConfig } from './core/ExtHttpConfig'; import { AppRoutingModule } from './app-routing.module'; import { LoginComponent } from './core/login.component'; import { LoginRoutingModule } from './core/login-routing.module'; -import { PageNotFoundComponent } from './core/not-found.component'; import { NavigationComponent } from './core/navigation.component'; import { TimesheetModule } from './timesheet/timesheet.module'; @@ -41,24 +31,18 @@ const extHttpConfig = { @NgModule({ imports: [ BrowserModule, - MaterialModule, - HttpModule, - FormsModule, CoreModule.forRoot(extHttpConfig), - EmployeeModule, - ProjectModule, TimesheetModule, LoginRoutingModule, AppRoutingModule, + MaterialModule.forRoot(), ], declarations: [ AppComponent, LoginComponent, - PageNotFoundComponent, NavigationComponent, ], bootstrap: [ AppComponent ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], }) export class AppModule { // Diagnostic only: inspect router configuration diff --git a/ng-client/src/app/core/auth-guard.service.ts b/ng-client/src/app/core/auth-guard.service.ts new file mode 100644 index 0000000..470e2cf --- /dev/null +++ b/ng-client/src/app/core/auth-guard.service.ts @@ -0,0 +1,24 @@ +import { Injectable } from '@angular/core'; +import { + CanActivate, + Router +} from '@angular/router'; + +import { IdentityService } from './identity.service'; + +@Injectable() +export class AuthGuard implements CanActivate { + constructor(private identityService: IdentityService, private router: Router) { } + + canActivate() { + const isAuthenticated = this.identityService.user.authenticated; + + if (isAuthenticated) { + return true; + } else { + // The original URL that the user intends to access is not stored by this approach. + this.router.navigate(['/login']); + return false; + } + } +} diff --git a/ng-client/src/app/core/core.module.ts b/ng-client/src/app/core/core.module.ts index f6a12db..0f92529 100644 --- a/ng-client/src/app/core/core.module.ts +++ b/ng-client/src/app/core/core.module.ts @@ -2,23 +2,34 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; +import { HttpModule } from '@angular/http'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; -import { MaterialModule } from '@angular/material'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import 'hammerjs'; + import { IdentityService } from './identity.service'; import { LocalStorage } from './localStorage'; import { LoginService } from './login.service'; import { ResponseHandler } from './responseHandler.service'; import { ExtHttp } from './extHttp.service'; import { ExtHttpConfig } from './ExtHttpConfig'; +import { AuthGuard } from './auth-guard.service'; +import { ProjectService } from '../project/project.service'; @NgModule({ imports: [ CommonModule, FormsModule, BrowserAnimationsModule, + HttpModule, + ], + exports: [ + CommonModule, + FormsModule, + BrowserAnimationsModule, + HttpModule, ], providers: [ ExtHttp, @@ -26,6 +37,8 @@ import { ExtHttpConfig } from './ExtHttpConfig'; LocalStorage, LoginService, ResponseHandler, + AuthGuard, + ProjectService, ] }) export class CoreModule { diff --git a/ng-client/src/app/core/login.component.ts b/ng-client/src/app/core/login.component.ts index 6aed561..e6649dd 100644 --- a/ng-client/src/app/core/login.component.ts +++ b/ng-client/src/app/core/login.component.ts @@ -13,9 +13,8 @@ import { } from '../core'; @Component({ - selector: 'at-login', templateUrl: './login.component.html', - styleUrls: ['./login.component.scss'] + styleUrls: ['./login.component.scss'], }) export class LoginComponent implements OnInit { error: boolean; diff --git a/ng-client/src/app/core/navigation.component.html b/ng-client/src/app/core/navigation.component.html index 475344e..8696e9b 100644 --- a/ng-client/src/app/core/navigation.component.html +++ b/ng-client/src/app/core/navigation.component.html @@ -1,21 +1,43 @@ -