From 2636f61966605698410314e1514717075f54e29a Mon Sep 17 00:00:00 2001
From: Dimitris Finas <dfinas@gmail.com>
Date: Thu, 24 Nov 2022 16:00:40 +0100
Subject: [PATCH] add instructions

---
 README.md             | 9 +++++++--
 src/app/app.module.ts | 4 ----
 src/main.ts           | 5 ++++-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 21fb8a8..f32801e 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@ This application is issued from [Angular tutorial](https://angular.io/start)
 
 ## Adding OpenTelemetry instrumentation
 
+Instrumentation code below is coming from https://github.com/open-telemetry/opentelemetry-demo/blob/main/docs/services/frontend.md#browser-instrumentation
+
 - Install the OpenTelemetry libraries
 ```shell
 npm install @opentelemetry/api @opentelemetry/core @opentelemetry/sdk-trace-web @opentelemetry/sdk-trace-base @opentelemetry/instrumentation @opentelemetry/auto-instrumentations-web @opentelemetry/resources @opentelemetry/semantic-conventions @opentelemetry/exporter-trace-otlp-http @opentelemetry/context-zone
@@ -75,13 +77,16 @@ const FrontendTracer = async () => {
 export default FrontendTracer;
 ```
 
-- add use of tracer in your application  `src/app/app.module.ts`. For this, put these 2 lines just after the list of imports:
+- add use of tracer in your application, for this, put these 2 lines just after the list of imports in `src/main.ts`:
 
 ```java
-import FrontendTracer from '../utils/telemetry/FrontendTracer';
+import FrontendTracer from './utils/telemetry/FrontendTracer';
 if (typeof window !== 'undefined') FrontendTracer();
 ```
 
+> **_NOTE:_** You can also put them in `src/app/app.module.ts` using path `../utils/telemetry/FrontendTracer` instead
+
+
 - in order to manage you trace exporter properties (endpoint, access token), we will generate an environment file before each build using this script `./src/environments/createEnvFile.sh`
 
 ```shell
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bcb245b..b9091eb 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -12,10 +12,6 @@ import { ProductDetailsComponent } from './product-details/product-details.compo
 import { CartComponent } from './cart/cart.component';
 import { ShippingComponent } from './shipping/shipping.component';
 
-// OpenTelemetry tracing wrapper
-import FrontendTracer from '../utils/telemetry/FrontendTracer';
-if (typeof window !== 'undefined') FrontendTracer();
-
 @NgModule({
   imports: [
     BrowserModule,
diff --git a/src/main.ts b/src/main.ts
index 8c99656..3f38298 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,10 @@
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
 import { AppModule } from './app/app.module';
 
+// OpenTelemetry tracing wrapper
+import FrontendTracer from './utils/telemetry/FrontendTracer';
+if (typeof window !== 'undefined') FrontendTracer();
+
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err) => console.error(err));