gulp 4.0.2 not able to Compile

Question

I just upgraded to Angular 4.4.7 and typescript 2.7.2. I am trying to run gulp 4.0.2 and compile my ts files but I am getting this error.

[12:50:49] Did you forget to signal async completion? node:events:498 throw er; // Unhandled 'error' event ^

**
 * Compile TypeScript sources
 */
gulp.task("compile", gulp.series("clean", function () {
    return gulp.src("./App/**/*.ts")
        .pipe(inlineNg2Template({
            base: "/",                  // Angular2 application base folder
            target: "es6",              // Can swap to es5
            indent: 2,                  // Indentation (spaces)
            useRelativePaths: false,     // Use components relative assset paths
            removeLineBreaks: false,     // Content will be included as one line
            templateExtension: ".html", // Update according to your file extension
            templateFunction: false    // If using a function instead of a string for `templateUrl`, pass a reference to that function here
        }))
        .pipe(typescript(tsProject))
        .pipe(ignore("References.js"))
        .pipe(gulp.dest("dist/App"))
        .on('error', function (err) { console.log(err.message); });
}));

Answer 1

The call to on is problematic, because on returns a new stream that does not end when the underlying stream ends.

.on('error', function (err) { console.log(err.message); });

If you remove the line above, things will work again.

If you really need to handle the error event, you can do it, but you should still return the piped stream from the task function.

gulp.task("compile", gulp.series("clean", function () {
    const stream = gulp.src("./App/**/*.ts")
        .pipe(inlineNg2Template({
            base: "/",                  // Angular2 application base folder
            target: "es6",              // Can swap to es5
            indent: 2,                  // Indentation (spaces)
            useRelativePaths: false,     // Use components relative assset paths
            removeLineBreaks: false,     // Content will be included as one line
            templateExtension: ".html", // Update according to your file extension
            templateFunction: false    // If using a function instead of a string for `templateUrl`, pass a reference to that function here
        }))
        .pipe(typescript(tsProject))
        .pipe(ignore("References.js"))
        .pipe(gulp.dest("dist/App"));
    stream.on('error', function (err) { console.log(err.message); });
    return stream;
}));

Note though that gulp already prints messages from error events, I would not repeat that process manually.