잘린 각도 에이전트 스니펫

문제

Angular 버전 12, 13 또는 14 애플리케이션 내에서 HTML 복사/붙여넣기 방법을 사용하고 있지만 Angular 빌드를 실행한 후 에이전트 코드 스니펫이 잘렸습니다.

이로 인해 페이지의 HTML에 포함된 부적절한 JavaScript로 인해 영향을 받는 응용 프로그램 또는 페이지가 더 이상 올바르게 작동하지 않을 수 있습니다.

해결책

이 문제는 Angular CLI 빌드 시스템 내의 버그로 인해 발생합니다. Angular CLI 버전 12, 13, 14는 뉴렐릭 브라우저 모니터링에이전트를 포함할 수 있는 임의 크기의 인라인 펼쳐보기를 자르는 의존성/종속성을 사용합니다. 이 문제는 Angular 버전 15에서 해결되었으며 Angular 프로젝트를 업그레이드하는 것이 좋습니다.

Angular를 업그레이드하는 것이 실행 가능한 솔루션이 아닌 경우 대안은 브라우저 에이전트 복사/붙여넣기 스니펫을 별도의 JavaScript 파일에 배치하고 인덱스 HTML 파일 내에서 참조하는 것입니다.

1. 이름이 src 또는 assets 디렉토리인 새 파일을 만듭니다. newrelic.js
2. 뉴렐릭 브라우저 설정 페이지에서 배포 에이전트 스니펫을 복사하세요.
3. 이 새 파일에 브라우저 에이전트 스니펫을 붙여넣습니다.
4. src/index.html 또는 색인 html 파일을 업데이트하여 head 섹션 상단에 아래 코드를 추가하세요.

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

   카피
5. 프로젝트의 루트에서 angular.json 파일을 업데이트하여 새 파일을 assets 배열에 추가합니다.

   ...
         "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": []
             },
   ...

   카피