Angular の切り捨てられたエージェント スニペット

問題

Angular バージョン 12、13、または 14 アプリケーション内で HTML コピー/貼り付けメソッド を使用していますが、Angular ビルドの実行後にエージェント コード スニペットが切り詰められています。

これにより、ページの HTML に不適切な JavaScript が含まれているため、影響を受けるアプリケーションまたはページが正しく機能しなくなる可能性があります。

解決

この問題は、Angular CLI ビルド システムの依存関係内のバグが原因です。Angular CLI のバージョン 12、13、および 14 は、New Relic Browser エージェントを含めることができる、任意のサイズのインライン スクリプトを切り捨てる依存関係を使用します。これは Angular バージョン 15 で修正されていることを確認しており、Angular プロジェクトをアップグレードすることをお勧めします。

Angular のアップグレードが実行可能な解決策でない場合、別の方法として、ブラウザー エージェントのコピー/貼り付けスニペットを別の JavaScript ファイルに配置し、インデックス HTML ファイル内から参照することもできます。

1. 次の名前のsrcまたはassetsディレクトリに新しいファイルを作成します newrelic.js

2. New Relic One ブラウザ アプリケーション設定ページからブラウザ エージェント スニペットをコピーします。

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

   コピー