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

問題

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

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

解決

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

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

1. 次の名前のsrcまたはassetsディレクトリに新しいファイルを作成します newrelic.js
2. New Relic Browser アプリケーション設定ページから BrowserAgent Snipet をコピーします。
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": []
             },
   ...

   コピー