`No results when using gulp-typescript`

Within my tasks.json file, I have two tasks - a build-task and a gulp task that utilizes gulp-typescript. Unfortunately, the latter is not functioning as expected, and the reason behind this issue eludes me. Both tasks are configured to use the same tsconfig.json configuration file.

The gulp-task ("tsc") runs without any errors but fails to generate the src/test.js file specified in the tsconfig.json (outFile). After thorough investigation, I am unable to locate the generated file anywhere within the folder structure. On the contrary, the build task successfully generates the file.

I suspect there might be a version inconsistency between typescript and gulp-typescript causing this problem. With the frequent updates and changes, finding the accurate solution through online search results has proven to be quite challenging.

Initially, I assumed that gulp-typescript functions as a seamless wrapper around typescript. However, this assumption appears to be incorrect as it seems to possess its own method of generating sourcemaps and disregards certain settings from tsconfig.json.

tasks.json:

{
    // Refer to https://go.microsoft.com/fwlink/?LinkId=733558
    // for detailed documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "typescript",
            "tsconfig": "tsconfig.json",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "taskName": "tsc",
            "command": "gulp.cmd",
            "args": ["tsc"]
        }
    ]
}

gulpfile.js:

var gulp = require('gulp'),
    less = require('gulp-less'),
    plumber = require('gulp-plumber'), 
    uglify = require('gulp-uglify'),
    notify = require('gulp-notify'),
    concat = require('gulp-concat'),
    template = require('gulp-angular-templatecache'),
    htmlminifier = require('gulp-html-minify'),
    chmod = require('gulp-chmod'),
    cachebust = require('gulp-cache-bust'),
    runSequence = require('run-sequence'),
    tsc = require("gulp-typescript"),
    webserver = require('gulp-webserver'),
    flatten = require('gulp-flatten'),
    gutil = require('gulp-util'),
    gulpif = require('gulp-if'),
    debug = require('gulp-debug'),
    rename = require('gulp-rename'),
    sourcemaps = require('gulp-sourcemaps'),
    argv = require("yargs").argv;
...
let compileTypescript = function() {
    var tsProject = tsc.createProject("tsconfig.json");

    var tsResult =
        tsProject
            .src()
            .pipe(sourcemaps.init())
            .pipe(tsProject());

    return
        tsResult.js
            .pipe(sourcemaps.write())
            .pipe(gulp.dest('src'));
};

gulp.task('tsc', compileTypescript);

tsconfig.json:

    {

      "compileOnSave": false,
      "compilerOptions": {
        "target": "es5",
        "allowJs": false,
        "noImplicitUseStrict": true,
        "rootDir": "./src",
        "noEmitOnError": true,
        "module": "none",
        "moduleResolution": "node",
        "noImplicitReturns": true,
        "outFile": "src/test.js",
        "removeComments": true,
        "skipLibCheck": true,
        "allowUnreachableCode": false,
        "allowSyntheticDefaultImports": false,
        "allowUnusedLabels": false,
        "sourceMap": true,
        "declaration": false
      },
      "exclude": [
        "node_modules",
        "dist",
        "src/scripts/typings/node",
        "src/scripts/typings/jasmine",
        "src/**/*.js",
        "src/**/__*.*"
      ]
    }

package.json:

{
  "name": "Test",
  "author": {
    "name": "Test Company",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691d0c1a1d291d0c1a1d470a0604">[email protected]</a>",
    "url": "http://test.com/"
  },
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-connect":"5.0.0",
    "gulp-angular-templatecache": "2.0.0",
    "gulp-chmod": "2.0.0",
    "gulp-concat": "2.6.1",
    "gulp-flatten": "0.3.1",
    "gulp-html-minify": "^0.0.14",
    "gulp-debug":"3.1.0",
    "gulp-inject": "4.2.0",
    "gulp-less": "3.3.2",
    "gulp-rename":"1.2.2",
    "gulp-notify": "3.0.0",
    "gulp-plumber": "1.1.0",
    "gulp-rimraf": "0.2.1",
    "gulp-sourcemaps": "2.6.0",
    "gulp-tslint": "8.1.1",
    "gulp-typescript": "^3.2.1",
    "gulp-uglify": "3.0.0",
    "gulp-using": "0.1.1",
    "gulp-util": "3.0.8",
    "webpack-stream":"3.2.0",
    "gulp-if":"2.0.2",
    "gulp-watch": "4.3.11",
    "gulp-cache-bust": "1.1.0",
    "gulp-webserver": "0.9.1",
    "run-sequence":"2.1.0",
    "yargs": "8.0.2",
    "stream-combiner2": "1.1.1",
    "typescript": "2.4.2",
    "tslint":"5.5.0"
  }
}

Answer №1

If you're new to JavaScript like me, avoid manually adding extra line breaks to your code, especially within return statements;

I learned the hard way that my gulp-typescript task wasn't running properly because of this mistake. It took me nearly two days to troubleshoot. Oops.

Remember this best practice:

return tsResult.js
       .pipe(sourcemaps.write())
       .pipe(gulp.dest(project.source.path));

Instead of:

return 
     tsResult.js
       .pipe(sourcemaps.write())
       .pipe(gulp.dest(project.source.path));

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

Create a visual representation after inserting

I have created an input feature that allows me to paste images by using CTRL-V. The process involves copying an image from the browser and pasting it into the input field using CTRL-V. The result is an image in base64 format. Is there a way to manipulate ...

Getting a specific element of the "Event" object using javascript/typescript

Overview I successfully integrated a select box into my Vue.js/Nuxt.js application using Vuetify.js. I utilized the @change event to capture the selected value. <v-select v-model="selectedStartTime" :items="startTime" item ...

Unable to locate the _app.js file within my Next.js project

After using "npx create-next-app" to set up my NextJs project, I came across a situation where I needed to define TransactionContext in _app.js. However, I encountered the issue that this file is not included in my project. Any assistance would be greatly ...

``Can you provide guidance on excluding matching values from a dictionary object in a Angular project?

I've developed a function that takes a dictionary object and matches an array as shown below: const dict = { CheckAStatus: "PASS", CheckAHeading: "", CheckADetail: "", CheckBStatus: "FAIL", CheckBHeading: "Heading1", CheckCStatus: "FAIL", ...

Deactivating PrimeNG checkbox

I am currently facing an issue with disabling a PrimeNG checkbox under certain conditions by setting the disabled property to true. However, whenever I click on the disabled checkbox, it refreshes the page and redirects me to the rootpage /#. To troublesh ...

Combine two arrays into one

When attempting to combine two arrays, the result looks like the image linked below: https://i.sstatic.net/3FWMZ.png I want the merged array to resemble the following example: {0: {…}, storedArr: Array(2)} 0: address: "ifanio de los Santos Ave, Ma ...

The close button in Angular 4 is unresponsive until the data finishes loading in the pop-up or table

Having trouble with the Close button in Angular 4 popup/table The Pop Up is not closing after clicking anywhere on the screen. I have added backdrop functionality so that the pop-up closes only when the user clicks on the close icon. However, the close i ...

Examining the reasoning behind comparisons within an Ionic view

When looping through the results in an ion-list, I compare the values dynamically by using Angular's ngIf directive. <ion-list> // Loop the results <ion-item *ngFor="let protocole of protocoles"> <ng-template [ngIf]="{{value}} == ...

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

Leveraging .tsx components within nested .tsx components in React Native

Currently, I am delving into the world of building apps using TypeScript in React Native. Coming from a background as a Swift developer, adjusting to JavaScript and TypeScript has been an interesting journey. An observation that stood out to me is the cha ...

Is there a way to enhance the readability of intellisense output for Typescript generics using the Omit method?

Scenario: I have customized a third-party library for users by removing two properties from all functions in the library. I have implemented a function to achieve this, along with executing a bootstrap function if provided. Here is the code snippet: const ...

Angular 1.5 Karma unit test causes duplicate loading of ng-mock library

My current web app is built using Typescript 2.4.2 and compiled with the latest Webpack version (2.7.0). I am in the process of incorporating Karma tests utilizing Jasmine as the assertion library. Below is my karma configuration file: 'use strict& ...

Tips for modifying HTML template code within a Typescript document using Atom

There appears to be a current trend in Angular development where the template code is embedded within the Angular component, usually found in a Typescript or Javascript file. However, when attempting this approach, I noticed that I am missing html syntax ...

What triggers the execution of the catch method while chaining HTTP promises?

In my Angular application, I have developed a custom loaderService that displays a loading spinner while the back-end processes requests. Below is the code snippet: export class ComponentOne { constructor(loaderService: LoaderService, orderService: Orde ...

Developing a data table with JavaScript by parsing JSON data

Looking to generate a school timetable table using dummy JSON data. The JSON object structure is as follows: this._days=[ { "day": "", "config": {} }, { "day": "Monday", "config": { ...

The challenge of validating in Typescript and utilizing type inference

I am currently facing an issue with a function that resembles the one provided below (I have created a simplified example for discussion purposes): interface Variable { someMethod: () => void } const validateVariable(variable: Variable | undefined) { ...

What does the term "Typescript" indicate when referred to as a shorthand for a union of undefined and string as an

Could someone please confirm if these two are essentially the same? It seems a bit strange to me. interface TypeA { time: string | undefined; } interface TypeB { time?: string; } ...

Leverage the VTTCue Object in an Angular2 project using Typescript

I am looking to dynamically load subtitles onto a video. let subs:TextTrack = video.addTextTrack('subtitles'); for (let dataSrt of dataSrts) { let cue: any = new VTTCue( dataSrt['startTime'], da ...

Nuxt - It is not possible to use useContext() within a watch() callback

I'm currently utilizing version 0.33.1 of @nuxtjs/composition-api along with Nuxt 2. Here's a snippet from my component: import { defineComponent, useContext, useRoute, watch } from '@nuxtjs/composition-api'; export default defineCompo ...

What is the process for converting BitmapData from Flash into HTML canvas?

Currently facing a significant challenge as I transition from using Flash to JS. The issue lies in handling SOAP returned data, specifically when dealing with images stored as strings that need to be converted into BitmapData for use in Flash. Despite tryi ...