Angular-cli: Generated Source Maps using absolute paths

[FERNman]

🐞 Bug report

Command (mark with an x)

• [ ] serve
• [x] build
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] test
• [ ] lint
• [ ] xi18n
• [ ] new
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

I don't think so.

Description

When building an Angular application that imports a local library, the source maps for files outside of the apps' folder contain absolute paths instead of relative ones.

This happens because the context for the default Webpack config generated by the CLI internally is set to projectRoot. Webpack shortens the paths by looking into the current and the parent directory, which is not enough for the provided setup.

I propose to use either the TSConfig baseUrl as the context for the Webpack config (would make the most sense in my opinion because the paths aliases are relative to this path), or the workspaces root property.

🔬 Minimal Reproduction

Create a new project containing an application and a library. Import the library in the application through TS path aliases and build it with source maps enabled. The source maps will be using absolute paths.

A simple repo can be found here: https://github.com/FERNman/angular-source-maps
Just run ng build playground and go to any of the generated source maps in the dist folder. The path should be an absolute path.

Workaround

For anybody else stumbling across this issue, an easy workaround until this gets fixed is to change the root property of the app in question in the angular.json to the repositories' root.

🌍 Your Environment

Angular CLI: 9.0.1
Node: 12.10.0
OS: win32 x64

Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
... service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              7.3.9
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[xiaoxiangmoe]

@alan-agius4 How should this error be fixed? Should we set all projectRoot to "root": ""?

[alan-agius4]

@xiaoxiangmoe, no you shouldn't amend the root to "", as this might cause issues when using ng update or other schematics.

There needs to be a fix for this in build-angular.

[xiaoxiangmoe]

Will this fix be brought in next month's Angular 10 release?

[FERNman]

@xiaoxiangmoe I agree with @alan-agius4 , changing the root to the workspace dir breaks many scripts, including for example many of the schematics included in @nrwl/nx.

We're currently using a simple custom Webpack config and didn't experience any problems yet.

const path = require('path');

module.exports = {
  context: path.resolve(__dirname, '..')
};

The config lies in a folder called webpack in our workspaces' root directory. That's why we're setting the context to the parent folder.

The builder we're using is @angular-builders/custom-webpack.

[ghostlytalamaur]

This issue causes debugging problem using VSCode Remote Extensions. Breakpoints will not work until custom sourceMapPathOverrides in launch.json is specified.

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