-
Notifications
You must be signed in to change notification settings - Fork 11.9k
Closed
Description
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.
devoto13
Metadata
Metadata
Assignees
Labels
No labels