Missing typescript sourcemap

[supetronix]

I downloaded this repo to try out Webpack 4 configuration for Angular 6. I followed instructions to download npm packages, build using

npm run build:dev

and ran the application. Application successfully started with home page displayed in browser but looking at "Sources" in Firefox and Chrome browser debugger I only see the "JavaScript" code.

Here is the actual "app.component.ts" in VSCode:

// i18n support
import { TranslateService } from '@ngx-translate/core';
import { REQUEST } from '@nguniversal/aspnetcore-engine/tokens';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, OnDestroy {

Here is what "app.component.ts" shows in browser debugger:

// i18n support


var AppComponent = /** @class */ (function () {
    function AppComponent(router, activatedRoute, title, meta, linkService, translate, injector) {
        this.router = router;
        this.activatedRoute = activatedRoute;
        this.title = title;
        this.meta = meta;
        this.linkService = linkService;
        this.translate = translate;

What is the solution? With older Webpack version I can see the correct sourcemap and it is easy to debug. I noticed a previous Issue reported here, that is closed now but no resolution was provided in comments.

I tried different settings for devtool: isDevBuild ? 'cheap-eval-source-map' : false, but didn't get any results. I am sure others have noticed this issue too, so any solution??

Thanks

[objectnotset]

I'm hitting my head against a wall right now trying to figure this out as well.

[ruant]

I think at least Firefox has issues...

[supetronix]

I have tried it on "Chrome", "IE 11" and Firefox. It didn't work on any. I tried project with Angular CLI on all three browsers and it worked perfectly fine. I believe Angular 6+ CLI uses WebPack 4 too.

[GRIMMR3AP3R]

Not sure what the issue is. Works for me just fine.

[supetronix]

Can you open any of the ".ts" file and see the TypeScript code? In your screenshot it shows "app.component.ts", does it show actual TS code in it? I could see the "*.ts" files but they show "JavaScript" code, as mentioned in my comment.

[cristiancpl]

@supetronix any solution for this ?

[MarkPieszak]

In Chrome, when you go to Sources tab. Do Ctrl-P (or Cmd-P on MAC), you can actually type the name of the file you're looking for.

Do you see the typescript files there?

[cristiancpl]

Mmmm I can see the names of the typescript files, but when I open it, is javascript, look

[supetronix]

@cristiancpl - I didn't find solution and I was in the same boat as you are (.ts file showing the JS code). I gave up and move on to using the VS2017 .net core 2.1 template that comes with builtin angular cli (I believe 6+) and it worked perfect for me.