Errors from TypeScript compilation are not appearing when using gulp-typescript in Visual Studio 2015

There was a time not too long ago when everything was running smoothly, but now I'm at a loss as to what has changed (other than updating to ASP.NET Core RC2 and adding some extensions for VS2015).

The problem arises when I run a Gulp task from VS2015 to compile my typescript files. If there's an error, all it shows is:

[10:02:54] Compiling typescript into javascript
[10:02:56] TypeScript: 1 semantic error
[10:02:56] TypeScript: emit succeeded (with errors)
[10:02:56] Finished 'compile' after 2.47 s
Process terminated with code 0.

without providing any details about the actual error.

Running in CMD:

$ tsc -v
Version 1.8.10

In Package Manager console of VS2015:

PM> tsc -v
Version 1.8.10

I believe that VS2015 is using the same typescript compiler in PATH, which should not be a problem. I've also tested with version 1.7 and encountered the same issue.

My gulp task looks like this:

gulp.task('compile', function () {
    log('Compiling typescript into javascript');
    return gulp
            .src(config.allts)
            .pipe($.sourcemaps.init())
            .pipe($.typescript({
                noImplicitAny: true,
                target: 'ES5'
            }))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest(config.compileFolder));
});

And I'm using:

"gulp-typescript": "2.10.0"

although I have tested with the latest version:

"gulp-typescript": "2.13.4"

but with no success.

My understanding is that I shouldn't need a tsconfig.json file at the root of my project since I'm using gulp-typescript and passing the compilerOptions in the gulp task itself. Therefore, I removed the tsconfig.json file I had because it wasn't being utilized.

If I remove all the compilerOptions from my gulp task:

gulp.task('compile', function () {
    log('Compiling typescript into javascript');
    return gulp
            .src(config.allts)
            .pipe($.sourcemaps.init())
            .pipe($.typescript({
                //removed
            }))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest(config.compileFolder));
});

I encounter more semantic errors without descriptions.

[10:12:57] Compiling typescript into javascript
[10:13:00] TypeScript: 184 semantic errors
[10:13:00] TypeScript: emit succeeded (with errors)
[10:13:01] Finished 'compile' after 3.83 s
Process terminated with code 0.

confirming that the options are indeed being used.

In CMD, if I navigate to the folder containing a typescript file and try compiling it with:

C:/>Sample/app> tsc mytestfile.ts

I can see all typescript compilation errors properly.

Can anyone help diagnose what might be wrong with my setup in VS2015 or gulp-typescript?

UPDATE: Switched to gulp-tsc from gulp-typescript and everything works fine. The issue seems to be with gulp-typescript

gulp.task('compile', function () {
    log('Compiling typescript into javascript');
    return gulp
            .src(config.allts)
            .pipe($.sourcemaps.init())
            .pipe($.tsc({
                noImplicitAny: true,
                target: 'ES5'
            }))
            .pipe($.sourcemaps.write('.'))
            .pipe(gulp.dest(config.compileFolder));
});

Answer №1

After some investigation, I have managed to uncover part of the solution. Running gulp-typescript from a nodejs command prompt will reveal any errors encountered during the process. However, the error messages generated by gulp-typescript are not displayed in Visual Studio's task runner.

To address this issue, you can modify the reporter used for typescript as follows (simply add this function to your gulpfile.js)

function visualStudioReporter() {
    return {
        error: function (error) {
            //This method works
            gutil.log("Typescript: error", error.message);
            //This, however, is not visible
            console.error(error.message);
        },
        finish: ts.reporter.defaultReporter().finish
    };
}

You can then integrate the reporter into your workflow like so

var ts = require("gulp-typescript")

gulp.task("compile", function() {
    gulp.src("./**/*.ts")
       .pipe(ts(tsProject, undefined, visualStudioReporter()))
});

Answer №2

If you are encountering an issue with Microsoft .Net Core 1.0.0 RC2 Tooling Preview 1 installed, specifically related to TypeScript errors not being shown, there is a workaround available. The problem can be found in this Github issue: After installing Preview 1 of the tooling, TypeScript errors aren't shown #526

Update: Following the release of .Net Core 1 and Tooling Preview 2, updating or installing the release version of .Net Core 1.0 resolves the issue.

To address this issue before the update, uninstalling Tooling Preview 1 and reinstalling web development tools for Visual Studio 2015 was a viable solution.

Alternatively, if you do not require the functionality of .Net Core 1 RC2 Preview, following the steps outlined in the bug report on Github could resolve the typescript error display problem:

  1. Uninstall 'Microsoft .Net Core 1.0.0 RC2 - VS 2015 Tooling Preview 1'
  2. Reinstall Web Development tools for Visual Studio 2015 through add/remove programs, Modify option.

By following these steps, users have reported successfully viewing typescript error messages in Task Runner Explorer once again.

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

The combination of browserify, gulp, and react is resulting in an error message stating

I've recently embarked on a new project and need to set up the environment. My team members are all using OS X, but I'm working with Ubuntu 14. While the project runs smoothly for them, I'm encountering difficulties in getting everything set ...

specialized registration process with auth0 in Angular

I am attempting to enhance the user information in a single call. The process involves first signing up with a username and password on Auth0, followed by adding additional userinfo to the database during the callback phase. However, I am encountering diff ...

Break free/Reenter a function within another function

Is there a way to handle validation errors in multiple task functions using TypeScript or JavaScript, and escape the main function if an error occurs? I am working in a node environment. const validate = () => { // Perform validation checks... // ...

Do not consider node_modules folder in the list of "issues"

Currently, I am executing the following task: { "taskName": "tsc watch", "command": "tsc -w", "type": "shell", "problemMatcher": "$tsc-watch" } using this specific tsconfig setup: { "compileOnSave": true, "files": ...

Tips for implementing Conditional validation in form models in anugular2

I need to determine whether the required validator for Address should be applied based on the value of this.type being 2. Below is the code snippet I am using for form validation: buildForm() { this.orgForm = this.fb.group({ Name: [this.addUpd ...

The rendering process in ag-grid is resulting in the service component initialized from an event to become null

Currently, I am utilizing ag-grid and need help understanding a specific issue. In my method for preparing GridOptions, I have set up an onCellValueChanged event that triggers a service component to access the database and populate the data. However, when ...

Seamlessly linking TypeScript projects on both client and server side

My root project includes both the server and client side apps structured as follows: -- server -- node_modules -- index.ts -- package.json -- ... -- client -- node_modules -- index.ts -- package.json -- html/ -- css/ -- ... I'm s ...

Using an external HTML file to import a template into Vue.js single file components

I've been tackling a Vuejs project that involves using vue-property-decorator in single file components. I'm trying to figure out how to import the template from an external HTML (or different) file, but so far I haven't found a solution. I& ...

Oops! An issue occurred during the `ng build` command, indicating a ReferenceError with the message "Buffer is not defined

I'm facing an issue while trying to utilize Buffer in my angular component ts for encoding the Authorization string. Even after attempting npm i @types/node and adding "node" to types field in tsconfig.json, it still doesn't compile with ng buil ...

typescript: define the type of an object that behaves like a map

My current approach involves utilizing an object to store a map, where keys are strings and values are of a fixed type T. Upon looking up a key in the object, the type inference automatically assigns it the type T. However, there is a possibility that it ...

Creating an Angular Confirm feature using the craftpip library

Trying to utilize the angular-confirm library, but finding its documentation unclear. Implementing it as shown below: Library - In button click (login.component.ts), ButtonOnClickHandler() { angular.module('myApp', ['cp.ngConfirm']) ...

The module '@react-navigation/native' is missing or does not have its corresponding type declarations

I'm encountering an issue with my react-native app using expo and typescript. After installing the necessary libraries via npm, I can confirm they are available in the node_modules folder (see image below). https://i.sstatic.net/6riSc.png The same pr ...

My default value is being disregarded by the Angular FormGroup

I am facing an issue with my FormGroup in my form where it is not recognizing the standard values coming from my web api. It sets all the values to null unless I manually type something into the input field. This means that if I try to update a user, it en ...

Issue with accessing storage in Ionic Storage (Angular)

Currently, I am attempting to utilize Ionic storage for the purpose of saving and loading an authentication token that is necessary for accessing the backend API in my application. However, I am encountering difficulties retrieving the value from storage. ...

The feature of using a custom find command in Cypress does not support chaining

I am interested in developing a customized Cypress find command that can make use of a data-test attribute. cypress/support/index.ts declare global { namespace Cypress { interface Chainable { /** * Creating a custom command to locate a ...

What is the most efficient way to update data multiple times by mapping over an array of keys in a react hook?

My question might not be articulated correctly. I'm facing an issue with dynamically translating my webpage using Microsoft's Cognitive Services Translator. I created a react hook for the translator, which works well when I need to translate a si ...

Enable one button within a div to expand to accommodate the text

We are facing an issue with modals where the text of the submit button is wrapping in some cases, which is not desired. The problem can be seen in the image below. Even though the buttons are the same size, the "Create User" text is getting wrapped. ...

Error message 'Module not found' occurring while utilizing dynamic import

After removing CRA and setting up webpack/babel manually, I've encountered issues with dynamic imports. https://i.sstatic.net/CRAWr.png The following code snippet works: import("./" + "CloudIcon" + ".svg") .then(file => { console.log( ...

The Clerk authMiddleware() function has been defined in the middleware.ts file located at the root of the application, but it is not being utilized

import { authMiddleware } from "@clerk/nextjs"; export default authMiddleware({}); export const config = { matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)&apos ...

What are some ways to create a dynamic child server component?

Take a look at the following code snippet // layout.tsx export default function Layout({children}: any) { return <div> {children} </div> } // page.tsx export const dynamic = "force-dynamic"; const DynamicChild = dynamic( ...