Locally linked UMD bundles break runtime when producing source maps

[smasala]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Breaking change: d71ee21#diff-f3bcbd6f6b0756d2178dd69396750fa742093fb7f4668ab284463c0ca348b032R370

Description

List a local js/umd built package in the package.json and run npm i so it creates a symbolic link in node_modules and not a copy.

Causes chunks to be generated with undefinedundefinedundefinedundefined inserted into the bottom of the build output which obviously break the whole thing on runtime.

Workarounds

1. Disable source map generation (i.e production mode)

2. (Best option) npm pack the module and list the tar in the package.json instead so that the module is copied and not linked.

3. Other fix (by far not recommended):

// adding vendorSourceMap in @angular-devkit/build-angular/src/webpack/configs/common.js fixes it
if ((scriptsSourceMap || stylesSourceMap) && vendorSourceMap) {
// --- OR ---
// add the origin folder (in this case 'vendor') to exclude regex
exclude: vendorSourceMap
                ? /(ngfactory|ngstyle)\.js$/
                : [/[\\\/]node_modules[\\\/]/, /[\\\/]vendor[\\\/]/, /(ngfactory|ngstyle)\.js$/],

🔬 Minimal Reproduction

Apart from a zoom call, can't really reproduce as it's a purchased commercial module in use.

🔥 Exception or Error

🌍 Your Environment

Anything else relevant?

[alan-agius4]

Can you please provide the output of ng version?

Also, ideally we’d have a minimal reproduction that we can look at to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[smasala]

Thanks @alan-agius4 - yea I totally understand why it's needed. I'll try and get another umd module to behave in the same manner.

One question to you in the meantime, how does the build know at this point whether it's a vendor source map or not?

Option 3 above is exactly that, it's not recognising it as a vendor because the import to a node module is a symbolic link which origin lies outside of node_modules.

[smasala]

P.s @alan-agius4 setting the build option "preserveSymlinks": true does the job too.

[alan-agius4]

how does the build know at this point whether it's a vendor source map or not?

Modules which are located in node_modules.

[smasala]

Ah ok, so as simple as that. I saw somewhere that there's also a regex to exclude "thrid_party" folder from complications but wasn't what I was looking for.

Is there a way to extend the regex to include other folders other than "node_modules" as well?

[alan-agius4]

@smasala, you can use a 3rd party builder to do that, such as https://github.com/manfredsteyer/ngx-build-plus.

However, it's important to point out that that while we do allow extending the Angular CLI and the Webpack configurations these are not supported by the Angular tooling team.

[smasala]

@alan-agius4 I tried replicating it with jquery and adding source maps. Seems to work fine. If you'd like to zoom I can show you. I assume that the commercial package we use fails because the source maps are massive (multiple MBs) and the new fast merge is now mandatory with the same cli build version too.

[alan-agius4]

I doubt this has anything to do with the size of the sourcemaps. We can do a zoom/hangouts, although without an actual hands on project to debug it would be hard to address this problem.

Would it maybe be possible to share a minimal reproduction using the library in question privately?

In the mean time can you please provide the full output of ng version?

[smasala]

@matsbryntse are you able to provide a copy of your gantt build 4.0.8 for @alan-agius4

[smasala]

@alan-agius4 please note, this is an nx repo (ivy is enabled as per default)

Angular CLI: 11.2.2
Node: 14.16.0
OS: darwin x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, elements
... forms, language-service, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: <error>

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1102.2
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cli                    11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
rxjs                            6.6.3
typescript                      4.0.7

[amnporter]

We've been running into the same issues. We are trying to build a component library parallel to our main app. We are building our library with --prod and --watch to disable Ivy on that side of things. In the main app, I've tried with/without ivy compiling. We've had "preserveSymlinks": true set for a number of months. Running npm link has only started becoming a problem for us when we upgraded our main app to NG11 from NG6. Prior to that, npm link has been working seamlessly. If I change something in the library, it compiles, forcing a new compile in the app -> so the linking has taken place. However, the browser doesn't show the changes.
Currently running below

Angular CLI: 11.2.2
Node: 14.16.0
OS: darwin x64

Angular: 11.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.2
@angular-devkit/build-angular   0.1101.4
@angular-devkit/core            11.2.2
@angular-devkit/schematics      11.2.2
@angular/cdk                    11.2.2
@angular/cli                    11.2.2
@angular/material               11.2.2
@schematics/angular             11.2.2
@schematics/update              0.1102.2
ng-packagr                      11.2.4
rxjs                            6.6.6
typescript                      4.1.5

[alan-agius4]

@amnporter, it appears that you are reporting something different from the original here, as this issue is related to sourcemaps. Please file a new issue with a reproduction/full details.

That said, not that NGCC doesn’t support symlinks. Hence it you are linking a library make sure it’s not compiled with View Engine.

[alan-agius4]

Any updates about providing a copy of the problematic library?

[smasala]

@matsbryntse are you able to assist here please?