Upgrade to Angular CLI 1.3.2, Angular 4.3.6, and angular-oauth2-oidc v2.0.12

.angular-cli.json

@@ -38,13 +38,16 @@
   },
   "lint": [
     {
-      "project": "src/tsconfig.app.json"
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "src/tsconfig.spec.json"
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
     },
     {
-      "project": "e2e/tsconfig.e2e.json"
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
     }
   ],
   "test": {

.gitignore

@@ -33,6 +33,7 @@
 npm-debug.log
 testem.log
 /typings
+yarn-error.log
 
 # e2e
 /e2e/*.js

.travis.yml

@@ -4,7 +4,7 @@ services:
   - docker
 language: node_js
 node_js:
-  - "6.10.0"
+  - "8.4.0"
 addons:
   apt:
     sources:
@@ -37,10 +37,3 @@ notifications:
     on_success: change
     on_failure: always
     on_start: false
-deploy:
-  provider: heroku
-  api_key:
-    secure: BhJ5UedUwQGaw4IVbSy7EHKT6B1YnHSRsJ/A/1ZWaMDC4I3p3vAQ+Db1QNhJg/Mm47JquDI1ecojTWts4ta7q2+nyuC61pENQJdYah3mCtzxJoWQ6wOfUSW+qvPuf+8ra1UnL3a8haqvC13cP6lbFi9FcGOaHtFmEo0NPXwJnzl3fPL2VPzBbhiFHsJPPFrGV/o7/F59RnTgwu3dqbIm3S5UtUNXDe0IFvoAaUxw6lUSbROmmtDG6rUXTWg7auL0uWE6mDDxvVtmuxQ8eJfMJs3KFZkOGA4DN3X3Dox8c1nBQQg4Bk76sXuFhkk/UHPRoPWqFwgrbLQ7gRLTRk05bHgPd/Cvm0k4GJxA5/R6EBRd90N4jGXhiQ3b2WtLpi7UG4hdHrw6HEbpndO/uCk/G0QDgsuAvB9gF675tMb3DjSLUv20Seq5a2P83BeDUzwGY+acIK91fncM0333gO+AqCLCGcxaDLD1CjE/JF1fSvqdcwcWpsWrAU48+OzH3jJhgzaraTS2RB5SPTQD9oZo+8oEmmi+01/cYtMdODlCEjl0OnUkBKndf0wLx+1uSvAbjxEcWVmPUUOBVr6ODsgBFjEYPkQCXMEN7ToBlDCmvEc/uLb/kByaSWOBlTsfCNj1QEYopzl5lUhzEZ/hpqMfVVFmDQ0ogRyui9Eomg3f/40=
-  app: evening-meadow-46789
-  on:
-    repo: mraible/ng-demo

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.0.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
 
 ## Create an OpenID Connect App in Okta
 
@@ -18,6 +18,27 @@ Click on the **People** tab and the **Assign to People** button. Assign yourself
 
 Copy the Client ID from the application you created and replace the one in `app.component.ts` and `home.component.ts`. Then start the server with `ng serve`.
 
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## 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
 
 If you encounter issues, please post a question to Stack Overflow with an [okta tag](http://stackoverflow.com/questions/tagged/okta), or hit me up on Twitter [@mraible](https://twitter.com/mraible).

e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { NgDemoPage } from './app.po';
+import { AppPage } from './app.po';
 
 describe('ng-demo App', () => {
-  let page: NgDemoPage;
+  let page: AppPage;
 
   beforeEach(() => {
-    page = new NgDemoPage();
+    page = new AppPage();
   });
 
-  it('should display message saying app works', () => {
+  it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('app works!');
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
   });
 });

e2e/app.po.ts

@@ -1,6 +1,6 @@
-import { browser, element, by } from 'protractor';
+import { browser, by, element } from 'protractor';
 
-export class NgDemoPage {
+export class AppPage {
   navigateTo() {
     return browser.get('/');
   }

e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "types":[
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

karma.conf.js

@@ -1,5 +1,5 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
   config.set({
@@ -15,25 +15,14 @@ module.exports = function (config) {
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    files: [
-      { pattern: './src/test.ts', watched: false }
-    ],
-    preprocessors: {
-      './src/test.ts': ['@angular/cli']
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
     coverageIstanbulReporter: {
       reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
+    reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "okta-angular-openid-connect-example",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
@@ -12,38 +12,41 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/forms": "^4.0.0",
-    "@angular/http": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/router": "^4.0.0",
+    "@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": "^1.0.18",
-    "bootstrap": "^3.3.7",
+    "angular-oauth2-oidc": "^2.0.12",
+    "bootstrap": "4.0.0-beta",
     "core-js": "^2.4.1",
-    "rxjs": "^5.1.0",
-    "zone.js": "^0.8.4"
+    "rxjs": "^5.4.2",
+    "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@types/jasmine": "2.5.38",
+    "@angular/cli": "1.3.2",
+    "@angular/compiler-cli": "^4.2.4",
+    "@angular/language-service": "^4.2.4",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
-    "codelyzer": "~2.0.0",
-    "jasmine-core": "~2.5.2",
-    "jasmine-spec-reporter": "~3.2.0",
-    "karma": "~1.4.1",
-    "karma-chrome-launcher": "~2.0.0",
+    "codelyzer": "~3.1.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": "^0.2.0",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.0",
-    "ts-node": "~2.0.0",
-    "tslint": "~4.5.0",
-    "typescript": "~2.2.0"
+    "protractor": "~5.1.2",
+    "ts-node": "~3.2.0",
+    "tslint": "~5.3.2",
+    "typescript": "~2.3.3"
   }
 }

protractor.conf.js

@@ -19,12 +19,10 @@ exports.config = {
     defaultTimeoutInterval: 30000,
     print: function() {}
   },
-  beforeLaunch: function() {
+  onPrepare() {
     require('ts-node').register({
       project: 'e2e/tsconfig.e2e.json'
     });
-  },
-  onPrepare() {
     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
   }
 };

src/app/app.component.html

@@ -1,9 +1,6 @@
-<h1>
-  {{title}}
-</h1>
-
-<div class="container">
-  <div class="row">
-    <router-outlet></router-outlet>
-  </div>
+<nav class="navbar navbar-light bg-secondary">
+  <a class="navbar-brand text-light" href="#">Welcome to {{title}}!</a>
+</nav>
+<div class="container-fluid">
+  <router-outlet></router-outlet>
 </div>

src/app/app.component.spec.ts

@@ -1,13 +1,26 @@
 import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { AppComponent } from './app.component';
-import { RouterTestingModule } from '@angular/router/testing';
+import { OAuthService, UrlHelperService } from 'angular-oauth2-oidc';
+import { BaseRequestOptions, ConnectionBackend, Http } from '@angular/http';
+import { MockBackend } from '@angular/http/testing';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [AppComponent],
-      imports: [RouterTestingModule]
+      declarations: [
+        AppComponent
+      ],
+      imports: [RouterTestingModule],
+      providers: [OAuthService, UrlHelperService, {
+        provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
+          return new Http(backend, defaultOptions);
+        }, deps: [MockBackend, BaseRequestOptions]
+      },
+        {provide: MockBackend, useClass: MockBackend},
+        {provide: BaseRequestOptions, useClass: BaseRequestOptions}
+      ]
     }).compileComponents();
   }));
 
@@ -17,16 +30,16 @@ describe('AppComponent', () => {
     expect(app).toBeTruthy();
   }));
 
-  it(`should have as title 'app works!'`, async(() => {
+  it(`should have as title 'app'`, async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app works!');
+    expect(app.title).toEqual('app');
   }));
 
-  it('should render title in a h1 tag', async(() => {
+  it('should render title in a .navbar-brand class', async(() => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+    expect(compiled.querySelector('.navbar-brand').textContent).toContain('Welcome to app!');
   }));
 });

src/app/app.component.ts

@@ -1,30 +1,24 @@
 import { Component } from '@angular/core';
-import { SearchService } from './shared/index';
-import { OAuthService } from 'angular-oauth2-oidc';
+import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
-  viewProviders: [SearchService]
+  styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'app';
 
   constructor(private oauthService: OAuthService) {
-    // URL of the SPA to redirect the user to after login
     this.oauthService.redirectUri = window.location.origin;
-    // The SPA's id. The SPA is registerd with this id at the auth-server
-    this.oauthService.clientId = 'RqjWvpvWO77qMGgDfukY';
+    this.oauthService.clientId = 'MjlYvTtFW26gOoOAHKOz';
     this.oauthService.scope = 'openid profile email';
-    // set to true, to receive an id_token via OpenID Connect (OIDC) in addition to the
-    // OAuth2-based access_token
-    this.oauthService.oidc = true;
     this.oauthService.issuer = 'https://dev-158606.oktapreview.com';
+    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
 
     // Load Discovery Document and then try to login the user
     this.oauthService.loadDiscoveryDocument().then(() => {
-      this.oauthService.tryLogin({});
+      this.oauthService.tryLogin();
     });
   }
 }