feat: added docs for Angular (#5132)

* feat: added docs for Angular

* chore: updated app ts file

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md

@@ -0,0 +1,92 @@
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces',
+      headers: {
+        'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}',
+      },
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```
+ 
+
+### Step 4: Dockerize your application
+Update your Dockerfile as:
+
+```dockerfile
+...
+# Run the app with the required OpenTelemetry configuration. app.js is your application main file.
+CMD ["ng", "serve"]
+...
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md

@@ -0,0 +1,23 @@
+Once you update your Dockerfile, you can build and run it using the commands below.
+
+ 
+
+### Step 1: Build your dockerfile
+
+Build your docker image
+
+```bash
+docker build -t <your-image-name> .
+```
+
+- `<your-image-name>` is the name of your Docker Image
+
+&nbsp;
+
+### Step 2: Run your docker image
+
+```bash
+docker run <your-image-name>
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md

@@ -0,0 +1,28 @@
+## Setup OpenTelemetry Binary as an agent
+
+ 
+
+As a first step, you should install the OTel collector Binary according to the instructions provided on [this link](https://signoz.io/docs/tutorial/opentelemetry-binary-usage-in-virtual-machine/).
+
+ 
+
+While creating the `config.yaml` during the installation fo the OTel Collector Binary, you need to enable CORS under the receivers section so that you don't get CORS error while sending your Traces to SigNoz Cloud. See the code snippet below to understand how you can enable CORS in your config file:
+
+```yaml
+
+      http:
++        cors:
++          allowed_origins:
++            - <Frontend-application-URL>  # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc.
+
+```
+
+`<Frontend-application-URL>` - URL where your frontend application is running. For Example, `http://localhost:4200` or `https://netflix.com` etc.
+
+**NOTE:** Make sure to restart your collector after making the config changes
+
+
+Once you are done setting up the OTel collector binary and enabling CORS, you can follow the next steps.
+
+&nbsp;
+

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md

@@ -0,0 +1,93 @@
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```
+
+ 
+
+### Step 4: Dockerize your application
+
+Update your Dockerfile as:
+
+```dockerfile
+...
+# Run the app with the required OpenTelemetry configuration. app.js is your application main file.
+CMD ["ng", "serve"]
+...
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md

@@ -0,0 +1,23 @@
+Once you update your Dockerfile, you can build and run it using the commands below.
+
+ 
+
+### Step 1: Build your dockerfile
+
+Build your docker image
+
+```bash
+docker build -t <your-image-name> .
+```
+
+- `<your-image-name>` is the name of your Docker Image
+
+&nbsp;
+
+### Step 2: Run your docker image
+
+```bash
+docker run <your-image-name>
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md

@@ -0,0 +1,24 @@
+## Install otel-collector in your Kubernetes infra
+ 
+
+Add the SigNoz Helm Chart repository
+```bash
+helm repo add signoz https://charts.signoz.io
+```
+ 
+
+If the chart is already present, update the chart to the latest using:
+```bash
+helm repo update
+```
+ 
+
+Install the Kubernetes Infrastructure chart provided by SigNoz
+```bash
+helm install my-release signoz/k8s-infra  \
+--set otelCollectorEndpoint=ingest.{{REGION}}.signoz.cloud:443 \
+--set otelInsecure=false \
+--set signozApiKey={{SIGNOZ_INGESTION_KEY}} \
+--set global.clusterName=<CLUSTER_NAME>
+```
+- Replace `<CLUSTER_NAME>` with the name of the Kubernetes cluster or a unique identifier of the cluster.

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md

@@ -0,0 +1,83 @@
+ 
+
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application
+
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md

@@ -0,0 +1,11 @@
+ 
+
+Once you are done intrumenting your Angular application, you can run it using the below command
+
+```bash
+ng serve
+```
+
+ 
+
+

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md

@@ -0,0 +1,80 @@
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces',
+      headers: {
+        'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}',
+      },
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md

@@ -0,0 +1,9 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below command
+
+```bash
+ng serve
+```
+
+ 

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md

@@ -0,0 +1,103 @@
+## Setup OpenTelemetry Binary as an agent
+ 
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_linux_amd64.tar.gz
+```
+ 
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_linux_amd64.tar.gz -C otelcol-contrib
+```
+ 
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - <Frontend-application-URL>  # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc.
+  hostmetrics:
+    collection_interval: 60s
+    scrapers:
+      cpu: {}
+      disk: {}
+      load: {}
+      filesystem: {}
+      memory: {}
+      network: {}
+      paging: {}
+      process:
+        mute_process_name_error: true
+        mute_process_exe_error: true
+        mute_process_io_error: true
+      processes: {}
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector-binary
+          static_configs:
+            - targets:
+              # - localhost:8888
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+  resourcedetection:
+    detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    timeout: 2s
+    system:
+      hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  otlp:
+    endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+    tls:
+      insecure: false
+    headers:
+      "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+  logging:
+    verbosity: normal
+service:
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages]
+  pipelines:
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    metrics/internal:
+      receivers: [prometheus, hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [otlp]
+    traces:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+```
+
+&nbsp;
+
+`<Frontend-application-URL>` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc.
+
+

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md

@@ -0,0 +1,79 @@
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application.
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md

@@ -0,0 +1,31 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below commands
+ 
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+ 
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+&nbsp;
+
+### Step 2: Run your application
+
+```bash
+ng serve
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md

@@ -0,0 +1,80 @@
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces',
+      headers: {
+        'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}',
+      },
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md

@@ -0,0 +1,9 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below command
+
+```bash
+ng serve
+```
+
+ 

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md

@@ -0,0 +1,101 @@
+## Setup OpenTelemetry Binary as an agent
+ 
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_linux_arm64.tar.gz
+```
+ 
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_linux_arm64.tar.gz -C otelcol-contrib
+```
+ 
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - <Frontend-application-URL>  # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc.
+  hostmetrics:
+    collection_interval: 60s
+    scrapers:
+      cpu: {}
+      disk: {}
+      load: {}
+      filesystem: {}
+      memory: {}
+      network: {}
+      paging: {}
+      process:
+        mute_process_name_error: true
+        mute_process_exe_error: true
+        mute_process_io_error: true
+      processes: {}
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector-binary
+          static_configs:
+            - targets:
+              # - localhost:8888
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+  resourcedetection:
+    detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    timeout: 2s
+    system:
+      hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  otlp:
+    endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+    tls:
+      insecure: false
+    headers:
+      "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+  logging:
+    verbosity: normal
+service:
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages]
+  pipelines:
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    metrics/internal:
+      receivers: [prometheus, hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [otlp]
+    traces:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+```
+
+&nbsp;
+
+`<Frontend-application-URL>` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc.

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md

@@ -0,0 +1,79 @@
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application.
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md

@@ -0,0 +1,31 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below commands
+ 
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+ 
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+&nbsp;
+
+### Step 2: Run your application
+
+```bash
+ng serve
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md

@@ -0,0 +1,80 @@
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces',
+      headers: {
+        'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}',
+      },
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md

@@ -0,0 +1,9 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below command
+
+```bash
+ng serve
+```
+
+ 

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md

@@ -0,0 +1,101 @@
+### Setup OpenTelemetry Binary as an agent
+ 
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_darwin_amd64.tar.gz
+```
+ 
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_darwin_amd64.tar.gz -C otelcol-contrib
+```
+ 
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - <Frontend-application-URL>  # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc.
+  hostmetrics:
+    collection_interval: 60s
+    scrapers:
+      cpu: {}
+      disk: {}
+      load: {}
+      filesystem: {}
+      memory: {}
+      network: {}
+      paging: {}
+      process:
+        mute_process_name_error: true
+        mute_process_exe_error: true
+        mute_process_io_error: true
+      processes: {}
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector-binary
+          static_configs:
+            - targets:
+              # - localhost:8888
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+  resourcedetection:
+    detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    timeout: 2s
+    system:
+      hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  otlp:
+    endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+    tls:
+      insecure: false
+    headers:
+      "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+  logging:
+    verbosity: normal
+service:
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages]
+  pipelines:
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    metrics/internal:
+      receivers: [prometheus, hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [otlp]
+    traces:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+```
+
+&nbsp;
+
+`<Frontend-application-URL>` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc.

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md

@@ -0,0 +1,79 @@
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application.
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md

@@ -0,0 +1,31 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below commands
+ 
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+ 
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+&nbsp;
+
+### Step 2: Run your application
+
+```bash
+ng serve
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md

@@ -0,0 +1,80 @@
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{{MYAPP}}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'https://ingest.{{REGION}}.signoz.cloud:443/v1/traces',
+      headers: {
+        'signoz-access-token': '{{SIGNOZ_INGESTION_KEY}}',
+      },
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md

@@ -0,0 +1,9 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below command
+
+```bash
+ng serve
+```
+
+ 

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md

@@ -0,0 +1,101 @@
+## Setup OpenTelemetry Binary as an agent
+ 
+
+### Step 1: Download otel-collector tar.gz
+```bash
+wget https://github.com/open-telemetry/opentelemetry-collector-releases/releases/download/v{{OTEL_VERSION}}/otelcol-contrib_{{OTEL_VERSION}}_darwin_arm64.tar.gz
+```
+ 
+
+### Step 2: Extract otel-collector tar.gz to the `otelcol-contrib` folder
+```bash
+mkdir otelcol-contrib && tar xvzf otelcol-contrib_{{OTEL_VERSION}}_darwin_arm64.tar.gz -C otelcol-contrib
+```
+ 
+
+### Step 3: Create config.yaml in folder otelcol-contrib with the below content in it
+```bash
+receivers:
+  otlp:
+    protocols:
+      grpc:
+        endpoint: 0.0.0.0:4317
+      http:
+        endpoint: 0.0.0.0:4318
+        cors:
+          allowed_origins:
+            - <Frontend-application-URL>  # URL of your Frontend application. Example -> http://localhost:4200, https://netflix.com etc.
+  hostmetrics:
+    collection_interval: 60s
+    scrapers:
+      cpu: {}
+      disk: {}
+      load: {}
+      filesystem: {}
+      memory: {}
+      network: {}
+      paging: {}
+      process:
+        mute_process_name_error: true
+        mute_process_exe_error: true
+        mute_process_io_error: true
+      processes: {}
+  prometheus:
+    config:
+      global:
+        scrape_interval: 60s
+      scrape_configs:
+        - job_name: otel-collector-binary
+          static_configs:
+            - targets:
+              # - localhost:8888
+processors:
+  batch:
+    send_batch_size: 1000
+    timeout: 10s
+  # Ref: https://github.com/open-telemetry/opentelemetry-collector-contrib/blob/main/processor/resourcedetectionprocessor/README.md
+  resourcedetection:
+    detectors: [env, system] # Before system detector, include ec2 for AWS, gcp for GCP and azure for Azure.
+    # Using OTEL_RESOURCE_ATTRIBUTES envvar, env detector adds custom labels.
+    timeout: 2s
+    system:
+      hostname_sources: [os] # alternatively, use [dns,os] for setting FQDN as host.name and os as fallback
+extensions:
+  health_check: {}
+  zpages: {}
+exporters:
+  otlp:
+    endpoint: "ingest.{{REGION}}.signoz.cloud:443"
+    tls:
+      insecure: false
+    headers:
+      "signoz-access-token": "{{SIGNOZ_INGESTION_KEY}}"
+  logging:
+    verbosity: normal
+service:
+  telemetry:
+    metrics:
+      address: 0.0.0.0:8888
+  extensions: [health_check, zpages]
+  pipelines:
+    metrics:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    metrics/internal:
+      receivers: [prometheus, hostmetrics]
+      processors: [resourcedetection, batch]
+      exporters: [otlp]
+    traces:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+    logs:
+      receivers: [otlp]
+      processors: [batch]
+      exporters: [otlp]
+```
+
+&nbsp;
+
+`<Frontend-application-URL>` - URL where your frontend application is running. For Example,` http://localhost:4200` or `https://netflix.com` etc.

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md

@@ -0,0 +1,79 @@
+After setting up the Otel collector agent, follow the steps below to instrument your Angular Application.
+
+ 
+
+### Step 1: Install OpenTelemetry packages
+
+```bash
+npm install --save @opentelemetry/sdk-trace-web@^1.21.0                                                                   
+npm install --save @opentelemetry/instrumentation@^0.48.0
+npm install --save @opentelemetry/auto-instrumentations-web@^0.36.0
+npm install --save @opentelemetry/exporter-trace-otlp-http@^0.48.0
+npm install --save @opentelemetry/resources@^1.21.0
+npm install --save @opentelemetry/propagator-b3@^1.21.0
+npm install --save @opentelemetry/semantic-conventions@^1.21.0
+```
+ 
+
+### Step 2: Create instrument.ts file
+
+```ts
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import {
+  WebTracerProvider,
+  ConsoleSpanExporter,
+  SimpleSpanProcessor,
+  BatchSpanProcessor,
+} from '@opentelemetry/sdk-trace-web';
+import { getWebAutoInstrumentations } from '@opentelemetry/auto-instrumentations-web';
+import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
+import { Resource } from '@opentelemetry/resources';
+import { B3Propagator } from '@opentelemetry/propagator-b3';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+
+const resource = Resource.default().merge(
+  new Resource({
+    [SemanticResourceAttributes.SERVICE_NAME]: '{MYAPP}',
+    [SemanticResourceAttributes.SERVICE_VERSION]: '0.1.0',
+  })
+);
+
+const provider = new WebTracerProvider({ resource });
+
+provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+
+provider.addSpanProcessor(
+  new BatchSpanProcessor(
+    new OTLPTraceExporter({
+      url: 'http://localhost:4318/v1/traces',
+    })
+  )
+);
+
+provider.register({
+  propagator: new B3Propagator(),
+});
+
+registerInstrumentations({
+  instrumentations: [
+    getWebAutoInstrumentations({
+      '@opentelemetry/instrumentation-document-load': {},
+      '@opentelemetry/instrumentation-user-interaction': {},
+      '@opentelemetry/instrumentation-fetch': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+      '@opentelemetry/instrumentation-xml-http-request': {
+        propagateTraceHeaderCorsUrls: /.+/,
+      },
+    }),
+  ],
+});
+```
+
+ 
+
+### Step 3: Add the below import to your `main.ts` file.
+
+```ts
+import './app/instrument';
+```

frontend/src/container/OnboardingContainer/Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md

@@ -0,0 +1,31 @@
+ 
+
+Once you are done instrumenting your Angular application, you can run it using the below commands
+ 
+
+### Step 1: Run OTel Collector
+ Run this command inside the `otelcol-contrib` directory that you created in the install Otel Collector step
+
+```bash
+./otelcol-contrib --config ./config.yaml &> otelcol-output.log & echo "$!" > otel-pid
+```
+ 
+
+#### (Optional Step): View last 50 lines of `otelcol` logs
+```bash
+tail -f -n 50 otelcol-output.log
+```
+
+#### (Optional Step): Stop `otelcol`
+```bash
+kill "$(< otel-pid)"
+```
+&nbsp;
+
+### Step 2: Run your application
+
+```bash
+ng serve
+```
+
+&nbsp;

frontend/src/container/OnboardingContainer/constants/apmDocFilePaths.ts

@@ -285,6 +285,45 @@ import APM_java_tomcat_macOsARM64_quickStart_runApplication from '../Modules/APM
 import APM_java_tomcat_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-installOtelCollector.md';
 import APM_java_tomcat_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-instrumentApplication.md';
 import APM_java_tomcat_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Java/md-docs/Tomcat/MacOsARM64/Recommended/tomcat-macosarm64-recommended-runApplication.md';
+// Angular
+import APM_javascript_angular_docker_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-instrumentApplication.md';
+import APM_javascript_angular_docker_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/QuickStart/angular-docker-quickStart-runApplication.md';
+// Angular-Docker-recommended
+import APM_javascript_angular_docker_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-installOtelCollector.md';
+import APM_javascript_angular_docker_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-instrumentApplication.md';
+import APM_javascript_angular_docker_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Docker/Recommended/angular-docker-recommended-runApplication.md';
+// Angular-Kubernetes
+import APM_javascript_angular_kubernetes_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-installOtelCollector.md';
+import APM_javascript_angular_kubernetes_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-instrumentApplication.md';
+import APM_javascript_angular_kubernetes_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/Kubernetes/angular-kubernetes-runApplication.md';
+// Angular-LinuxAMD64-quickstart
+import APM_javascript_angular_linuxAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-instrumentApplication.md';
+import APM_javascript_angular_linuxAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/QuickStart/angular-linuxamd64-quickStart-runApplication.md';
+// Angular-LinuxAMD64-recommended
+import APM_javascript_angular_linuxAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-installOtelCollector.md';
+import APM_javascript_angular_linuxAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-instrumentApplication.md';
+import APM_javascript_angular_linuxAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxAMD64/Recommended/angular-linuxamd64-recommended-runApplication.md';
+// Angular-LinuxARM64-quickstart
+import APM_javascript_angular_linuxARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-instrumentApplication.md';
+import APM_javascript_angular_linuxARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/QuickStart/angular-linuxarm64-quickStart-runApplication.md';
+// Angular-LinuxARM64-recommended
+import APM_javascript_angular_linuxARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-installOtelCollector.md';
+import APM_javascript_angular_linuxARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-instrumentApplication.md';
+import APM_javascript_angular_linuxARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/LinuxARM64/Recommended/angular-linuxarm64-recommended-runApplication.md';
+// Angular-MacOsAMD64-quickstart
+import APM_javascript_angular_macOsAMD64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-instrumentApplication.md';
+import APM_javascript_angular_macOsAMD64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/QuickStart/angular-macosamd64-quickStart-runApplication.md';
+// Angular-MacOsAMD64-recommended
+import APM_javascript_angular_macOsAMD64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-installOtelCollector.md';
+import APM_javascript_angular_macOsAMD64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-instrumentApplication.md';
+import APM_javascript_angular_macOsAMD64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsAMD64/Recommended/angular-macosamd64-recommended-runApplication.md';
+// Angular-MacOsARM64-quickstart
+import APM_javascript_angular_macOsARM64_quickStart_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-instrumentApplication.md';
+import APM_javascript_angular_macOsARM64_quickStart_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/QuickStart/angular-macosarm64-quickStart-runApplication.md';
+// Angular-MacOsARM64-recommended
+import APM_javascript_angular_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-installOtelCollector.md';
+import APM_javascript_angular_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-instrumentApplication.md';
+import APM_javascript_angular_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/Angular/MacOsARM64/Recommended/angular-macosarm64-recommended-runApplication.md';
 // ----------------------------------------------------------------------------
 /// ////// Python Done
 /// ///// JavaScript Start
@@ -490,6 +529,7 @@ import APM_javascript_reactjs_macOsARM64_quickStart_runApplication from '../Modu
 import APM_javascript_reactjs_macOsARM64_recommendedSteps_setupOtelCollector from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-installOtelCollector.md';
 import APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-instrumentApplication.md';
 import APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication from '../Modules/APM/Javascript/md-docs/ReactJS/MacOsARM64/Recommended/reactjs-macosarm64-recommended-runApplication.md';
+// ----------------------------------------------------------------------------
 // PHP Docker
 import APM_php_docker_quickStart_instrumentApplication from '../Modules/APM/Php/md-docs/Docker/QuickStart/php-docker-quickStart-instrumentApplication.md';
 import APM_php_docker_quickStart_runApplication from '../Modules/APM/Php/md-docs/Docker/QuickStart/php-docker-quickStart-runApplication.md';
@@ -1445,6 +1485,51 @@ export const ApmDocFilePaths = {
 	APM_javascript_reactjs_macOsARM64_recommendedSteps_instrumentApplication,
 	APM_javascript_reactjs_macOsARM64_recommendedSteps_runApplication,
 
+	/// -------
+
+	// Angular-Kubernetes
+	APM_javascript_angular_kubernetes_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_kubernetes_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_kubernetes_recommendedSteps_runApplication,
+
+	// Angular-LinuxAMD64-recommended
+	APM_javascript_angular_linuxAMD64_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_linuxAMD64_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_linuxAMD64_recommendedSteps_runApplication,
+
+	// Angular-LinuxAMD64-quickstart
+	APM_javascript_angular_linuxAMD64_quickStart_instrumentApplication,
+	APM_javascript_angular_linuxAMD64_quickStart_runApplication,
+
+	// Angular-LinuxARM64-recommended
+	APM_javascript_angular_linuxARM64_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_linuxARM64_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_linuxARM64_recommendedSteps_runApplication,
+
+	// Angular-LinuxARM64-quickstart
+	APM_javascript_angular_linuxARM64_quickStart_instrumentApplication,
+	APM_javascript_angular_linuxARM64_quickStart_runApplication,
+
+	// Angular-MacOsAMD64-recommended
+	APM_javascript_angular_macOsAMD64_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_macOsAMD64_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_macOsAMD64_recommendedSteps_runApplication,
+
+	// Angular-MacOsAMD64-quickstart
+	APM_javascript_angular_macOsAMD64_quickStart_instrumentApplication,
+	APM_javascript_angular_macOsAMD64_quickStart_runApplication,
+
+	// Angular-MacOsARM64-recommended
+	APM_javascript_angular_macOsARM64_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_macOsARM64_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_macOsARM64_recommendedSteps_runApplication,
+
+	// Angular-MacOsARM64-quickstart
+	APM_javascript_angular_macOsARM64_quickStart_instrumentApplication,
+	APM_javascript_angular_macOsARM64_quickStart_runApplication,
+
+	///--------------------
+
 	/// // JavaScript Others
 
 	APM_javascript_others_kubernetes_recommendedSteps_setupOtelCollector,
@@ -1824,6 +1909,13 @@ export const ApmDocFilePaths = {
 	APM_javascript_reactjs_docker_recommendedSteps_instrumentApplication,
 	APM_javascript_reactjs_docker_recommendedSteps_runApplication,
 
+	APM_javascript_angular_docker_quickStart_instrumentApplication,
+	APM_javascript_angular_docker_quickStart_runApplication,
+
+	APM_javascript_angular_docker_recommendedSteps_setupOtelCollector,
+	APM_javascript_angular_docker_recommendedSteps_instrumentApplication,
+	APM_javascript_angular_docker_recommendedSteps_runApplication,
+
 	APM_javascript_others_docker_quickStart_instrumentApplication,
 	APM_javascript_others_docker_quickStart_runApplication,
 

frontend/src/container/OnboardingContainer/utils/dataSourceUtils.ts

@@ -47,6 +47,10 @@ export const frameworksMap = {
 				value: 'reactjs',
 				label: 'React JS',
 			},
+			{
+				value: 'angular',
+				label: 'Angular',
+			},
 			{
 				value: 'others',
 				label: 'Other Web Instrumentation',