Angular truncated agent snippet

Problem

You are using the HTML copy/paste method within an Angular version 12, 13, or 14 application, but the agent code snippet has been truncated after running the Angular build.

This may cause the affected application or pages to no longer function correctly due to improper JavaScript contained within the HTML of the page.

Solution

This issue is caused by a bug within a dependency the Angular CLI build system. Versions 12, 13, and 14 of the Angular CLI use a dependency that truncates inline scripts of an arbitrary size, which can include the New Relic browser monitoring agent. We have confirmed this has been corrected with Angular version 15 and recommend upgrading your Angular project.

If upgrading Angular is not a viable solution, an alternative is to place the browser agent copy/paste snippet into a separate JavaScript file and reference it from within the index HTML file.

1. Create a new file in your src or assets directory named newrelic.js
2. Copy the browser agent snippet from the New Relic One browser application settings page
3. Paste the browser agent snippet in this new file
4. Update the src/index.html or your index html file to add the below code at the top of the head section

   <script src="/newrelic.js"></script>

   Copy
5. Update the angular.json file in the root of the project to add the new file to the assets array

   ...
         "architect": {
           "build": {
             "builder": "@angular-devkit/build-angular:browser",
             "options": {
               "outputPath": "dist",
               "index": "src/index.html",
               "main": "src/main.ts",
               "polyfills": "src/polyfills.ts",
               "tsConfig": "tsconfig.app.json",
               "assets": [
                 "src/favicon.ico",
                 "src/assets",
                 "src/newrelic.js"
               ],
               "styles": [
                 "src/styles.css"
               ],
               "scripts": []
             },
   ...

   Copy