'ReferenceError: define is not defined' in dotnet SpaServices angular template with SSR

[dominikfoldi]

I am trying to use the library with the dotnet angular template provided by the aspnet templating team.
I am using the aspnet 2.1 with angular 5.2 version of the template and v4.0.2 of @markpieszak/ng-application-insights.

I did everything exactly as stated in the documentation.
I have a shared AppModule and one for the server and another one for the browser. During ssr only the server one and the shared one used. I load the appinsights module in the browser AppModule.
I am injecting the AppInsightsService through the injector only if it is running in the browser.

Still, I get an error during prerendering:

Microsoft.AspNetCore.NodeServices.HostingModels.NodeInvocationException: Prerendering failed because of error: ReferenceError: define is not defined
    at Object.<anonymous> (<local_app_folder>\AngularServerSideRenderingApplicationInsights\ClientApp\node_modules\applicationinsights-js\bundle\ai.module.js:187:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (<local_app_folder>\AngularServerSideRenderingApplicationInsights\ClientApp\node_modules\@markpieszak\ng-application-insights\dist\src\app-insight.service.js:5:32)
    at Module._compile (module.js:652:30)
Current directory is: <local_app_folder>\AngularServerSideRenderingApplicationInsights

   at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.InvokeExportAsync[T](NodeInvocationInfo invocationInfo, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.HostingModels.OutOfProcessNodeInstance.InvokeExportAsync[T](CancellationToken cancellationToken, String moduleName, String exportNameOrNull, Object[] args)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.NodeServices.NodeServicesImpl.InvokeExportWithPossibleRetryAsync[T](String moduleName, String exportedFunctionName, Object[] args, Boolean allowRetry, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.Builder.SpaPrerenderingExtensions.<>c__DisplayClass0_0.<<UseSpaPrerendering>b__1>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)

The problem occurs at applicationinsights-js\bundle\ai.module.js:187:1, so this line is the problematic one:
define("JavaScriptSDK.Module/AppInsightsModule", ["require", "exports"], function (require, exports).

Just to be sure I have tried the https://github.com/MarkPieszak/aspnetcore-angular2-universal starter project and it works fine with this module, so the problem only occurs with Microsoft's template.

I have created a repro repository here: https://github.com/dominikfoldi/AngularSSRAppInsightsRepro
If you comment out the injection of the AppInsightsService in app.component.ts the error is gone, but otherwise it fails during SSR.

@MarkPieszak or others do you have any idea how to resolve this?

[MarkPieszak]

Hey there! 👋
I need to test things out with the latest template, that's strange that it doesn't work?
Can you try updating your module to es2015 in your tsconfig.server file? Maybe that will do the trick! 👍
Hope that helps :)

"module": "es2015",

[dominikfoldi]

@MarkPieszak thank you for your reply but unfortunately this is not solving the problem 😕 I got the same error with module set to es2015.

[dominikfoldi]

@MarkPieszak do you have any progress on this?

[MarkPieszak]

Not yet I'll have to try and find some time to look deeper into this but it seems like an underlying issue with application-insightsjs and how it's being bundled, hmm 🤔

[MarkPieszak]

Just wondering if you get the same issue with the latest version of this package?

[Aron4u]

same issue with 5.0.5 for me.

I added the define function to the test spec. Not sure its a good sulution overall ...

// at Object.<anonymous> (node_modules/applicationinsights-js/bundle/ai.module.js:187:1)
// ReferenceError: define is not defined
(window as any).define = () => {};

[MarkPieszak]

It seems like right now that might be the only way to fix the error, it looks like the library itself still has this issue Open :(

microsoft/ApplicationInsights-JS#476

[AhmedAzzabi]

Did this workaround solved the issue ? where exactly should we add this line (window as any).define = () => {}; ??