Angular-cli: source-map-explorer errors with `Unable to map x/x bytes`

[Toxicable]

Versions

Angular CLI: 1.6.3
Node: 8.9.3
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro steps

ng new sourcemaps && cd sourcemaps && yarn add source-map-explorer
ng build --prod -sm --output-hashing=false && node_modules/.bin/source-map-explorer dist/main.bundle.js

Observed behavior

Unable to map 160 / 151879 bytes (0.11%)

Desired behavior

Source maps correctly map

Mention any other details that might be useful (optional)

also breaks with --build-optimzier=false

[Seanmclem]

also getting this issue. I'm using a standard angular cli project. It's pretty bare and simple so far. 66% not mapped. no additional flags on the command

[vivian-hu]

See this today.

Angular CLI: 7.0.6
Node: 10.13.0
OS: linux x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.6
@angular-devkit/build-angular 0.10.6
@angular-devkit/build-optimizer 0.10.6
@angular-devkit/build-webpack 0.10.6
@angular-devkit/core 7.0.6
@angular-devkit/schematics 7.0.6
@angular/cli 7.0.6
@ngtools/webpack 7.0.6
@schematics/angular 7.0.6
@schematics/update 0.10.6
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

[josephperrott]

Specific repro steps:

1. npm install -g @angular/cli source-map-explorer
2. ng new --name=myproject
3. cd myproject
4. ng build
5. source-map-explorer --html dist/myproject/main.js > ./dist/output.html

The output from source-map-explorer will be Unable to map 5159 / 9407 bytes (54.84%) and then resulting html file shows these bytes as a block of size that does not break down further.

This occurs regardless of using scss or css for styling.

[vivian-hu]

This is a work around:
use ng build --prod --source-map to build it. source-map-explorer can work in this build.

[Splaktar]

@josephperrott ng build won't work since it shouldn't generate source maps by default in dev mode (or prod mode).

@vivian-hu Right, as mentioned in the OP (ng build --prod -sm --output-hashing=false), the --source-map or --sm flag needs to be used to build if you want to run source-map-explorer.

[IgorMinar]

Just for the record, in my experience getting 100% mapping coverage is very difficult (due to too many various places that can cause source maps to not map correctly). Anything <1% is a sufficient coverage for most use-cases.

The issue description mentions "0.11%" as problematic - it should not be because in practice it doesn't make a difference. "66%" is however problematic and that should be addressed.

Lastly, I wonder why does anyone try to use source-map-explorer on non-production bundles. That doesn't make sense to me, but maybe I just don't understand the use-case. Until then, this issue should remain low priority because it doesn't affect any common workflows.

[alan-agius4]

As @IgorMinar mentioned it's very hard to get 100% coverage. Seeing that the uncovered code is less than 1% this shouldn't cause any problems.

source-map-explorer can also exclude "unmapped" bytes from the output using--only-mapped.

@josephperrott, what's the use-case of using source-map-explorer on a non prod build?

[josephperrott]

At this point I can't remember exactly what we were even looking to check when I commented on this issue. I might have been doing some testing directly related to our CSS generation at the time, but I can't be sure.

I think we can safely ignore my issue I bring up here, as everyone noted source maps on the dev code don't really make sense.

[alan-agius4]

In that case, I think we can close the issue.

[angular-automatic-lock-bot[bot]]

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._}