Upgrade to Angular CLI 1.5.5 and angular-oauth2-oidc 3.0.1

.angular-cli.json

@@ -21,9 +21,7 @@
  "styles": [
  "styles.css"
  ],
- "scripts": [
- "../node_modules/@okta/okta-auth-js/dist/okta-auth-js.min.js"
- ],
+ "scripts": [],
  "environmentSource": "environments/environment.ts",
  "environments": {
  "dev": "environments/environment.ts",

README.md

@@ -2,7 +2,7 @@
 
 Read [this tutorial](http://developer.okta.com/blog/2017/04/17/angular-authentication-with-oidc) to learn how to create this application.
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.5.
 
 ## Create an OpenID Connect App in Okta
 
@@ -37,7 +37,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
 

package.json

@@ -1,6 +1,6 @@
 {
  "name": "okta-angular-openid-connect-example",
- "version": "2.0.0",
+ "version": "3.0.0",
  "license": "MIT",
  "scripts": {
  "ng": "ng",
@@ -12,30 +12,30 @@
  },
  "private": true,
  "dependencies": {
- "@angular/animations": "^4.2.4",
- "@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/platform-browser": "^4.2.4",
- "@angular/platform-browser-dynamic": "^4.2.4",
- "@angular/router": "^4.2.4",
- "@okta/okta-auth-js": "^1.8.0",
- "angular-oauth2-oidc": "^2.0.12",
- "bootstrap": "4.0.0-beta",
+ "@angular/animations": "^5.0.0",
+ "@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/platform-browser": "^5.0.0",
+ "@angular/platform-browser-dynamic": "^5.0.0",
+ "@angular/router": "^5.0.0",
+ "@okta/okta-auth-js": "^1.11.0",
+ "angular-oauth2-oidc": "^3.0.1",
+ "bootstrap": "^4.0.0-beta.2",
  "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"
  }
 }

src/app/app.module.ts

@@ -5,10 +5,10 @@ import { AppComponent } from './app.component';
 import { SearchComponent } from './search/search.component';
 import { Routes, RouterModule } from '@angular/router';
 import { SearchService, AuthGuard, OktaAuthWrapper } from './shared';
-import { HttpModule } from '@angular/http';
 import { EditComponent } from './edit/edit.component';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { HomeComponent } from './home/home.component';
+import { HttpClientModule } from '@angular/common/http';
 
 const appRoutes: Routes = [
  {path: 'search', component: SearchComponent, canActivate: [AuthGuard]},
@@ -29,7 +29,7 @@ const appRoutes: Routes = [
  BrowserModule,
  RouterModule.forRoot(appRoutes),
  FormsModule,
- HttpModule,
+ HttpClientModule,
  OAuthModule.forRoot()
  ],
  providers: [

src/app/search/search.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { Person, SearchService } from '../shared';
 import { ActivatedRoute } from '@angular/router';
-import { Subscription } from 'rxjs';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
  selector: 'app-search',

src/app/shared/auth/okta.auth.wrapper.ts

@@ -1,7 +1,6 @@
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Injectable } from '@angular/core';
-
-declare const OktaAuth: any;
+import * as OktaAuth from '@okta/okta-auth-js';
 
 @Injectable()
 export class OktaAuthWrapper {

src/app/shared/search/search.service.ts

@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core';
-import { Http, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
-import { Observable } from 'rxjs';
 
 @Injectable()
 export class SearchService {
 
- constructor(private http: Http) {}
+ constructor(private http: HttpClient) {}
 
  getAll() {
- return this.http.get('assets/data/people.json').map((res: Response) => res.json());
+ return this.http.get('assets/data/people.json');
  }
 
  search(q: string): Observable<any> {
@@ -18,7 +18,7 @@ export class SearchService {
  } else {
  q = q.toLowerCase();
  }
- return this.getAll().map(data => {
+ return this.getAll().map((data: any) => {
  const results: any = [];
  data.map(item => {
  // check for item in localStorage
@@ -34,7 +34,7 @@ export class SearchService {
  }
 
  get(id: number) {
- return this.getAll().map(all => {
+ return this.getAll().map((all: any) => {
  if (localStorage['person' + id]) {
  return JSON.parse(localStorage['person' + id]);
  }

src/main.ts

@@ -8,4 +8,5 @@ if (environment.production) {
  enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.log(err));

src/polyfills.ts

@@ -37,21 +37,25 @@
 /** 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`.
 
 
 
 /***************************************************************************************************
- * Zone JS is required by Angular itself.
+ * Zone JS is required by default for Angular itself.
  */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 

tslint.json

@@ -11,11 +11,15 @@
  "check-space"
  ],
  "curly": true,
+ "deprecation": {
+ "severity": "warn"
+ },
  "eofline": true,
  "forin": true,
  "import-blacklist": [
  true,
- "rxjs"
+ "rxjs",
+ "rxjs/Rx"
  ],
  "import-spacing": true,
  "indent": [
@@ -126,6 +130,8 @@
  "app",
  "kebab-case"
  ],
+ "angular-whitespace": [true, "check-interpolation"],
+ "no-output-on-prefix": true,
  "use-input-property-decorator": true,
  "use-output-property-decorator": true,
  "use-host-property-decorator": true,
@@ -134,9 +140,6 @@
  "use-life-cycle-interface": true,
  "use-pipe-transform-interface": true,
  "component-class-suffix": true,
- "directive-class-suffix": true,
- "no-access-missing-member": true,
- "templates-use-public": true,
- "invoke-injectable": true
+ "directive-class-suffix": true
  }
 }