How can I inject Angular SSR project with webpack plugin?

I found this post which suggests @newrelic/webpack-plugin

Environment info:

Angular CLI: 14.0.4
Node: 16.15.0
Package Manager: yarn 3.2.0 
OS: linux x64

Angular: 14.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            14.0.4
@angular-devkit/schematics      13.3.6
@nguniversal/builders           14.0.2
@nguniversal/express-engine     14.0.2
@schematics/angular             14.0.4
rxjs                            7.5.5
typescript                      4.7.4
webpack                         5.73.0

So here is what I did:

  1. I created webpack.config.js at the root (hence I don’t have a webpack config file).
const nodeExternals = require('@newrelic/webpack-plugin/lib/externals');
const NewrelicWebpackPlugin = require('@newrelic/webpack-plugin/lib/NewrelicWebpackPlugin');

module.exports = {
  externals: [nodeExternals()],
  plugins: [new NewrelicWebpackPlugin()],
};
  1. In angular.json, I updated the following builders:
  • "builder": "@angular-devkit/build-angular:browser", to @angular-builders/custom-webpack:browser and added into it’s options:
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },

Which leads to the following error:

 Generating browser application bundles (phase: setup)...(node:28500) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use `node --trace-deprecation ...` to show where the warning was created)

Am I supposed to do the same for:

  • @angular-devkit/build-angular:dev-server
  • @angular-devkit/build-angular:extract-i18n
  • @angular-devkit/build-angular:server

Please help.

Hello @adham.sabry,

I hope you are well.

Thank you or such a detailed post to go with your questions. While this is a bit out of my scope as I am not a support engineer, I am going to loop one in to provide their amazing knowledge of our Browser agent. We will get a response out to you shortly. If there are any updates or changes on your side please let us know, and don’t hesitate to ask any other questions you may have.

Hello @michaelfrederick,

Thanks for the response. Yes, I am currently using the browser agent as an alternative. However, it is our preferred method to use automatic injection instead. Also, considering that Angular SSR has 2 sides of processing as SSR stands for “server side processing”, with browser-only agent, we are missing the information that’s happening on the server side.

I’ll be waiting for any details that can be provided to help with the APM.

Thanks,
Adham

Hey @adham.sabry !

This is an experimental plugin, which is out of scope for Support.
You may be able to find more support in the Experimental Webpack Plugin Community Post.

1 Like

Hello @ahoffmann , thanks for letting me know. If that’s the case, what is the proper/supported method of injecting Angular SSR application? Please advise.

Hello, I created this this post but was redirected here.

I found this post which suggests @newrelic/webpack-plugin

Environment info:

Angular CLI: 14.0.4
Node: 16.15.0
Package Manager: yarn 3.2.0 
OS: linux x64

Angular: 14.0.4
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1400.4
@angular-devkit/build-angular   14.0.4
@angular-devkit/core            14.0.4
@angular-devkit/schematics      13.3.6
@nguniversal/builders           14.0.2
@nguniversal/express-engine     14.0.2
@schematics/angular             14.0.4
rxjs                            7.5.5
typescript                      4.7.4
webpack                         5.73.0

So here is what I did:

  1. I created webpack.config.js at the root (hence I don’t have a webpack config file).
const nodeExternals = require('@newrelic/webpack-plugin/lib/externals');
const NewrelicWebpackPlugin = require('@newrelic/webpack-plugin/lib/NewrelicWebpackPlugin');

module.exports = {
  externals: [nodeExternals()],
  plugins: [new NewrelicWebpackPlugin()],
};
  1. In angular.json, I updated the following builders:
  • "builder": "@angular-devkit/build-angular:browser", to @angular-builders/custom-webpack:browser and added into it’s options:
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true
            },

Which leads to the following error:

 Generating browser application bundles (phase: setup)...(node:28500) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use `node --trace-deprecation ...` to show where the warning was created)

Am I supposed to do the same for:

  • @angular-devkit/build-angular:dev-server
  • @angular-devkit/build-angular:extract-i18n
  • @angular-devkit/build-angular:server

Please help.

I am currently using browser agent but considering that Angular SSR has 2 sides of processing as SSR stands for “server side processing”, with browser-only agent, we are missing the information that’s happening on the server side.

Hey there @adham.sabry,

I have merged your two topics just for clarity. I want to make sure our engineers have all of the information you provided in one spot so they can help you to the best of their abilities. It does also look like Andrew has informed you that this is unfortunately not something we provide direct support for. While our support team cannot directly help with these experimental plugins, we have an amazing community that loves to share their experience and knowledge with others that may be able to provide you with an answer. Please reach out if you have other questions and we will be happy to help out!

Hello @michaelfrederick ,

Thanks for trying to help. We are beginning to remove new relic. Supporting angular is one of the basic things that should be available in new relic in our opinion, in new relic, there is a special UI view for angular but it seems to be fake. I still haven’t been responded with the supported method yet.

Angular is extremely popular. Not sure why new relic is not supporting it yet? Browser script only? This puts you behind ur competitors.

Thx,
Adham

Hey @adham.sabry,

Sorry to hear that. We definitely appreciate your feedback regarding support for this.

Has anyone managed to look into this yet?

Hey @adham.sabry.

Sorry for the delay. I have reached back out to our Browser team to see if there is an update. We will respond here shortly. Thank you for your patience.

Hi @adham.sabry - Thanks for using New Relic - we do have an extensive guide to installing New Relic with Angular, in fact we have a cool Developer Lab that walks you through installing New Relic on a standard Angular installation - both for APM and Browser monitoring.

Click here to access the FoodMe demo application lab

Unfortunately in your case you’re attempting to instrument using a non-supported method with Webpack server side. I want to point you back to the post that my colleague @ahoffmann pointed out regarding the Webpack plugin, which has further resources around this topic:

Hopefully those resources are helpful!

2 Likes

@jpotter1 this https://developer.newrelic.com/collect-data/monitor-your-application ( https://github.com/newrelic-experimental/NewRelic-basics-lab-material ) is not angular. And this https://discuss.newrelic.com/t/experimental-webpack-plugin-for-nodejs/88068 is “not supported” based on https://discuss.newrelic.com/t/how-can-i-inject-angular-ssr-project-with-webpack-plugin/188675/7?u=adham.sabry

Andrew has informed you that this is unfortunately not something we provide direct support for. While our support team cannot directly help with these experimental plugins

So you sent me an article for something that is not angular project, a link to an experimental plugin that’s already discussed here and that is not supported and not working for me as per this topic already.

I’d rather leave this topic unattended or not answered till someone really knows how-to answer or at least provide a solution on where to head next rather than spamming this topic with none-sense or repeated messages.

Please delete your message and I’ll delete this to keep this topic clear till we get somewhere, thanks.

@adham.sabry Our support team supplies the resources they can and sometimes it may not directly fit the customer’s unique situation. For your particular case it seems the possibilities for finding a solution has been exhausted. At this point we can submit a Feature Request so that our product team can consider how best to address the pain points you have raised. I realize, you may not be satisfied with this approach but it will ensure that there’s greater visibility.

We appreciate your honesty and feedback. Please let us know if you have other support related issues.

@JoiConverse , i honestly don’t know what to suggest beside that just leave this topic open till there is a solid solution is made available, other than that, there is no point of closing aiming towards closing a subject that’s left unanswered. I’m sure there will be others asking the same questions that I have.

Anyone can simply kick off a new project in angular and try to instrument out of the box, ng new <project-name> which is already not working in your case with a supported method.

If you wish to close this topic to “reduce the open topics” you have, be my guest. you just locked a customer(s) out of your product, I’m keeping this topic to keep tracking the progress.

In regards to the feature request, please feel free to link to here or take my comments, whichever is suitable.

Please also know that it’s about satisfaction, it’s about reaching a solution to an actual issue. I am not asking to rush in fixing it or rush in closing this. There is no SLA here really.

@adham.sabry Our practice is to leave topics viewable as long as they are relevant on the community. This thread, although not fully resolved, may be helpful for future community members.

I will be using your comments to help document the feature request. Its much more meaningful for our product team to have a real-world account of the issue. If there is already a FR in progress I will add your comments to it.

Thank you!

1 Like