Gulp failing to produce inline sourcemaps

I have a specific tsconfig.json setup within an ASP.NET Core project:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "inlineSourceMap": true,
    "inlineSources": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitOnError": false,
    "noImplicitAny": false,
    "removeComments": false,
    "outDir": "wwwroot/client-app"
},
  "exclude": [
    "node_modules",
    "wwwroot",
    "typings"
  ]
}

After building the project in Visual Studio, I noticed that the resulting js files contain inline source maps at the end of the file:

/// <reference path="../typings/index.d.ts" />
"use strict";
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
var client_application_module_1 = require('./client-application.module');
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(client_application_module_1.ClientApplicationModule);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9vdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL0NsaWVudEFwcC9ib290LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLDhDQUE4Qzs7QUFFOUMseUNBQXVDLG1DQUFtQyxDQUFDLENBQUE7QUFDM0UsMENBQXdDLDZCQUE2QixDQUFDLENBQUE7QUFFdEUsaURBQXNCLEVBQUUsQ0FBQyxlQUFlLENBQUMsbURBQXVCLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8vLyA8cmVmZXJlbmNlIHBhdGg9XCIuLi90eXBpbmdzL2luZGV4LmQudHNcIiAvPlxyXG5cclxuaW1wb3J0IHsgcGx...

However, when using Gulp to build the js files, the inline sourcemap is not being generated, as if it's ignoring the tsconfig.json.

Below is my Gulp task for transpiling TypeScript into JavaScript:

    var tsProject = ts.createProject('tsconfig.json');

    gulp.task('transpile', function ()
    {
        var tsResult = gulp.src(["ClientApp/**/*.ts"])
            .pipe(ts(tsProject), undefined, ts.reporter.fullReporter()).js
            .pipe(gulp.dest('./wwwroot/client-app'));
    });

Does additional configuration need to be added to Gulp in order to generate inline sourcemaps?

This project is utilizing TypeScript version 1.8.10.

visual-studiotypescriptgulp

Answer №1

Whenever I needed to get my typescript gulp task up and running, the key for me was using the gulp-sourcemaps plugin.

Typically, I would set it up like this:

var sourcemaps = require('gulp-sourcemaps');
var typescript = require('gulp-typescript');

gulp.task('typescript', function () {
    gulp.src(["ClientApp/**/*.ts"])
        .pipe(sourcemaps.init())
        .pipe(typescript())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wwwroot/client-app'))    
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered when an Angular expression is changed after it has already been checked in a dynamically generated component

I am encountering a problem with Angular and the CdkPortal/CdkPortalHost from @angular/cdk. I developed a service that allows me to associate a CdkPortalHost with a specified name and set its Component at any given time. This is how the service is struc ...

angulartypescriptangular-material2angular5

Ways to assign a random color to every card displayed in a screenshot in Angular 6?

[![enter image description here][1]][1] This is the HTML component code: <div class="row"> <div class="col-lg-3 col-md-3 col-sm-6 col-12"> <a href="javascript:void(0)" (click)="openModal()"> <div class="card card-box HYT ...

angulartypescriptparse-server

A custom function that changes the state of a nested object using a specified variable as the key argument

My goal is to update the state of an object using a function called updateDatas. This function takes the arguments key, possibly subKey, and value. interface Datas { code: number; item1: Item; } interface Item { id: number; name: string; } const ...

reactjstypescriptsetstate

Automatic browser refresh with the `bun dev` command

Currently experimenting with the latest bun platform (v0.1.6) in conjunction with Hono. Here are the steps I followed: bun create hono test-api cd test-api bun dev After running the server, the following message appears: $ bun dev [1.00ms] bun!! v0.1.6 ...

typescripthot-reloadbunhono

Tips for sending data from a child component to a parent component

I am facing an issue with my components setup. I have 3 components - 2 child components and 1 parent component. The parent component has a save button, and in order to get data from the child components in the parent component, I have implemented the follo ...

javascriptangulartypescript

What's the reason behind my REST API delivering a 401 error code?

New Update After being encouraged to implement debug logs, I have discovered that the issue lies with Spring reporting an invalid CSRF token for the notices controller. I have compared the headers generated by Postman and the fetch requests, but found no ...

jsontypescriptspringrestspring-security

What is the best approach for creating a basic test to evaluate the functionality of MatDialog in Angular 2?

I'm currently working on a component that looks like this: @Component({ selector: 'my-form', templateUrl: './my-form.component.html', }) export class MyFormComponent implements OnInit { @Input('company') company: ...

javascriptangulartypescriptunit-testingjasmine

The error in Angular states that the property 'length' cannot be found on the type 'void'

In one of my components, I have a child component named slide1.component.ts import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'app-slide1', templateUrl: './slide1.component. ...

angulartypescript

Response type tailored to specific input type

I am working on defining types for a simple function called fun. Below are the interfaces for the input and response: interface Input { test1?: true test2?: true test3?: true } interface Res { test1?: string test2?: string test3?: string } N ...

typescript

Error: TypeORM entity import token is not recognized

Currently, I am facing a peculiar error while transpiling my TypeScript code to JavaScript using TypeORM. The error message that pops up is as follows: (function (exports, require, module, __filename, __dirname) { import { Entity, PrimaryGeneratedColumn, M ...

typescripttypeorm

Tips for prohibiting the use of "any" in TypeScript declarations and interfaces

I've set the "noImplicitAny": true, flag in tsconfig.json and "@typescript-eslint/no-explicit-any": 2, for eslint, but they aren't catching instances like type BadInterface { property: any } Is there a way to configure tsco ...

typescripttypeseslinttsc

Challenges with Type Casting in TypeScript

Upon reviewing a specific piece of code, I noticed that it is not producing any compile time or run time errors even though it should: message: string // this variable is of type string -- Line 1 <br> abc: somedatatype // lets assume abc is of some ...

typescript

Encountering "Cannot write file" errors in VSCode after adding tsconfig exclude?

When I insert the exclude block into my tsconfig.json file like this: "exclude": ["angular-package-format-workspace"] I encounter the following errors in VSCode. These errors disappear once I remove the exclude block (However, the intended exclusion fu ...

javascripttypescriptvisual-studio-code

Storing multiple items in an array using LocalForage

I have a challenge where I need to add multiple items to an array without overriding them. My initial approach was like this: localForage.getItem("data", (err, results) => { console.log('results', results) // var dataArray ...

javascripttypescriptionic2localforage

Tips for transforming a JSON Array of Objects into an Observable Array within an Angular framework

I'm working with Angular and calling a REST API that returns data in JSON Array of Objects like the example shown in this image: https://i.stack.imgur.com/Rz19k.png However, I'm having trouble converting it to my model class array. Can you provi ...

jsonangulartypescriptobservablehttpclient

The data structure '{ one: string; two: string; three: string; }' cannot be directly assigned to a 'ReactNode'

Here is the Array of Items I need to utilize const prices = [ { name: "Standard", price: "149EGP", features: [ { one: "Add 2500 Orders Monthly", two: "Add Unlimited Products And Categories", three: "Add 20 other ...

javascriptreactjstypescriptnext.js

Typescript error in Express: The property 'body' is not found on the type 'Request'

I found this code snippet: import bodyParser from 'body-parser'; import express, { Router } from 'express'; const router: Router = express.Router(); router.use(bodyParser.json()); router.post('/api/users/signup', (req: expr ...

node.jstypescriptexpressbackendbody-parser

The NgModel does not accurately show the chosen value in a dropdown menu that is populated based on the selection of another dropdown

After the component loads, I expect both mainTask and mainJob to be displayed as selections in the dropdown. However, only mainTask is updated while mainJob remains unchanged in the UI. Interestingly, when I manually choose a value from the taskList dropdo ...

javascriptangulartypescriptangular-ngmodel

How can I prevent the installation of my Ionic 2 application on devices that have been rooted or jailbroken?

I am currently working on a project involving an Ionic 2 and Angular 2 application. I need to implement a feature that checks whether the device is rooted (in the case of Android) or jailbroken (in the case of iOS). I have experimented with various packag ...

angulartypescriptcordovaionic2

Angular obscured the referencing pointer

After updating Angular, I encountered issues with my code. Previously, the following code worked fine: @Component({ templateUrl: './some.component.html', styleUrls: ['./some.component.scss'] }) export class SomeComponent { ... p ...

angulartypescriptd3.js