Angular 18 production build doesn't work with vendor source maps

[Davidhanson90]

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

Yes

Description

We upgraded our apps from ng17 to 18 and adopted the new build system. In our angular.json file we had options set to enable vendor source maps for production and regular builds. This worked fine prior to the upgrade. Example config below for references as I cannot post details from our work setup.

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "sourceMap": {
              "scripts": true,
              "vendor": true
            }
          }
        }
      }
    }
  }
}

So when running ng serve with a production config the source maps for things like RX are debuggable without issue.

ng serve application --open live-reload --configuration=production

However when we run our release jobs using this command we find the disted app does not support loading source maps from node_modules. All other source maps seem to work fine .

ng build application --configuration=production

I looked for a documented change here to see if vendor source maps are still supported in production builds and couldn't find anything about them being deprecated.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

404 cannot load source map

Please provide the environment you discovered this bug in (run ng version)

Angular CLI Version: 18.1.1
Node Version: 20.11.1
Package Manager: npm 10.2.4
Operating System: win32 x64 (Windows 64-bit)


@angular-devkit/architect: 0.1801.1
@angular-devkit/build-angular: 18.1.1
@angular-devkit/core: 18.1.1
@angular-devkit/schematics: 18.1.1
@schematics/angular: 18.1.1
ng-packagr: 18.1.0
rxjs: 7.8.1
typescript: 5.5.4
webpack: 5.92.1
zone.js: 0.14.3

Anything else?

No response

[alan-agius4]

I'm sorry, but we can't reproduce the problem following the instructions you provided. 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.

[Davidhanson90]

Create a new app

ng new example

navigate to path

cd example

Add source maps to the production config

"configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "vendor": true
    }
  }
}

run build

ng build --configuration production

Navigate to dist path

cd dist/example/browser

Now run

npx http-server
``

When started you can navigate to the site at http://127.0.0.1:8081

If you open chrome devtools and look ath folders you will see node modules. Open up the rx folder and try and view the TS files.  You will see they fail to load. 

Previous versions would load the source maps from he main.js.map file inine I beleive