Gulp: Ignoring files with the extension .service.ts

I'm currently facing an issue with my task runner in the gulpfile where it is targeting all my .ts files except for resource.service.ts.

Here are the files that are accepted and targeted by the gulp script:

  • main.ts
  • resource.ts
  • resource-list.component.ts
  • test.component.ts
  • test.module.ts

The specific task responsible for targeting the resource.service.ts file is the app tasks.

Below you will find my gulp script:

//References to required plugins
var gulp = require("gulp"),
    gp_clean = require('gulp-clean'),
    gp_concat = require('gulp-concat'),
    gp_sourcemaps = require('gulp-sourcemaps'),
    gp_typescript = require('gulp-typescript'),
    gp_uglify = require('gulp-uglify'),
    gp_typescript_config = require('gulp-ts-config');

//Define source paths
var srcPaths = {
    app: ['app/main.ts', 'app/**/*.ts'],
    js: ['js/**/*.js',
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/typescript/lib/typescript.js']
    , js_angular: ['node_modules/@angular/**']
    , js_rxjs: ['node_modules/rxjs/**']
};

//Define destination paths
var destPaths = {
    app: 'wwwroot/app/',
    app_local: 'app/',
    js: 'wwwroot/js/',
    js_angular: 'wwwroot/js/@angular/',
    js_rxjs: 'wwwroot/js/rxjs/' 
};

//Compile, minify, and create sourcemaps for typescript files and place them in wwwroot/app, along with the js.map files
gulp.task('app', function() {
    return gulp.src(srcPaths.app)
        .pipe(gp_sourcemaps.init())
        .pipe(gp_typescript(require('./tsconfig.json').compilerOptions))
        .pipe(gp_uglify({ mangle: false }))
        .pipe(gp_sourcemaps.write('/'))
        .pipe(gulp.dest(destPaths.app));
});

//Delete contents of wwwroot/app
gulp.task('app-clean', function () {
    return gulp.src(destPaths.app + "*", { read: false })
        .pipe(gp_clean({ force: true }));
});

//Copy js files from external libraries to wwwroot/js
gulp.task('js', function () {
    gulp.src(srcPaths.js_angular)
        .pipe(gulp.dest(destPaths.js_angular));
    gulp.src(srcPaths.js_rxjs)
        .pipe(gulp.dest(destPaths.js_rxjs));

    return gulp.src(srcPaths.js)
        .pipe(gulp.dest(destPaths.js));
});

//Delete contents of wwwroot/js
gulp.task('js-clean', function () {
    return gulp.src(destPaths.js + "*", { read: false })
        .pipe(gp_clean({force: true }));
});


//Watch files and act on change
gulp.task('watch', function () {
    gulp.watch([srcPaths.app, srcPaths.js], ['app', 'js']);
});

//Global clean
gulp.task('cleanup', ['app-clean', 'js-clean']);

//Default task
gulp.task('default', ['app', 'js', 'watch']);

This code is intended for use within Visual Studio 2017 environment.

Answer №1

After some troubleshooting, I was able to find the solution on my own. It turned out that gulp was having trouble with two .ts files named resource (resource.ts and resource.service.ts). By renaming resource.service.ts to resourceservice.service.ts, I successfully targeted the file in gulp like the rest of the project's files.

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

Creating a read-only DIV using Angular - a step-by-step guide

Is there a simple way to make all clickable elements inside a div read only? For example, in the provided HTML code, these divs act like buttons and I want to disable them from being clicked. Any tips or shortcuts to achieve this? Thank you. #html < ...

Triggering event within the componentDidUpdate lifecycle method

Here is the code snippet that I am working with: handleValidate = (value: string, e: React.ChangeEvent<HTMLTextAreaElement>) => { const { onValueChange } = this.props; const errorMessage = this.validateJsonSchema(value); if (errorMessage == null ...

Exploring the archives of PubNub within Angular5

I've been working on integrating PubNub history into my web app, but I'm currently only able to view it in the console. Here's what I have so far: pubnub.history( { channel: 'jChannel', reverse: false, ...

Can you use the useCallback function within a nested callback function?

within component A: const retrieveOnClick = useCallback( (rec: GenericRec): (() => void) => () => { setSelectedRecord(rec); }, [], ); inside component B which is a child of A: const displayRecord = useCallback( (row: Row& ...

Tips for updating the localhost name in Angular 4 during development for SSL testing

I've been attempting to switch my hosting environment from localhost/ to a domain like www.example.com. I edited the configuration in my hosts file (sudo nano /private/etc/hosts) and added the following lines, then cleared my DNS cache using dscacheut ...

Instructing an Angular element to refresh its content

A situation arises where a component takes a document object as an @Input() and displays all the replies associated with that document. The component is used like this: <app-replies *ngIf="replies" [doc]="doc"></app-replies> Now, if there is ...

There was an unexpected error: Module 'restore-cursor' not found

Has anyone else encountered this specific problem with Angular 11 while using ng serve? The issue stems from the following stack trace: C:\Users\x\Desktop\codebase\app\node_modules\cli-cursor\index.js C:\User ...

What is the best way to retrieve the Base64 string from a FileReader in NextJs using typescript?

My goal is to extract a string from an object I am receiving in the response. const convertFileToBase64 = (file: File): Promise<string> => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.r ...

What is causing my custom Angular 2 dropdown to not populate @ContentChildren?

Recreating the appearance of a Fabric-style dropdown for Angular 2 is my current project. There are two key elements that I need to focus on: I'm making use of ngModel The dropdown component is unaware of its children until queried. The dropdown ite ...

Is there a way to test the syntax of mocking a service in Angular 2 to call a local json-server instead of a remote endpoint?

I am currently working on writing a unit test to verify that a property in my Angular 2 component is populated after a service call that returns a promise. Within my component, there is a method: getListItems() { this.employeeService.loadEmployees(). ...

How can Angular CLI prevent the submission of an HTML form unless a previous option has been selected

I am currently working on a form that contains select fields with various options pre-populated. <form [formGroup]="selectVehicleForm"> <select formControlName="Manufacturer"> <option *ngFor='let ...

If a component does not have a specified return type annotation, it will default to an 'any' return type

I'm struggling to understand the typescript error that keeps popping up, it says: 'MyGoogleLogin', which doesn't have a return-type annotation, is being given an implicit 'any' return type. All I want is for the component t ...

Module augmentations do not allow for exports or export assignments

import { Request as ExpressRequest, Response as ExpressResponse } from 'express'; declare module 'kvl' { export = kvl; } declare const kvl: { ValidationDone:(param:(error: any, response: ExpressResponse) => void) => void; ...

Retrieve the value of one of the two variables that undergo a change in value

In my current project, I am dealing with a function that takes in two variables. These variables are subject to change at any point during the execution of the program. My requirement is to identify which variable has changed so that further operations can ...

Every variable declaration that follows must match the data type of the initial declaration

Here's the link I'm using to kickstart a sample node js project with webworker-thread: https://www.npmjs.com/package/webworker-threads Below is my TypeScript code snippet: var Worker = require('webworker-threads').Worker; var worker ...

Using the angular routerLink with query parameters derived from an enumerated key

I have a component that looks like this: export enum QueryParamsEnum { node = 'nodeId' } export class Component { key = QueryParamsEnum.node; } Now, I want to use the key as part of the queryParams in my template like this: <a [rou ...

The performance of the Ionic App leaves much to be desired as it lags

I am currently working on an Ionic3 App using Angular, and while I understand that it is not a native app like Android or Swift, I am experiencing very poor performance. When I launch the app, I encounter a black screen for 1-2 seconds followed by a splash ...

Element not recognized: <my-company-form-extra> - have you properly registered this component?

I've been attempting to render a component using the is directive <template> <div> <v-tabs v-model="currentTab" fixed-tabs> <v-tab v-for="(item, i) in tabItems" :key="i">{{ item }} < ...

Passing data from a container component to a Redux Form component in React with TypeScript

One of my Form container components looks like this: class PersonalDetailContainer extends React.Component<PropTypes> { onSubmit = async (fields: PersonalFields) => { this.props.savePersonalDetail(fields); }; render(): JSX.Element { ...

Discover an item in Angular by identifying an object through the given Id within the primary entity

Imagine having 2 different Objects Item _id itemName categoryId Category _id categoryName categoryDescription With Angular, the goal is to link the categoryId in Item with the corresponding categoryName and categoryDescription, resulting in a final obje ...