[BUG] Angular Plugin compatibility with Ivy

Description/Screenshot

As far as I can tell the Angular plugin is not compatible with the new Ivy rendering engine, which has been the default since v9 was released in February. The library is not built with ng-packagr, doesn’t appear to trigger ngcc compilation, and the following error is thrown when I attempt to DI AngularPluginService:

Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!

(The poor error is Angular’s fault, but adding a breakpoint and looking up the stack a couple of levels reveals that the error occurs when looking for ɵfac on AngularPluginService)

Steps to Reproduce

• Install the latest Angular CLI (tested with 10.1.2) (npm i -g @angular/cli@latest)
• ng new test-app-insights-plugin (and cd into the created workspace directory)
• npm i @microsoft/applicationinsights-web @microsoft/applicationinsights-angularplugin-js
• Add the following code to app.component,ts

export class AppComponent implements OnInit {
  title = 'title';

  private appInsights: ApplicationInsights;

  constructor(
    private router: Router,
    private angularPluginService: AngularPluginService
  ) {
    const angularPlugin = new AngularPlugin();

    this.angularPluginService.init(angularPlugin, this.router);

    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [angularPlugin],
        extensionConfig: {
          [angularPlugin.identifier]: { router: this.router },
        },
      },
    });
  }

  ngOnInit(): void {
    this.appInsights.loadAppInsights();
  }
}

• ng serve

Expected behavior

Application works

Actual behavior

The following error due to DI of AngularPluginService:

Error: Angular JIT compilation failed: ‘@angular/compiler’ not loaded!

Additional context

I would strongly suggest building all Angular Packages with ng-packagr, as detailed here, rather than the custom grunt/rollup process you’re using. This ensures that libraries follow the Angular package format and helps avoid issues like this.

The package should also have peerDependencies on correct versions of the appropriate Angular packages, rather than devDependencies only.

Bluntly, this plugin feels like something of an unmaintained afterthought. That’s to be expected in general in open source, but it’s disappointing for an Microsoft package covered in official documentation. I understand that the Angular package ecosystem hasn’t been the easiest to work in recently due to Ivy, but a company like MS should really be testing documented packages with framework changes, and at least providing a clear warning about incompatibility so that developers don’t waste time trying to implement them.

[xiao-lix]

@jgbpercy @DominikErnst @beyerl Thanks for the comment, assigned the task to myself, will take a look. 😬

[DominikErnst]

We use following Nuget - Packages, without them the WebApp works.

"@angular/animations": "~10.1.2",
"@angular/cdk": "^10.2.1",
"@angular/common": "~10.1.2",
"@angular/compiler": "~10.1.2",
"@angular/core": "^10.1.2",
"@angular/forms": "~10.1.2",
"@angular/localize": "^10.1.2",
"@angular/material": "^10.2.1",
"@angular/platform-browser": "~10.1.2",
"@angular/platform-browser-dynamic": "~10.1.2",
"@angular/platform-server": "^10.1.2",
"@angular/router": "~10.1.2",
"@angular/youtube-player": "^10.2.1",
"@aspnet/signalr": "^1.1.4",
"@fullcalendar/core": "^5.3.1",
"@microsoft/applicationinsights-angularplugin-js": "^2.5.10",
"@microsoft/applicationinsights-web": "^2.5.10",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
...

Problem: The Angular Package @microsoft/applicationinsights-angularplugin-js or @microsoft/applicationinsights-web is not compatible with Angular 10 Ivy-Compiler.

Error: Angular JIT compilation failed: '@angular/compiler' not loaded!
  - JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
  - Did you bootstrap using '@angular/platform-browser-dynamic' or '@angular/platform-server'?
  - Alternatively provide the compiler with 'import "@angular/compiler";' before bootstrapping.
    at oe (main.090cbcb0816f80585553.js:1)
    at Function.get (main.090cbcb0816f80585553.js:1)
    at L (main.090cbcb0816f80585553.js:1)
    at e.value (main.090cbcb0816f80585553.js:1)
    at Ce (main.090cbcb0816f80585553.js:1)
    at Object._e (main.090cbcb0816f80585553.js:1)
    at Object.e.ɵfac [as factory] (main.090cbcb0816f80585553.js:1)
    at e.value (main.090cbcb0816f80585553.js:1)
    at e.value (main.090cbcb0816f80585553.js:1)
    at r.value (main.090cbcb0816f80585553.js:1)

It is not a solution for us to deactivate the Ivy Compiler.