Source maps not loading for script added through .angular-cli.json

[adamlubek]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Versions.

@angular/cli: 1.2.6
node: 6.9.5
os: win32 x64
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/compiler-cli: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/upgrade: 4.3.1
@angular/cli: 1.2.6
@angular/language-service: 4.3.1

Repro steps.

In .angular-cli.json, scripts section I've got reference to legacy library written in AngularJS with IFFEies which is bundled with gulp-uglify.

      "scripts": [
        "../node_modules/legacy-lib/lib.js"
      ]

legacy-lib also contains source maps for lib ("../node_modules/legacy-lib/lib.js.map") which are generated using gulp-sourcemaps.

Functionality of this legacy library is used within Angular CLI based hybrid app. When using "ng serve -o" library is loaded and works fine but I can only see minified version in dev tools, I don't see source maps file.

Desired functionality.

I'd like source maps for legacy library to be included in build and picked up by browser dev tools so I can debug. This sounds like common scenario to me so I'm probably just missing something but I can't find anything relevant in docs or issues. I'd appreciate guidance on how to enable this functionality.

Mention any other details that might be useful.

Legacy library is based on https://github.com/johnpapa/generator-hottowel and it's build system.

[alastair-todd]

+1

[alastair-todd]

FWIW whilst not the desired route, you can add debugger statements in those files and chrome does show a debuggable file, although these are not available through sources.

There was a similar issue with node_modules not having sourcemaps either, not sure if that was fixed.

[adamlubek]

another workaround is to include source maps through .angular-cli.json assets section:

      "assets": [
        "assets",
        { "glob": "somelib.js.map", "input": "../node_modules/somelib/", "output": "./" }
      ],

but this will also mean that prod builds will contain source maps (which can be fixed by adding build script to delete these in the end of the build - not ideal but would do the job)

are you referring to this one: #5477

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