Moving User/kycForm and Polls module as LAZY Feature module

Moving User/kycForm and Polls module as LAZY Feature module

Author: aashishGitHub

angular-playground/pollingApp/src/app/app-poll/app-poll.module.ts

@@ -11,33 +11,29 @@ import { AppPollData } from './app-poll.data';
 import { AppPollComponent } from './app-poll.component';
 import { AppPollListComponent} from  './app-poll-list.component';
 import { BrowserModule } from '@angular/platform-browser';
-
-// import { ProductListComponent } from './product-list.component';
-// import { ProductDetailComponent } from './product-detail.component';
-// import { ProductEditComponent } from './product-edit.component';
-// import { ProductEditGuard } from './product-edit.guard';
-  
+import { SharedModule } from 'src/app/shared/shared.module';
+import { HttpModule } from '@angular/http';
+import { AppPollService } from 'src/app/app-poll/app-poll.service';
+ 
   @NgModule({
     imports: [
-      BrowserModule,
+      SharedModule,HttpModule,
       HttpClientModule,
       ChartModule,  
       InMemoryWebApiModule.forRoot(AppPollData),
       RouterModule.forChild([
-        { path: 'polls', component: AppPollListComponent },
-        { path: 'polls/:id', component: AppPollComponent },
+        { path: '', component: AppPollListComponent },       
         {
-          path: 'polls/:id/edit',
+          path: ':id/edit',
           //canDeactivate: [ProductEditGuard],
           component: AppPollComponent
         }
       ])
     ],
   declarations: [
     AppPollComponent,
-    AppPollListComponent,
-    // ProductDetailComponent,
-    // ProductEditComponent
-  ]
+    AppPollListComponent,    
+  ],
+  providers:[AppPollService]
 })
 export class AppPollModule { }

angular-playground/pollingApp/src/app/app-routing.module.ts

@@ -1,14 +1,29 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AppPollComponent } from './app-poll/app-poll.component';
-import { KycFormComponent } from './user/kyc-form.component';
 
-const routes: Routes = [
-  {path: 'welcome', component: AppPollComponent},
- //{path: '**', redirectTo: "welcome", pathMatch: "full"},
- {path:'', redirectTo: "welcome", pathMatch: "full"},
- {path: 'kycform', component: KycFormComponent},
+import { AppComponent } from 'src/app/app.component';
+import { ShellComponent } from 'src/app/home/shell.component';
+import { PageNotFoundComponent } from 'src/app/home/page-not-found.component';
+import { WelcomeComponent } from 'src/app/home/welcome.component';
+import { AuthGuard } from 'src/app/user/auth-guard.service';
+import { LoginComponent } from 'src/app/user/login.component';
 
+const routes: Routes = [
+{
+  path: '',
+  component: ShellComponent,
+  children: [
+    { path: 'welcome', component: WelcomeComponent },
+    {
+      path: 'polls',
+       canActivate: [AuthGuard],
+      loadChildren: './app-poll/app-poll.module#AppPollModule'
+    },
+    { path: 'kycform', loadChildren:'./user/user.module#UserModule'},
+    { path: '', redirectTo: 'welcome', pathMatch: 'full' },
+  ]
+},
+{ path: '**', component: PageNotFoundComponent }
 ];
 
 @NgModule({

angular-playground/pollingApp/src/app/app.module.ts

@@ -3,7 +3,8 @@ import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ReactiveFormsModule } from '@angular/forms';
 
-import { ButtonModule, DropdownModule, PanelModule, ProgressBarModule } from 'primeng/primeng';
+
+//import { ButtonModule, DropdownModule, PanelModule, ProgressBarModule } from 'primeng/primeng';
 
 import { from } from 'rxjs/internal/observable/from';
 
@@ -13,24 +14,24 @@ import { AppPollModule } from 'src/app/app-poll/app-poll.module';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
-import { KycFormComponent } from './user/kyc-form.component';
+//import { KycFormComponent } from './user/kyc-form.component';
 import { MenuComponent } from './home/menu.component';
+import { WelcomeComponent } from './home/welcome.component';
+import { ShellComponent } from 'src/app/home/shell.component';
+import { PageNotFoundComponent } from 'src/app/home/page-not-found.component';
 
 @NgModule({
   declarations: [
-    AppComponent,
-    KycFormComponent,
-    MenuComponent,
+    AppComponent,    
+    MenuComponent, WelcomeComponent,ShellComponent, PageNotFoundComponent
   ],
   imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
-   ProgressBarModule,
-   AppRoutingModule,   
-   AppPollModule,
-   UserModule
-  ],
+   
+   AppRoutingModule   
+     ],
   providers: [],
   bootstrap: [AppComponent]
 })

angular-playground/pollingApp/src/app/home/page-not-found.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    template: `
+    <h1>This is not the page you were looking for!</h1>
+    `
+})
+export class PageNotFoundComponent { }

angular-playground/pollingApp/src/app/home/shell.component.html

@@ -0,0 +1,5 @@
+<app-menu></app-menu>
+
+<div class='container main-content'>
+    <router-outlet></router-outlet>
+</div>

angular-playground/pollingApp/src/app/home/shell.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-shell',
+  templateUrl: './shell.component.html',
+  styleUrls: ['./shell.component.less']
+  //,  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ShellComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular-playground/pollingApp/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 { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  exports: [    
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule
+  ]
+})
+export class SharedModule { }

angular-playground/pollingApp/src/app/user/user.module.ts

@@ -4,17 +4,22 @@ import { LoginComponent } from './login.component';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { KycFormComponent } from 'src/app/user/kyc-form.component';
+import { SharedModule } from 'src/app/shared/shared.module';
+
+import { ButtonModule, DropdownModule, PanelModule, ProgressBarModule } from 'primeng/primeng';
 
 const userRoutes: Routes = [
-{path: 'login', component: LoginComponent}
+{path: 'login', component: LoginComponent},
+{path: '', component: KycFormComponent}
+
 ];
 
 @NgModule({
-    declarations:[LoginComponent],
+    declarations:[LoginComponent, KycFormComponent],
     imports:[
-        BrowserModule,
-        BrowserAnimationsModule,
-        FormsModule,
+        ProgressBarModule,
+        SharedModule,  
         RouterModule.forChild(userRoutes)
     ],
     providers:[]