fix(angular): Use Angular compiler to compile @sentry/angular (#4641)

* switch from tsc to the Angular compiler to compile our Angular SDK. This is done via the Angular CLI which internally uses ngc and ng-packagr to build and package our SDK correctly so that the Angular runtime can process all SDK components (including TraceDirective) correctly.

* important: This is a breaking change as it requires SDK users to use Angular >= 10. Currently, our SDK might support earlier Angular versions despite the fact that we only list Angular 10-13 as peer dependencies of the SDK. With this new compiler, applications using the Sentry Angular SDK on earlier versions than Angular 10 will not be able to compile correctly.

* change some yarn scripts by making the Angular compiler the default builder

packages/angular/angular.json

@@ -0,0 +1,27 @@
+/* To learn more about this file see: https://angular.io/guide/workspace-config */
+{
+  "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1, // version of angular.json
+  "projects": {
+    "sentry-angular": {
+      "projectType": "library",
+      "root": ".",
+      "sourceRoot": "src",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "tsConfig": "tsconfig.ngc.json",
+            "project": "ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "tsconfig.ngc.json"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "sentry-angular"
+}

packages/angular/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "build",
+  "lib": {
+    "entryFile": "src/index.ts",
+    "umdModuleIds": {
+      "@sentry/browser": "Sentry",
+      "@sentry/utils": "Sentry.util"
+    }
+  },
+  "whitelistedNonPeerDependencies": ["@sentry/browser", "@sentry/utils", "@sentry/types", "tslib"],
+  "assets": ["README.md", "LICENSE"]
+}

packages/angular/package.json

@@ -9,45 +9,43 @@
   "engines": {
     "node": ">=8"
   },
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
-  "types": "build/types/index.d.ts",
+  "main": "build/bundles/sentry-angular.umd.js",
+  "module": "build/fesm2015/sentry-angular.js",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "@angular/common": "10.x || 11.x || 12.x || 13.x",
     "@angular/core": "10.x || 11.x || 12.x || 13.x",
-    "@angular/router": "10.x || 11.x || 12.x || 13.x"
+    "@angular/router": "10.x || 11.x || 12.x || 13.x",
+    "rxjs": "^6.5.5 || ^7.x"
   },
   "dependencies": {
     "@sentry/browser": "7.0.0-alpha.1",
     "@sentry/types": "7.0.0-alpha.1",
     "@sentry/utils": "7.0.0-alpha.1",
-    "rxjs": "^6.6.0",
-    "tslib": "^1.9.3"
+    "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@angular/common": "^10.0.3",
-    "@angular/core": "^10.0.3",
-    "@angular/router": "^10.0.3"
+    "@angular-devkit/build-angular": "~0.1002.4",
+    "@angular/cli": "^10.2.4",
+    "@angular/common": "~10.2.5",
+    "@angular/compiler": "^10.2.5",
+    "@angular/compiler-cli": "~10.2.5",
+    "@angular/core": "~10.2.5",
+    "@angular/router": "~10.2.5",
+    "ng-packagr": "^10.1.0",
+    "typescript": "~4.0.2"
   },
   "scripts": {
-    "build": "run-p build:cjs build:esm build:types",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build": "yarn build:ngc",
+    "build:ngc": "ng build --prod",
     "build:dev": "run-s build",
-    "build:es5": "yarn build:cjs # *** backwards compatibility - remove in v7 ***",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "build:types": "tsc -p tsconfig.types.json",
-    "build:watch": "run-p build:cjs:watch build:esm:watch build:types:watch",
-    "build:cjs:watch": "tsc -p tsconfig.cjs.json --watch",
-    "build:dev:watch": "run-s build:watch",
-    "build:es5:watch": "yarn build:cjs:watch # *** backwards compatibility - remove in v7 ***",
-    "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
-    "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:npm": "npm pack",
+    "build:watch": "run-p build:ngc:watch",
+    "build:ngc:watch": "ng build --prod --watch",
+    "build:npm": "npm pack ./build",
     "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf cjs esm build coverage",
+    "clean": "rimraf build coverage",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
     "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.ts\"",

packages/angular/src/errorhandler.ts

@@ -1,5 +1,5 @@
 import { HttpErrorResponse } from '@angular/common/http';
-import { ErrorHandler as AngularErrorHandler, Injectable } from '@angular/core';
+import { ErrorHandler as AngularErrorHandler, Inject, Injectable } from '@angular/core';
 import * as Sentry from '@sentry/browser';
 
 import { runOutsideAngular } from './zone';
@@ -26,7 +26,7 @@ export interface ErrorHandlerOptions {
 class SentryErrorHandler implements AngularErrorHandler {
   protected readonly _options: ErrorHandlerOptions;
 
-  public constructor(options?: ErrorHandlerOptions) {
+  public constructor(@Inject('errorHandlerOptions') options?: ErrorHandlerOptions) {
     this._options = {
       logErrors: true,
       ...options,

packages/angular/tsconfig.ngc.json

@@ -0,0 +1,28 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+// This tsconfig is used when building @sentry/angular with the Angular
+// compiler and `ng-packagr`. It configures a production build conforming
+// to the Angular Package Format (APF).
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "target": "es2015",
+    "lib": ["dom", "es2015"],
+    "baseUrl": "./"
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+    // As per Angular 10, the recommendation from the library creation guide
+    // is to disable compilation for the Ivy rendering engine in production builds
+    // to ensure compatibility with Angular 10.
+    // For Angular 11-13 applications, ngcc and the Angular linker convert the compiled JS
+    // at application compile time into an Ivy-compatible version which is then further used in
+    // the build process. This ensures compatibility with newer Angular versions than the one
+    // that was used to initially compile the library (Angular 10 in our case).
+    "enableIvy": false
+  }
+}