As of Module 12

Author: DeborahK

APM-CLI-Final/README.md

@@ -1,6 +1,6 @@
 # APM
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.1.2.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.2.0.
 
 ## Development server
 

APM-CLI-Final/package.json

@@ -27,20 +27,21 @@
     "zone.js": "^0.8.4"
   },
   "devDependencies": {
-    "@angular/cli": "1.1.2",
+    "@angular/cli": "1.2.0",
     "@angular/compiler-cli": "^4.0.0",
     "@angular/language-service": "^4.0.0",
-    "@types/jasmine": "2.5.45",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "codelyzer": "~3.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
     "protractor": "~5.1.2",
     "ts-node": "~3.0.4",
     "tslint": "~5.3.2",

APM-CLI-Final/src/app/app.component.ts

@@ -1,7 +1,5 @@
 import { Component } from '@angular/core';
 
-import { ProductService } from './products/product.service';
-
 @Component({
   selector: 'pm-root',
   template: `
@@ -19,8 +17,7 @@ import { ProductService } from './products/product.service';
             <router-outlet></router-outlet>
         </div>
      </div>
-    `,
-    providers: [ ProductService ]
+    `
 })
 export class AppComponent {
   pageTitle: string = 'Acme Product Management';

APM-CLI-Final/src/app/app.module.ts

@@ -1,41 +1,27 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/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 { ProductGuardService } from './products/product-guard.service';
+import { ProductModule } from './products/product.module';
 
 @NgModule({
   declarations: [
     AppComponent,
-    ProductListComponent,
-    ConvertToSpacesPipe,
-    StarComponent,
-    ProductDetailComponent,
     WelcomeComponent
   ],
   imports: [
     BrowserModule,
-    FormsModule,
     HttpModule,
     RouterModule.forRoot([
-        { path: 'products', component: ProductListComponent },
-        { path: 'products/:id',
-          canActivate: [ ProductGuardService ],
-          component: ProductDetailComponent },
         { path: 'welcome', component: WelcomeComponent },
         { path: '', redirectTo: 'welcome', pathMatch: 'full'},
         { path: '**', redirectTo: 'welcome', pathMatch: 'full'}
-    ])
+    ]),
+    ProductModule
   ],
-  providers: [ProductGuardService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

APM-CLI-Final/src/app/products/product.module.ts

@@ -0,0 +1,30 @@
+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 { ProductGuardService } from './product-guard.service';
+import { ProductService } from './product.service';
+import { SharedModule } from './../shared/shared.module';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+        { path: 'products', component: ProductListComponent },
+        { path: 'products/:id',
+          canActivate: [ ProductGuardService ],
+          component: ProductDetailComponent }
+    ]),
+    SharedModule
+  ],
+  declarations: [
+    ProductListComponent,
+    ProductDetailComponent,
+    ConvertToSpacesPipe
+  ],
+  providers: [
+    ProductService,
+    ProductGuardService
+  ]
+})
+export class ProductModule { }

APM-CLI-Final/src/app/shared/shared.module.ts

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

APM-CLI-Final/tslint.json

@@ -110,7 +110,7 @@
     "directive-selector": [
       true,
       "attribute",
-      "app",
+      "pm",
       "camelCase"
     ],
     "component-selector": [