gulp-tsc cannot locate the src directory

I am currently working on developing a .NET Core application using Angular2, but I keep encountering the following error:

/wwwroot/NodeLib/gulp-tsc/src/compiler.ts' not found.

I'm having trouble pinpointing what I might be missing.

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "outDir": "../wwwroot/app",
    "types": []
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

package.json

{
  "name": "angular2withvs2015",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "~2.1.1",
    "@angular/compiler": "~2.1.1",
    "@angular/core": "~2.1.1",
    "@angular/forms": "~2.1.1",
    "@angular/http": "~2.1.1",
    "@angular/platform-browser": "~2.1.1",
    "@angular/platform-browser-dynamic": "~2.1.1",
    "@angular/router": "~3.1.1",
    "@angular/upgrade": "~2.1.1",
    "bootstrap": "3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "gulp": "3.9.1",
    "rimraf": "^2.5.4",
    "gulp-typescript": "^3.1.2",
    "typescript": "^2.0.7",
    "gulp-tsc": "^1.2.5",
    "@types/node": "6.0.40"
  }
}

Gulp.js

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

var gulp = require('gulp'),
 rimraf = require('rimraf');

gulp.task('clean', function (cb) {
    return rimraf('./wwwroot/NodeLib/', cb)
});

gulp.task('copy:lib', function () {
    return gulp.src('node_modules/**/*')
        .pipe(gulp.dest('./wwwroot/NodeLib/'));
});

gulp.task('copy:systemjs', function () {
    return gulp.src('Scripts/systemjs.config.js')
        .pipe(gulp.dest('./wwwroot/'));
});
var tsProject = ts.createProject('Scripts/tsconfig.json', {
    typescript: require('typescript')
});
gulp.task('ts', function () {
    var tsResult = gulp.src("Scripts/**/*.ts") // instead of gulp.src(...)
        .pipe(tsProject());

    return tsResult.js.pipe(gulp.dest('./wwwroot'));
});


gulp.task('watch', ['watch.ts']);
gulp.task('watch.ts', ['ts'], function () {
    return gulp.watch('Scripts/**/*.ts', ['ts']);
});

gulp.task('default', ['watch']);

Answer №1

An error has been identified within the file \node_modules\gulp-tsc\tsconfig.json

"files": [
    "src/compiler.ts",
    "src/shellescape.ts",
    "src/tsc.ts"
  ]

During the execution of the gulp task copy:lib, the contents of node_modules are copied to /wwwroot/NodeLib/

It seems that not all content is necessary, only the content in @angular. To resolve this, a new gulp task was created as follows:

gulp.task('copy:lib@angular', function () {
    return gulp.src('node_modules/@angular/**/*')
        .pipe(gulp.dest('./wwwroot/NodeLib/@angular/'));
});

Following the creation of the copy:lib@angular task and deletion of the existing NodeLib folder in wwwroot, executing the task resulted in a new NodeLib folder containing only the @angular folder. This successfully resolved the compile error in Visual Studio.

Answer №2

The transition from 1.2.* to 1.3.* of gulp-tsc doesn't seem to have gone smoothly. It's unclear what the main contributor was aiming for, but as of now (1.3.2), it still doesn't work with VS2015. In my opinion, you're left with 2 choices:

  1. Use gulp-tsc directly from git and either copy the src directory to NodeLib/ or remove tsconfig.jason from there. Either way, this will likely lead to other dependencies breaking during a clean VS build.

  2. When copying to NodeLib, make sure to include not just @angular as advised by Laksiri Fernando, but also every package referenced in your systemjs.config.js file and anything referred to in the _Layout.cshtml environment tag.

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

401 error code for all CRUD operations in the .NET Framework API

So, I've been working on a project that consists of a .Net framework API and an Angular frontend. I recently implemented OWIN JWT authentication, but now I'm encountering a persistent 401 error no matter what I try. I've attempted numerous ...

Adding types to computed properties in Vue 3's Composition API is a seamless process

Having an issue where I am trying to add type to computed but keep encountering this error: Overload 1 of 2, '(getter: ComputedGetter<AuthFormType>, debugOptions?: DebuggerOptions | undefined): ComputedRef<AuthFormType>', gave the fol ...

Combining results from multiple subscriptions in RxJS leads to a TypeScript compiler error

I am utilizing an Angular service that provides a filterObservable. To combine multiple calls, I am using Rx.Observable.zip(). Although it functions as expected, my TypeScript compiler is throwing an error for the method: error TS2346: Supplied paramete ...

What is the best way to save a Map for future use in different components?

Let's say I define an enum like this: export enum SomeEnum { SomeLongName = 1, AnotherName = 2 } Within my display components, I'm utilizing an enum map to translate the enum values into strings for presentation on the web app: enumMap = new Map ...

Using Angular CLI to enhance Angular 2 with Material Design elements

Up until now, I have been using the Angular 2 quickstart to kick off new projects. However, I recently made the decision to switch over to using the Angular 2 CLI and created a whole new project through it. I had to transfer all my files and re-install ...

Combining one item from an Array Class into a new array using Typescript

I have an array class called DocumentItemSelection with the syntax: new Array<DocumentItemSelection>. My goal is to extract only the documentNumber class member and store it in another Array<string>, while keeping the same order intact. Is th ...

Eliminate the alert message that appears when dynamically rendering a React styled component

When checking the browser console, I noticed a warning that reads as follows: react_devtools_backend.js:3973 The component styled.div with the id of "sc-dmRaPn" has been created dynamically. You may see this warning because you've called sty ...

Issue with accessing custom read/write location during runtime in ngx-translate HTTP loader

After logging in, I need to load JSON files and then download a file at a specific location using a custom HTTP loader (TranslateHttpLoader). The assets/i18n/ folder is not writable with fileSystemModule.knownFolders.currentApp(), so I tried using fileSyst ...

Exploring subobjects while fetching observables (typescript/angular)

When retrieving JSON from an API into an Angular service, I am working with a collection of objects structured like this: { "data": { "id": 1, "title": "one" }, "stats" : { "voteCount": 8 } } I am particularly interested in the ' ...

Setting up Angular material typography styling

I am struggling to make this work on my web application. As a solution, I decided to create a new Angular 15 project from the command line interface and added material using the command "ng add @angular/material". In order to simplify things, I modified a ...

Encountering a problem while installing an Angular 2 npm package from an enterprise registry

We are utilizing an enterprise repository for NPM packages that mirrors the traditional registry "http://registry.npmjs.org/". I am currently attempting to fetch the following packages (listed in package.json) "@angular/common": "2.0.0-rc.4", "@angular/co ...

The introduction of an underscore alters the accessibility of a variable

When working in Angular, I encountered a scenario where I have two files. In the first file, I declared: private _test: BehaviorSubject<any> = new BehaviorSubject({}); And in the second file, I have the following code: test$: Observable<Object& ...

Trigger a response according to the information received from the preceding action

I'm facing an issue with dispatching actions in sequence after the completion of the previous one. My goal is to dispatch an action (let's call it getDetails), use the data from this action to dispatch another action (getUserLists), and finally ...

Optimizing the sorting of object properties based on specific values (numbers or strings)

My goal is to simplify the process of sorting both number and string values. The first step involves checking if the parameter I've passed (which belongs to the DeliveryDetailsColumns constants) matches another parameter from a different type (Electro ...

Error: The script "build:universal" is required but not found in the

I encountered errors while attempting to run my Angular application on the server side: npm ERR! missing script: build:universal npm ERR! A complete log of this run can be found in: npm ERR! /home/training/.npm/_logs/2018-10-03T11_50_40_593Z-debug.lo ...

Where could my provider/service have gone missing?

After carefully following the guidelines in the official Angular 2 documentation, I created a CoreModule to handle my services. I also looked into some suggestions on: Providing core singleton services module in Angular 2 Resolving 'No Provider For ...

The absence of @angular/compiler in the bundle file is causing an issue with Angular es

I've developed a shell application that operates using and https://github.com/systemjs/systemjs to manage its various micro-frontends. Recently, I created a new Angular application and aimed to integrate it with the esBuild builder tool. Upon runni ...

Troubleshooting CSS Issues in ASP.NET Boilerplate

I am attempting to apply a CSS style to a text input similar to the one found on the CreateUser default page. However, I am encountering an issue where the blue line under the textbox does not appear when I navigate away from and then return to the page. ...

What is the correct way to declare a variable with a generic type parameter?

Exploring the following code snippet that showcases a React component being defined with a type argument named TRow: function DataTable<TRow> ({ rows: TRow[] }) { return ( ) } Prior to this implementation, ES6 was utilized and components were c ...

Utilizing a React npm component within an Angular project: A step-by-step guide

After successfully creating a simple react component and publishing it to the NPM registry, I encountered an issue when trying to use the same plugin in an Angular project. The custom plugin can be found at: https://www.npmjs.com/package/reactcustomplugin ...