Angular-cli: Script bundle does not include sourcemaps

[bviale]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

No

Description

When you create a script bundle with the "scripts" config in angular.json, the generated sourcemap does not take in account the existing sourcemap in those scripts.

🔬 Minimal Reproduction

ng new myapp

create a folder lib with a dummy mylib.ts file

namespace Lib {
    export class App {
        init() {
            setTimeout(() => console.log('Hello'));
        }
    }
}

And a tsconfig.json file, enabling TypeScript sourcemap :

{
    "compileOnSave": false,
    "compilerOptions": {
      "outFile": "./build/mylib.js",
      "sourceMap": true,
      "declaration": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "moduleResolution": "node",
      "target": "es5",
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es6",
        "dom"
      ]
    }
  }

Build your dummy lib with a tsc command in lib folder.

Then update angular.json config to enable sourcemap and embed the script :

...
           "scripts": [
              "lib/build/mylib.js"
            ],
            "sourceMap": true
...

🔥 Exception or Error

When you launch the app with ng serve or ng build, the sourcemap available in devtools is mylib.js, the built code, whereas I would have expected to retrieve my initial lib TS file, which is available if I include directly the library in index.html.

Scripts.js :

var Lib;
(function (Lib) {
    var App = /** @class */ (function () {
        function App() {
        }
        App.prototype.init = function () {
            setTimeout(function () { return console.log('Hello'); });
        };
        return App;
    }());
    Lib.App = App;
})(Lib || (Lib = {}));
//# sourceMappingURL=mylib.js.map
;
//# sourceMappingURL=scripts.js.map

🌍 Your Environment

Angular CLI: 7.3.6
Node: 8.11.1
OS: win32 x64
Angular: 7.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.6
@angular-devkit/build-angular     0.13.6
@angular-devkit/build-optimizer   0.13.6
@angular-devkit/build-webpack     0.13.6
@angular-devkit/core              7.3.6
@angular-devkit/schematics        7.3.6
@angular/cli                      7.3.6
@ngtools/webpack                  7.3.6
@schematics/angular               7.3.6
@schematics/update                0.13.6
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

Anything else relevant?
Maybe this can be fixed with some webpack config ?

[alan-agius4]

Hi, this is expected and to have sourcemaps for libraries you need to enable vendor in angular.jsonunder the serve options.

angular.json "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "myproj:build", "sourceMap": { "scripts": true, "styles": true, "vendor": true } },

[bviale]

Hi, thank you for your answer, I didn't know there was such options.
It added vendors sourcemap, but scripts sourcemap are still the same. (it was true by default https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/schema.json ).
So it does not solve my issue, TypeScript sourcemap for external script is still not there...

[yardobr]

hi, any updates on this?
experiencing the same issue in my project 👀

having a hybrid Angular app (AngularJS + Angular 8) and desire to see the legacy part sourcemaps, however, cannot find an appropriate solution

would appreciate any further comment on this issue

thanks in advance

[eladFrizi]

@yardobr @bviale
Hey guys. I faced the same problem.
The solution is to use 'ng serve' with --vendorSourceMap
The flag is deprecated but it's the only solution right now, or at least the only one that I found.
Here is the solution's origin:
https://github.com/angular/angular-cli/issues/15064

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