How can I use webpack "output.devtoolNamespace" in angular

Question

I have an angular application.

In the browser I see the source root as
webpack://src...

I want to use other namespaces like
webpack://web-component-a/...
webpack://web-component-b/...

in webpack documentation I have read I can do this with:
https://webpack.js.org/configuration/output/#outputdevtoolnamespace

But in angular 9 I dont have a webpack config. How can I merge a custom webpack partial file and customize the "output" object without redefining it

score 0 · Answer 1 · answered May 09 '20 at 18:15

i have figured it out:

ng add ngx-build-plus

webpack.partial.js

const webpack = require('webpack');

module.exports = {
    output: {
        devtoolNamespace: 'client-a'
    },
    devtool: 'eval' // hint: namespace works not standalone
}

run with partial webpack config:

ng serve --extra-webpack-config webpack.partial.js --port 7201 --single-bundle

expected result:

How can I use webpack "output.devtoolNamespace" in angular

1 Answers1