Some sourcemaps from library are not being copied to __ivy_ngcc__

[henriquearthur]

🐞 bug report

Affected Package

Don't know the package.
Probably ivy / ngcc

Is this a regression?

Haven't tested in other versions.

Description

Some sourcemaps files from package ngx-leaflet are not being copied into the folder __ivy_ngcc__. It does not happen with all sourcemaps - some are there some are not. The files exist on the package dist.

It happens when vendor sourcemaps are enabled in angular.json and we run ng serve.

"sourceMap": {
  "scripts": true,
  "styles": true,
  "vendor": true
}

This causes several warnings because the .map files are referenced in the .js files but are not found and it's not possible to debug these files if necessary.

I haven't detected this problem with other packages but there's an issue in ngx-leaflet about this problem and it doesn't seem to be related to the package itself. Also it does not happen when I disable Ivy.

🔬 Minimal Reproduction

Create a new project, enable sourcemaps, install @asymmetrik/ngx-leaflet and leaflet.

Created a repo containing a reproduction:
1 - Clone this repo
2 - npm install
3 - ng serve

🔥 Exception or Error

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/layers/control/leaflet-control-layers-changes.model.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet-control-layers-changes.model.js.map': Error: Can't resolve './leaflet-control-layers-changes.model.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\layers\control'

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/layers/control/leaflet-control-layers-config.model.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet-control-layers-config.model.js.map': Error: Can't resolve './leaflet-control-layers-config.model.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\layers\control'

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/layers/control/leaflet-control-layers.wrapper.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet-control-layers.wrapper.js.map': Error: Can't resolve './leaflet-control-layers.wrapper.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\layers\control'

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/layers/leaflet-tile-layer-definition.model.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet-tile-layer-definition.model.js.map': Error: Can't resolve './leaflet-tile-layer-definition.model.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\layers'

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/core/leaflet.directive.wrapper.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet.directive.wrapper.js.map': Error: Can't resolve './leaflet.directive.wrapper.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\core'

WARNING in ./node_modules/@asymmetrik/ngx-leaflet/__ivy_ngcc__/dist/leaflet/core/leaflet.util.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find SourceMap 'leaflet.util.js.map': Error: Can't resolve './leaflet.util.js.map' in 'C:\Users\hnrq\Documents\Dev\issue-ngcc-sourcemap\node_modules\@asymmetrik\ngx-leaflet\__ivy_ngcc__\dist\leaflet\core'

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.12
Node: 12.18.4
OS: win32 x64

Angular: 9.1.12
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      9.2.4
@angular/flex-layout              9.0.0-beta.31
@angular/material                 9.2.4
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

There's a report saying it happens with Angular 11 too.

[petebacondarwin]

OK, so I have worked out what is happening here. When we use --create-ivy-entry-points in ngcc (which is what the CLI does internally), we have to copy all the files of the bundle over from the original position to their place in the __ivy_ngcc__ folder.

Some files are processed by ngcc - and these one have both their source (.js file) and map (.js.map file) written into the new folder. But other files are not processed by ngcc (because they have no directives/components etc). These files are simply copied over. But the problem is that we work out what files to copy by asking TS for the list of source files - and notably not their associated source-map files.

I think the fix is to ensure that when we do the file copy, we also check to see if there is an accompanying source-map and copy that too. The naive (and possibly acceptable way) is to just look for a similar named file end in .map. A more comprehensive solution involves actually parsing the source file for its source-map URL comment and then going to look for that file.

[petebacondarwin]

This is further complicated by the fact that these copied source-maps refer to original TS files. And since the new folder is at a different level in the file system the relative paths to them are broken, even if we do copy them over.

So the comprehensive solution now involves parsing the source-maps and recomputing any source URLs found within.

A simpler (but probably unacceptable) way to avoid these errors is to strip the source-map comments altogether.

[angular-automatic-lock-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.}