CLI 1.5.0+ ng serve doesn't generate source mappings

After upgrading from Angular CLI 1.4.9 to 1.5.0+, Chrome DevTools is unable to display mapped TS sources. It shows transpiled JS instead.

Versions

"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/router": "^5.0.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"zone.js": "^0.8.14"

Angular CLI: 1.5.2
Node: 8.7.0
OS: win32 x64
Angular: 5.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.2
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.36
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.2
@schematics/angular: 0.1.5
typescript: 2.4.2
webpack: 3.8.1

Repro steps

• Create a new Angular app ng new TestApp
• Start the development server: ng serve
• Open the app in Chrome, press Ctrl + Shidt + F and try to search a string title = 'app';.

Observed behavior

Chrome finds 2 entries, one of which is named as app.component.ts, but its source code is displayed as JS, not TS:

var AppComponent = (function () {
    function AppComponent() {
        this.title = 'app';
    }
    AppComponent = __decorate([
        Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["m" /* Component */])({
            selector: 'app-root',
            template: __webpack_require__("../../../../../src/app/app.component.html"),
            styles: [__webpack_require__("../../../../../src/app/app.component.css")]
        })
    ], AppComponent);
    return AppComponent;
}());

Also, ng serve output messages doesn’t mention map files:

chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 20.5 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 550 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 33.6 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.02 MB [initial] [rendered]

Desired behavior

ng serve should generate source maps by default and Chrome should display TS sources instead of transpiled JS ones.

The output from Angular CLI 1.4.9 ng serve explicitly mentions that map files have been generated:

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.66 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 200 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.63 MB [initial] [rendered]

Mention any other details that might be useful (optional)

Windows 10 x64, Chrome 62.0.3202.94 (Official Build) (64-bit). Also, tested in Edge 15.15.063.

[AbakumovAlexandr]

@filipesilva, I believe you’re correct that the cause of this issue is the same as in the #8524. You’re offering a workaround to use sources displayed under webpack:// node in Chtome. However, it has 2 major flaws:

1. It takes extremely long to navigate to a desired TS file using that tree. Searching for a code entry is a few seconds deal, but it doesn’t work now in Chrome and Edge at least. I forced to use IE11 DevTools since search is working there.
2. Not all browsers has webpack:// node (Edge for instance).

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