GibraltarSoftware · DaveSussman · Oct 12, 2021 · Oct 6, 2021 · Oct 6, 2021 · Oct 6, 2021
diff --git a/GettingStarted.Angular.md b/GettingStarted.Angular.md
@@ -39,7 +39,7 @@ If you have an existing ASP.NET Core application with an Angular client applicat
 
    <pre>
       constructor(private readonly loupe: LoupeService) {
-         this.loupe.information(this.title,
+         this.loupe.information("WebClient",
             'Application Started', 'The application has started');
       }
    </pre>

diff --git a/GettingStarted.React.md b/GettingStarted.React.md
@@ -51,7 +51,7 @@ If you have an existing ASP.NET Core application with a React client application
    <pre>
       constructor() {
          super();
-         loupe.information(this.displayName,
+         loupe.information("WebClient",
             'Application Started', 'The application has started');
       }
    </pre>

diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ There are several projects:
 * [loupe-typescript](src/loupe-typescript/README.md). The base agent, usable directly in TypeScript and JavaScript applications.
 * [loupe-angular](src/loupe-angular/README.md). A wrapper module that wraps the agent for use in modern Angular, hooking into Angular's <code>ErrorHandler</code> and automatically logging an error, as well as exposing the Loupe Agent as an injectable service for use in components.
 * loupe-typescript-demos. Contains two demos showing use of the typescript agent, one in a plain JavaScript application, one in a React application.
-* [Loupe.Angular.Demo](src/Loupe.Angular.Demo/README.md). An Angular version 8 application that shows the use of the Loupe Agent Angular wrapper and agent usage.
+* [Loupe.Angular.Demo](src/Loupe.Angular.Demo/README.md). An Angular version 8 application that shows the use of the Loupe Agent Angular wrapper and agent usage. This is for the latest release of Angular, currently version 12.
 * [Loupe.Angular.Demo.V10](src/Loupe.Angular.Demo.V10/README.md). An Angular version 10 application that shows the use of the Loupe Agent Angular wrapper and agent usage.
 * [Loupe.React.Demo](src/Loupe.React.Demo/README.md). A React application that shows the use of the Loupe Agent usage in React.
 

diff --git a/src/Loupe.Angular.Demo.V10/ClientApp/package-lock.json b/src/Loupe.Angular.Demo.V10/ClientApp/package-lock.json
diff --git a/src/Loupe.Angular.Demo.V10/ClientApp/package.json b/src/Loupe.Angular.Demo.V10/ClientApp/package.json
@@ -12,45 +12,44 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "10.2.3",
-    "@angular/common": "10.2.3",
-    "@angular/compiler": "10.2.3",
-    "@angular/core": "10.2.3",
-    "@angular/forms": "10.2.3",
-    "@angular/localize": "^10.2.3",
-    "@angular/platform-browser": "10.2.3",
-    "@angular/platform-browser-dynamic": "10.2.3",
-    "@angular/platform-server": "10.2.3",
-    "@angular/router": "10.2.3",
-    "@gibraltarsoftware/loupe-angular": "^1.6.4",
+    "@angular/animations": "^12.2.9",
+    "@angular/common": "^12.2.9",
+    "@angular/compiler": "^12.2.9",
+    "@angular/core": "^12.2.9",
+    "@angular/forms": "^12.2.9",
+    "@angular/localize": "^12.2.9",
+    "@angular/platform-browser": "^12.2.9",
+    "@angular/platform-browser-dynamic": "^12.2.9",
+    "@angular/platform-server": "^12.2.9",
+    "@angular/router": "^12.2.9",
+    "@gibraltarsoftware/loupe-angular": "^12.0.0",
     "@gibraltarsoftware/loupe-typescript": "^1.3.4",
     "aspnet-prerendering": "^3.0.1",
     "bootstrap": "^4.5.3",
     "core-js": "^3.7.0",
     "jquery": "3.4.1",
     "oidc-client": "^1.9.1",
     "popper.js": "^1.16.0",
-    "rxjs": "^6.6.3",
+    "rxjs": "^6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular/cli": "10.2.0",
-    "@angular/compiler-cli": "10.2.3",
+    "@angular-devkit/build-angular": "^12.2.8",
+    "@angular/cli": "^12.2.8",
+    "@angular/compiler-cli": "^12.2.9",
     "@angular/language-service": "10.2.3",
     "@types/jasmine": "~3.4.4",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.19.4",
-    "codelyzer": "^6.0.1",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "typescript": "4.0.5"
+    "typescript": "^4.3.5"
   },
   "optionalDependencies": {
     "node-sass": "^4.12.0",

diff --git a/src/Loupe.Angular.Demo.V10/README.md b/src/Loupe.Angular.Demo.V10/README.md
@@ -1,6 +1,6 @@
 # Loupe.Angular.Demo.V10
 
-This is an ASP.NET Core application with an Angular 10 frontend that hooks into the @gibraltarsoftware/loupe-angular package to enable client side logging to Loupe.
+This is an ASP.NET Core application with an Angular 10 frontend that hooks into the @gibraltarsoftware/loupe-angular (10.0.1) package to enable client side logging to Loupe.
 
 ## Running the application
 
@@ -14,3 +14,5 @@ The demo builds upon the ASP.NET Core Angular template by adding in calls to lou
 
 * A call is made to <code>loupe.recordException</code> upon navigation to the */error-page* route (which does not exist). 
 This raises an uncaught exception which is automatically picked up by the LoupeErrorHandler.
+
+Additionally it adds the HTTP interceptor to ensure that all HTTP requests have the Loupe Agent IDs attached as headers.
diff --git a/src/Loupe.Angular.Demo/ClientApp/src/app/app.module.ts b/src/Loupe.Angular.Demo/ClientApp/src/app/app.module.ts
@@ -10,7 +10,7 @@ import { HomeComponent } from './home/home.component';
 import { CounterComponent } from './counter/counter.component';
 import { FetchDataComponent } from './fetch-data/fetch-data.component';
 import { LoupeErrorHandler } from '@gibraltarsoftware/loupe-angular';
-import { LoupeHeaderHttpConfigInterceptor } from "@gibraltarsoftware/loupe-angular";
+import { LoupeHeaderHttpConfigInterceptor } from '@gibraltarsoftware/loupe-angular';
 
 @NgModule({
   declarations: [

diff --git a/src/Loupe.Angular.Demo/README.md b/src/Loupe.Angular.Demo/README.md
@@ -15,3 +15,4 @@ The demo builds upon the ASP.NET Core Angular template by adding in calls to lou
 * A call is made to <code>loupe.recordException</code> upon navigation to the */error-page* route (which does not exist). 
 This raises an uncaught exception which is automatically picked up by the LoupeErrorHandler.
 
+Additionally it adds the HTTP interceptor to ensure that all HTTP requests have the Loupe Agent IDs attached as headers.
diff --git a/src/loupe-angular/.editorconfig b/src/loupe-angular/.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
diff --git a/src/loupe-angular/.gitignore b/src/loupe-angular/.gitignore
@@ -12,7 +12,6 @@
 
 # profiling files
 chrome-profiler-events*.json
-speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea

diff --git a/src/loupe-angular/README.md b/src/loupe-angular/README.md
@@ -4,15 +4,24 @@
 The module automatically creates a Loupe client logger and provides a sample Angular <code>ErrorHandler</code> that can be enabled by configuring your application providers; this enables any uncaught errors in your Angular application to be logged to Loupe. It additionally exposes the Loupe Agent to your Angular application as an injectable service named <code>LoupeService</code>.
 
 ## Installation
-You can install the module via **npm**:
+You can install the module via **npm**. The version you install should be the same as the major version of your Angular project, as the **loupe-angular** library tracks the major versions of Angular. So if you are using the latest version of Angular, you can just use the following NPM command to install the latest version of the **loupe-angular** library:
 
 <pre>
 npm install @gibraltarsoftware/loupe-angular
 </pre>
 
+If you are using a previous version of Angular, for example, version 9, then you should install the explicit **loupe-angular** version:
+
+<pre>
+npm install @gibraltarsoftware/loupe-angular@9.0.0
+</pre>
+
+> For Angular 10, use <code>@gibraltarsoftware/loupe-angular@10.0.1</code>
+
+We do not publish a version of the **loupe-angular** library for unreleased and beta versions of Angular. If you are using these beta versions and wish to use Loupe for client logging, then you should clone this repository and manually import the source from the projects\loupe-angular\src\lib folder.
+
 All Loupe client logging is designed to send log information to a server which handles logging to a Loupe server; please refer to the [main documentation](../../README.md) for references to the server logging portion, as installation and configuration depends upon your server.
 
-The Loupe Angular client logging works in both Angular 8 and Angular 11.
 
 ## Installation and Execution Steps
 
@@ -46,27 +55,27 @@ import { LoupeService } from '@gibraltarsoftware/loupe-angular';
     this.loupe.setLogServer('https://mysite.com');
 
     // log a message
-    this.loupe.information(this.title, 'App Started', 'The client application has started');
+    this.loupe.information("WebClient", 'App Started', 'The client application has started');
   }
 </pre>
 
-5. Optionally configure the error handler in your application module (**app.module.ts**). You only need to do this step if you want to use the Loupe error handler for uncaught errors.
+5. Configure the error handler in your application module (**app.module.ts**). This will use the Loupe error handler for any uncaught uncaught errors, log them to Loupe, and allow the existing Angular error handlers to also handle the error.
 
 <pre>
   providers: [
     { provide: ErrorHandler, useClass: LoupeErrorHandler }
   ]
 </pre>
 
-6. Optionally configure the interceptor in your application module (**app.module.ts**). You only need to do this step if you want to automatically have the Loupe Session ID added as a header to all HTTP requests; this is useful to help allow the server Loupe componennt to correlate requests.
+6. Configure the interceptor in your application module (**app.module.ts**). This will automatically have the Loupe Session ID added as a header to all HTTP requests, which helps allow the server Loupe component to correlate requests.
 
 <pre>
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: LoupeHeaderHttpConfigInterceptor, multi: true }
   ]
 </pre>
 
-if using both the error handler and the interceptor, then both need to be included in the providers:
+With both the error handler and the interceptor configured, your providers section will be:
 
 <pre>
   providers: [
@@ -75,6 +84,20 @@ if using both the error handler and the interceptor, then both need to be includ
   ]
 </pre>
 
+7. Import the references for the new providers:
+
+<pre>
+import { LoupeErrorHandler } from '@gibraltarsoftware/loupe-angular';
+import { LoupeHeaderHttpConfigInterceptor } from '@gibraltarsoftware/loupe-angular';
+</pre>
+
+You will also need to add references for <code>ErrorHandler</code> and <code>HTTP_INTERCEPTORS</code>; the first should be added alongside the import for <code>NgModule</code>, and the latter as a new import. So your imports should now include:
+
+<pre>
+import { NgModule, ErrorHandler } from '@angular/core';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+</pre>
+
 ### .NET Core and Angular
 
 For a .NET Core Web Application using Angular, you need to install both the server and client components. 
@@ -116,6 +139,8 @@ app.UseEndpoints(endpoints =>
 npm install @gibraltarsoftware/loupe-angular
 </pre>
 
+Note that this tracks the latest full release of Angular. If using the Angular Web Template in Visual Studio 2019 you will need to explicitly install the version 9 of the **angular-loupe** library, since the Visual Studio template uses Angular 9.
+
 5. You can now import and use the service, starting in **app.component.ts**:
 
 <pre>
@@ -130,7 +155,7 @@ export class AppComponent {
   title = 'app';
 
   constructor(private readonly loupe: LoupeService) {
-    this.loupe.information(this.title, 'App Started', 'The application has started');
+    this.loupe.information("WebClient", 'App Started', 'The application has started');
   }
 }
 </pre>
@@ -163,14 +188,16 @@ as the server application that collects the logs. Note that your server applicat
 
 ### Error Handlers
 
-To use the error handler, modify you **app.module.ts** and add the Loupe error handler as a provider for the Angular <code>ErrorHandler</code>.
+To use the error handler and HTTP interceptors, modify your **app.module.ts** and add the Loupe error handler as a provider for the Angular <code>ErrorHandler</code>.
 
 <pre>
   providers: [
     { provide: ErrorHandler, useClass: LoupeErrorHandler }
   ]
 </pre>
 
+Remember to import the references for <code>ErrorHandler</code> and <code>LoupeErrorHandler</code>.
+
 You can of course, create your own error handler to log uncaught errors to Loupe.
 
 ### Correlating requests
@@ -184,6 +211,8 @@ To allow the Loupe server component to correlate requests, you can include the L
   ]
 </pre>
 
+Remember to import the references for <code>HTTP_INTERCEPTORS</code> and <code>LoupeHeaderHttpConfigInterceptor</code>.
+
 ### Service Usage
 In other components you follow the same injection pattern, by using the Loupe service:
 
@@ -202,7 +231,7 @@ export class FirstComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    this.loupe.information('JavaScript', 'Component Initialization', 'The first component is initializing');
+    this.loupe.information('WebClient', 'Component Initialization', 'The first component is initializing');
   }
 }
 </pre>
@@ -226,12 +255,11 @@ export class AppComponent {
     this.router.events
     .pipe(filter(x => x instanceof NavigationStart))
     .subscribe((evnt: RouterEvent) => {
-      this.loupe.information("Angular", "NavigationStart", evnt.url);
+      this.loupe.information("WebClient", "NavigationStart", evnt.url);
     });
   }
 
 }
-
 </pre>
 
 ### Error Handlers

diff --git a/src/loupe-angular/angular.json b/src/loupe-angular/angular.json
@@ -10,11 +10,19 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
-            "tsConfig": "projects/loupe-angular/tsconfig.lib.json",
             "project": "projects/loupe-angular/ng-package.json"
-          }
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/loupe-angular/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/loupe-angular/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
@@ -23,20 +31,9 @@
             "tsConfig": "projects/loupe-angular/tsconfig.spec.json",
             "karmaConfig": "projects/loupe-angular/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/loupe-angular/tsconfig.lib.json",
-              "projects/loupe-angular/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
-    }},
+    }
+  },
   "defaultProject": "loupe-angular"
-}
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -15,3 +15,4 @@ The demo builds upon the ASP.NET Core Angular template by adding in calls to lou
		* A call is made to <code>loupe.recordException</code> upon navigation to the /error-page route (which does not exist).
		This raises an uncaught exception which is automatically picked up by the LoupeErrorHandler.

		Additionally it adds the HTTP interceptor to ensure that all HTTP requests have the Loupe Agent IDs attached as headers.