Module 13: Angular Modules.

Author: TXCodeDancer

APM/src/app/app.module.ts

@@ -1,42 +1,28 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule} from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
 import { AppComponent } from './app.component';
-import { ProductListComponent } from './products/product-list.component';
-import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';
-import { StarComponent } from './shared/star.component';
-import { ProductDetailComponent } from './products/product-detail.component';
 import { WelcomeComponent } from './home/welcome.component';
-import { ProductDetailGuard } from './products/product-detail.guard';
+import { ProductModule } from './products/product.module';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ProductListComponent,
-    ConvertToSpacesPipe,
-    StarComponent,
-    ProductDetailComponent,
     WelcomeComponent,
   ],
   imports: [
     BrowserModule,
-    FormsModule,
     HttpClientModule,
     RouterModule.forRoot([
-      { path: 'products', component: ProductListComponent },
-      { 
-        path: 'products/:id',
-        canActivate: [ProductDetailGuard],
-        component: ProductDetailComponent 
-      },
       { path: 'welcome', component: WelcomeComponent },
       { path: '', redirectTo: 'welcome', pathMatch: 'full' },
       { path: '**', redirectTo: 'welcome', pathMatch: 'full'},
     ]),
+    ProductModule,
   ],
   bootstrap: [AppComponent]
 })
+
 export class AppModule { }

APM/src/app/products/product.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { ProductListComponent } from './product-list.component';
+import { ProductDetailComponent } from './product-detail.component';
+import { ConvertToSpacesPipe } from '../shared/convert-to-spaces.pipe';
+import { RouterModule } from '@angular/router';
+import { ProductDetailGuard } from './product-detail.guard';
+import { SharedModule } from '../shared/shared.module';
+
+@NgModule({
+  declarations: [
+    ProductListComponent,
+    ProductDetailComponent,
+    ConvertToSpacesPipe,
+  ],
+  imports: [
+    RouterModule.forChild([
+      { path: 'products', component: ProductListComponent },
+      { 
+        path: 'products/:id',
+        canActivate: [ProductDetailGuard],
+        component: ProductDetailComponent 
+      },
+    ]),
+    SharedModule,
+  ]
+})
+
+export class ProductModule { }

APM/src/app/shared/shared.module.ts

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