Update for Angular 5 and Okta Sign-In Widget 2.5.0

client/README.md

@@ -1,6 +1,6 @@
 # Notes
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.5.
 
 ## Development server
 
@@ -21,7 +21,6 @@ Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.
 ## Running end-to-end tests
 
 Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-Before running the tests make sure you are serving the app via `ng serve`.
 
 ## Further help
 

client/package.json

@@ -12,30 +12,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.2.4",
-    "@angular/cdk": "^2.0.0-beta.8",
-    "@angular/common": "^4.2.4",
-    "@angular/compiler": "^4.2.4",
-    "@angular/core": "^4.2.4",
-    "@angular/forms": "^4.2.4",
-    "@angular/http": "^4.2.4",
-    "@angular/material": "^2.0.0-beta.8",
-    "@angular/platform-browser": "^4.2.4",
-    "@angular/platform-browser-dynamic": "^4.2.4",
-    "@angular/router": "^4.2.4",
-    "@okta/okta-signin-widget": "^2.1.0",
+    "@angular/animations": "^5.0.0",
+    "@angular/cdk": "^5.0.0-rc.2",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/material": "^5.0.0-rc.2",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
+    "@okta/okta-signin-widget": "^2.5.0",
     "core-js": "^2.4.1",
-    "rxjs": "^5.4.2",
+    "rxjs": "^5.5.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.3.2",
-    "@angular/compiler-cli": "^4.2.4",
-    "@angular/language-service": "^4.2.4",
+    "@angular/cli": "1.5.5",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "~3.1.1",
+    "codelyzer": "^4.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
     "karma": "~1.7.0",
@@ -46,7 +46,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.1.2",
     "ts-node": "~3.2.0",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3"
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2"
   }
 }

client/src/app/app.component.css

@@ -1,4 +1,4 @@
-md-toolbar a {
+mat-toolbar a {
   color: rgba(255, 255, 255, .87);
   text-decoration: none;
 }

client/src/app/app.component.html

@@ -1,10 +1,10 @@
-<md-toolbar color="primary">
+<mat-toolbar color="primary">
   <span><a routerLink="/">{{title}}</a></span>
   <span class="fill-remaining-space"></span>
   <span *ngIf="user">
     Welcome {{user?.name}}!
-    <button md-button (click)="oktaService.logout()">Logout</button>
+    <button mat-button (click)="oktaService.logout()">Logout</button>
   </span>
-</md-toolbar>
+</mat-toolbar>
 
 <router-outlet [hidden]="!user"></router-outlet>

client/src/app/app.module.ts

@@ -7,12 +7,12 @@ import { NoteService } from './shared/note/note.service';
 import { RouterModule, Routes } from '@angular/router';
 import { OktaAuthGuard, OktaAuthInterceptor, OktaAuthService } from './shared/okta';
 import {
-  MdButtonModule,
-  MdCardModule,
-  MdIconModule,
-  MdInputModule,
-  MdListModule,
-  MdToolbarModule
+  MatButtonModule,
+  MatCardModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatToolbarModule
 } from '@angular/material';
 import { NoteDetailComponent } from './note-detail/note-detail.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -39,12 +39,12 @@ const appRoutes: Routes = [
     HttpClientModule,
     RouterModule.forRoot(appRoutes),
     BrowserAnimationsModule,
-    MdToolbarModule,
-    MdListModule,
-    MdCardModule,
-    MdButtonModule,
-    MdIconModule,
-    MdInputModule,
+    MatToolbarModule,
+    MatListModule,
+    MatCardModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
     FormsModule
   ],
   providers: [NoteService, OktaAuthService, OktaAuthGuard, {

client/src/app/note-detail/note-detail.component.html

@@ -1,25 +1,25 @@
 <form #editForm="ngForm" (ngSubmit)="onSubmit(editForm.value)">
   <input type="hidden" name="href" [(ngModel)]="note.href">
-  <md-card>
-    <md-card-title>
+  <mat-card>
+    <mat-card-title>
       {{note?.href ? 'Edit Note' : 'Add Note'}}
-    </md-card-title>
-    <md-card-content>
-      <md-input-container>
-          <textarea mdInput placeholder="Note" cols="50" rows="5" name="text"
+    </mat-card-title>
+    <mat-card-content>
+      <mat-input-container>
+          <textarea matInput placeholder="Note" cols="50" rows="5" name="text"
                     required #text="ngModel" [(ngModel)]="note.text"></textarea>
-      </md-input-container>
+      </mat-input-container>
       <div [hidden]="text.valid || text.pristine">
         Name is required
       </div>
-    </md-card-content>
-    <md-card-actions>
-      <button md-raised-button color="primary"
+    </mat-card-content>
+    <mat-card-actions>
+      <button mat-raised-button color="primary"
               [disabled]="!editForm.form.valid">Save
       </button>
-      <button md-button color="warn" *ngIf="note?.href"
+      <button mat-button color="warn" *ngIf="note?.href"
               (click)="remove(note.href)">Delete</button>
-      <a md-button routerLink="/notes">Cancel</a>
-    </md-card-actions>
-  </md-card>
+      <a mat-button routerLink="/notes">Cancel</a>
+    </mat-card-actions>
+  </mat-card>
 </form>

client/src/app/note-detail/note-detail.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NoteService } from '../shared/note/note.service';
 import { NgForm } from '@angular/forms';
-import { MdInputDirective } from '@angular/material';
+import { MatInput } from '@angular/material';
 
 @Component({
   selector: 'app-note-detail',
@@ -11,7 +11,7 @@ import { MdInputDirective } from '@angular/material';
 })
 export class NoteDetailComponent implements OnInit, AfterViewInit {
   note: any = {text: ''};
-  @ViewChild(MdInputDirective) text: MdInputDirective;
+  @ViewChild(MatInput) text: MatInput;
 
   constructor(private route: ActivatedRoute,
               private router: Router,

client/src/app/note-list/note-list.component.html

@@ -1,17 +1,17 @@
-<md-card>
-  <md-card-title>Notes List</md-card-title>
-  <md-card-content>
-    <md-list>
-      <md-list-item *ngFor="let note of notes" class="link"
+<mat-card>
+  <mat-card-title>Notes List</mat-card-title>
+  <mat-card-content>
+    <mat-list>
+      <mat-list-item *ngFor="let note of notes" class="link"
                     [routerLink]="['/notes', note.id]">
         {{note.text}}
-      </md-list-item>
-      <md-list-item *ngIf="!notes || notes?.length === 0">
+      </mat-list-item>
+      <mat-list-item *ngIf="!notes || notes?.length === 0">
         <p>No notes found.</p>
-      </md-list-item>
-    </md-list>
-    <button md-fab color="accent" class="btn-add" routerLink="add">
-      <md-icon>add circle</md-icon>
+      </mat-list-item>
+    </mat-list>
+    <button mat-fab color="accent" class="btn-add" routerLink="add">
+      <mat-icon>add circle</mat-icon>
     </button>
-  </md-card-content>
-</md-card>
+  </mat-card-content>
+</mat-card>

client/src/app/shared/note/note.service.ts

@@ -22,7 +22,7 @@ export class NoteService {
   }
 
   save(note: any): Observable<any> {
-    let result: Observable<Response>;
+    let result: Observable<Object>;
     if (note['href']) {
       result = this.http.put(note.href, note);
     } else {

client/src/app/shared/okta/okta.interceptor.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import { OktaAuthService } from './okta.service';
-import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/do';
 
 @Injectable()
 export class OktaAuthInterceptor implements HttpInterceptor {
@@ -26,15 +26,12 @@ export class OktaAuthInterceptor implements HttpInterceptor {
       });
     }
 
-    return next.handle(request).map((event: HttpEvent<any>) => {
+    return next.handle(request).do((event: HttpEvent<any>) => {
       if (event instanceof HttpResponse) {
         return event;
-      }
-    }).catch(error => {
-      if (error instanceof HttpErrorResponse) {
-        if (error.status === 401) {
+      } else if (event instanceof HttpErrorResponse) {
+        if (event.status === 401) {
           this.oktaService.login();
-          return Observable.create(error);
         }
       }
     });

client/src/app/shared/okta/okta.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js'
+import * as OktaSignIn from '@okta/okta-signin-widget';
 import { ReplaySubject } from 'rxjs/ReplaySubject';
 import { Observable } from 'rxjs/Observable';
 import { Router } from '@angular/router';

client/src/polyfills.ts

@@ -37,13 +37,17 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';
 
 
 /**
- * Required to support Web Animations `@angular/animation`.
+ * Required to support Web Animations `@angular/platform-browser/animations`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.

client/src/styles.css

@@ -1,5 +1,5 @@
-@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
-@import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';
+@import '~@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';
+@import '~@okta/okta-signin-widget/dist/css/okta-theme.css';
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 @import '~https://fonts.googleapis.com/icon?family=Material+Icons';