Angular-cli: Inline SourceMap Option

Created on 5 Oct 2020 · 5Comments · Source: angular/angular-cli

🚀 Feature request

Command

[X] build
[X] serve

Description

Please consider a inline source map option again. It's just one more option. It's easy to implement in the Angular webpack config. It's just one attribute. See docs.

Describe the solution you'd like

I suggest option sourceMapType or a new value.
Why not? Just add devtool: 'inline-source-map' to the webpack.config.js if this option is set.

Describe alternatives you've considered

I don't want additional dependencies, plugins or hacks. Just an official option in the build CLI. Please 🙏
Btw. ngx-build-plus does not work. I don't want to rely on these 3rd party libs. Another risky build breaker.
It's really just a minor change in Angular CLI, or not?

more info

Source

infacto

👍4

Most helpful comment

In my case, I use Cordova and inspect with Chrome. chrome://inspect/#devices The DevTools failed to load source maps.

DevTools failed to load SourceMap: Could not load content for http://localhost/runtime-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED

I think that DevTools will load it from my local computer localhost, and not from the localhost of the app. So inline-source-maps will solve this.
But I think regardless of the use case, it's not the worst idea to have this option. Also this option provides more flexibility to the quality of source map. See docs. It's just a tiny addition to the Webpack config. (Only in dev mode.)

module.exports = {
  /* ... */
  mode: 'production',
  // mode: 'development',
  // devtool: 'inline-source-map',
  /* ... */
  /* Can be in ternary or if-condition to extend the object. */
};

It's much more effort for the Angular app developer to achieve this. And not really nice and dependent on a non-official build tool, which can be a pain. In my case, I have no workaround solution yet. (I can't find the sources here. Please could someone link it? devkit/build-angular/../browser.js? I patched the devtool property without expected result. 🤔 Anyway... Angular should provide this option. An extension of Angular.json would also be conceivable. But it should work in build and serve.)

infacto on 5 Oct 2020

👍3

All 5 comments

Hi @infacto, what is the use-case that requires to use inline sourcemaps?

alan-agius4 on 5 Oct 2020

In my case, I use Cordova and inspect with Chrome. chrome://inspect/#devices The DevTools failed to load source maps.

DevTools failed to load SourceMap: Could not load content for http://localhost/runtime-es2015.js.map: Connection error: net::ERR_CONNECTION_REFUSED

module.exports = {
  /* ... */
  mode: 'production',
  // mode: 'development',
  // devtool: 'inline-source-map',
  /* ... */
  /* Can be in ternary or if-condition to extend the object. */
};

infacto on 5 Oct 2020

👍3

Hi @infacto,

We have discussed this briefly and we still stand by the decision not to add another option to inline sourcemaps. Adding another option is not as trivial as it may look as this option to interacts with a bunch of others as well.

For a better Cordova DX, Ionic extension of the CLI should be better fit as it's more geared towards building an application which is wrapped using Cordova. See: https://github.com/ionic-team/angular-toolkit/blob/master/builders/cordova-build

alan-agius4 on 6 Oct 2020

Hi @infacto,

alan-agius4 on 6 Oct 2020

👎5

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}