I was able to inline the map files into the generated javascript files. The Angular cli itself does not provide a configuration setting to enforce this behavior. I applied ngx-build-plus:
npm i -D ngx-build-plus
Apply the schematics to your Angular project:
ng add ngx-build-plus
Add an ngx-build-plus plugin file to your project, e.g. with the name build-customization-plugin.js:
const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const webpack = require("webpack");
exports.default = {
config: function (cfg) {
// first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
const strategy = mergeWithCustomize({
customizeObject: customizeObject({
'devtool': 'replace'
})
});
const result = strategy(cfg, {
devtool: 'inline-source-map'
});
// then we find SourceMapDevToolPlugin and remove it
// This is because we should never use both the devtool option and plugin together.
// The devtool option adds the plugin internally so you would end up with the plugin applied twice.
// See https://webpack.js.org/configuration/devtool/
const index = result.plugins.findIndex((plugin) => {
return plugin instanceof webpack.SourceMapDevToolPlugin;
});
result.plugins.splice(index, 1);
return result;
}
}
Run the Angular cli with an additional --plugin parameter:
ng build --plugin ~build-customization-plugin.js
The tilde (~) is enforcing ngx-build-plus to look into the current directory instead of resolving to a node module.
Package.json entries:
- "ngx-build-plus": "^11.0.0"
- "@angular-devkit/build-angular": "~0.1102.11"
which transitively installs "webpack-merge": "5.7.3"
Note:
My solution is based out of an example that was using merge.strategy. This resulted in a runtime error merge.strategy is not a function. I guess webpack-merge has changed its API when moving from major version 4 to 5. 5.0.0 became available around August 2020.
