I am facing an issue with building and serving my Angular webapp. I understand the issue is related to using server-side node modules on the client-side or webpack including those modules in the client-side. I added a webpack.config.js in the root dir to exclude those modules but it was not recognized. So I updated the builder to extend the webpack configurations. This worked successfully:
- I updated the builder from @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser in the angular.json file.
- Added extra-webpack.config.js and referenced it in the angular.json and tsconfig.json
After doing this, my build is successful but when I serve the app using ng serve there is an error in the browser. The error is within opentelemetry module, which is a server-side module only used in my server-module.ts file. I am not sure why it’s being bundled by webpack.
The structure of my project looks like this
/src
/app
(all Angular components and services)
server.module.ts
server-controller.ts
...
In my angular.json, I have the index and main attributes pointing to src/index.html and src/main.ts.