Update to Angular v9

Author: DeborahK

APM-Final/.editorconfig

@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

APM-Final/.gitignore

@@ -11,8 +11,8 @@
 /node_modules
 
 # profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
+chrome-profiler-events*.json
+speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea

APM-Final/README.md

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

APM-Final/angular.json

@@ -18,7 +18,7 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
-            "aot": false,
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets",
@@ -42,7 +42,6 @@
               "sourceMap": false,
               "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -51,6 +50,11 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
                 }
               ]
             }
@@ -116,6 +120,7 @@
           }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "APM"
 }

APM-Final/e2e/protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
     './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',

APM-Final/e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to APM!');
+    expect(page.getTitleText()).toEqual('Welcome to Angular: Getting Started!!');
   });
 
   afterEach(async () => {

APM-Final/e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
   }
 
-  getTitleText() {
+  getTitleText(): Promise<string> {
     return element(by.css('pm-root h1')).getText() as Promise<string>;
   }
 }

APM-Final/package.json

@@ -11,39 +11,39 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~8.1.2",
-    "@angular/common": "~8.1.2",
-    "@angular/compiler": "~8.1.2",
-    "@angular/core": "~8.1.2",
-    "@angular/forms": "~8.1.2",
-    "@angular/platform-browser": "~8.1.2",
-    "@angular/platform-browser-dynamic": "~8.1.2",
-    "@angular/router": "~8.1.2",
-    "bootstrap": "^4.3.1",
+    "@angular/animations": "~9.1.1",
+    "@angular/common": "~9.1.1",
+    "@angular/compiler": "~9.1.1",
+    "@angular/core": "~9.1.1",
+    "@angular/forms": "~9.1.1",
+    "@angular/platform-browser": "~9.1.1",
+    "@angular/platform-browser-dynamic": "~9.1.1",
+    "@angular/router": "~9.1.1",
+    "bootstrap": "^4.4.1",
     "font-awesome": "^4.7.0",
-    "rxjs": "~6.4.0",
-    "tslib": "^1.9.0",
-    "zone.js": "~0.9.1"
+    "rxjs": "~6.5.4",
+    "tslib": "^1.10.0",
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.801.2",
-    "@angular/cli": "~8.1.2",
-    "@angular/compiler-cli": "~8.1.2",
-    "@angular/language-service": "~8.1.2",
-    "@types/node": "~8.9.4",
-    "@types/jasmine": "~3.3.8",
+    "@angular-devkit/build-angular": "~0.901.1",
+    "@angular/cli": "~9.1.1",
+    "@angular/compiler-cli": "~9.1.1",
+    "@angular/language-service": "~9.1.1",
+    "@types/node": "^12.11.1",
+    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
-    "typescript": "~3.4.3"
+    "karma": "~4.4.1",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
+    "karma-jasmine": "~3.0.1",
+    "karma-jasmine-html-reporter": "^1.4.2",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~3.8.3"
   }
 }

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

@@ -12,20 +12,20 @@ describe('AppComponent', () => {
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
   it(`should have as title 'Angular: Getting Started'`, () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app.title).toEqual('Angular: Getting Started');
   });
 
-  it('should render title in a h1 tag', () => {
+  it('should render title', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Angular: Getting Started!');
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to Angular: Getting Started!!');
   });
 });

APM-Final/src/app/products/product-detail.component.spec.ts

@@ -8,9 +8,9 @@ describe('ProductDetailComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProductDetailComponent ]
+      declarations: [ProductDetailComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

APM-Final/src/app/products/product-detail.guard.spec.ts

@@ -1,15 +1,16 @@
-import { TestBed, async, inject } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 
 import { ProductDetailGuard } from './product-detail.guard';
 
 describe('ProductDetailGuard', () => {
+  let guard: ProductDetailGuard;
+
   beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [ProductDetailGuard]
-    });
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(ProductDetailGuard);
   });
 
-  it('should ...', inject([ProductDetailGuard], (guard: ProductDetailGuard) => {
+  it('should be created', () => {
     expect(guard).toBeTruthy();
-  }));
+  });
 });

APM-Final/src/app/products/product-detail.guard.ts

@@ -22,5 +22,4 @@ export class ProductDetailGuard implements CanActivate {
     }
     return true;
   }
-
 }

APM-Final/src/app/products/product-list.component.html

@@ -48,9 +48,9 @@ <h4>Filtered by: {{listFilter}}</h4>
                 {{ product.productName }}
               </a>
             </td>
-            <td>{{ product.productCode | lowercase | convertToSpaces: '-' }}</td>
+            <td>{{ product.productCode | lowercase | convertToSpaces:'-' }}</td>
             <td>{{ product.releaseDate }}</td>
-            <td>{{ product.price | currency:'USD':'symbol':'1.2-2'}}</td>
+            <td>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</td>
             <td>
               <pm-star [rating]='product.starRating'
                        (ratingClicked)='onRatingClicked($event)'>

APM-Final/src/app/products/product-list.component.ts

@@ -26,9 +26,7 @@ export class ProductListComponent implements OnInit {
   filteredProducts: IProduct[] = [];
   products: IProduct[] = [];
 
-  constructor(private productService: ProductService) {
-
-  }
+  constructor(private productService: ProductService) { }
 
   onRatingClicked(message: string): void {
     this.pageTitle = 'Product List: ' + message;

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

@@ -1,13 +1,17 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-
 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 },
@@ -18,11 +22,6 @@ import { SharedModule } from '../shared/shared.module';
       }
     ]),
     SharedModule
-  ],
-  declarations: [
-    ProductListComponent,
-    ProductDetailComponent,
-    ConvertToSpacesPipe
   ]
 })
 export class ProductModule { }

APM-Final/src/app/products/product.service.ts

@@ -46,5 +46,4 @@ export class ProductService {
     console.error(errorMessage);
     return throwError(errorMessage);
   }
-
 }

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

@@ -4,12 +4,12 @@ import { StarComponent } from './star.component';
 import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  imports: [
-    CommonModule
-  ],
   declarations: [
     StarComponent
   ],
+  imports: [
+    CommonModule
+  ],
   exports: [
     StarComponent,
     CommonModule,

APM-Final/src/index.html

@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>APM</title>
   <base href="/">
-
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>

APM-Final/src/polyfills.ts

@@ -35,7 +35,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *

APM-Final/src/test.ts

@@ -7,7 +7,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

APM-Final/tsconfig.app.json

@@ -4,11 +4,11 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "include": [
-    "src/**/*.ts"
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
   ],
-  "exclude": [
-    "src/test.ts",
-    "src/**/*.spec.ts"
+  "include": [
+    "src/**/*.d.ts"
   ]
 }

APM-Final/tsconfig.json

@@ -6,15 +6,11 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "emitDecoratorMetadata": true,   // Needed for Stackblitz
     "experimentalDecorators": true,
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
     "lib": [
       "es2018",
       "dom"