Encountering issues with Typescript build due to errors within the node_modules directory

I've encountered errors while running a typescript build in my project's node_modules folder. Despite having it excluded in the tsconfig.json file, the errors persist. What's puzzling is that another identical project doesn't throw these errors even though they share the same gulpfile.js, tsconfig.json, and node_modules setup. What else should I investigate?

Errors:

c:/Dev/streak-maker/node_modules/angular2/src/core/change_detection/parser/locals.d.ts(3,14): error TS2304: Cannot find name 'Map'.
c:/Dev/streak-maker/node_modules/angular2/src/core/render/api.d.ts(13,13): error TS2304: Cannot find name 'Map'.
...

tsconfig.js

{
  "version": 3,
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    ...
  },
  "exclude": [
    "node_modules",
    "jspm_packages"
  ]
}

gulpfile.js (running the build-typescript task)

/// <binding Build='default' />

var del = require('del'),
    gulp = require("gulp"),
    ts = require('gulp-typescript'),
    watch = require('gulp-watch');

var webproj = "./src/StreakMaker.Web/";
var webroot = webproj + "wwwroot/";
...
typescriptnpmgulptscgulp-typescript

Answer №1

I had a similar issue and found a solution that worked for me.

In the TS file where you have the import {bootstrap} line, try adding this at the top:

///<reference path="../node_modules/angular2/typings/browser.d.ts"/>

Make sure to adjust the path accordingly based on your file structure.

Answer №2

If you want to disable type checking for declaration files (*.d.ts), you can simply add the skipLibCheck property with a value of true to your tsconfig.json:

{
  "compilerOptions": {
    [...]
    "skipLibCheck": true
  },
  "include": ["./src/**/*.*"],
  "exclude": [
    "node_modules"
  ]
}

This configuration will allow skipping the type checking process for declaration files.

Credit goes to the original source

Answer №3

If your focus is on ES5, make sure to include "node_modules/typescript/lib/lib.es6.d.ts" in the tsconfig.json configuration file:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "outDir": "built",
        "rootDir": ".",
        "sourceMap": false
    },
    "files": [
      "helloworld.ts",
      "node_modules/typescript/lib/lib.es6.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

Answer №4

Although this method

/// <reference path="../typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app/main';

bootstrap(AppComponent);

is effective, when utilizing gulpjs I personally prefer incorporating typings file directly into the corresponding gulpjs task source instead of cluttering the source file with comments. For example:

gulp.task('typescript', function () {
  return gulp
    .src([
      'typings/browser.d.ts',
      tsSrc + '**/*.ts'
    ])
    .pipe(sourcemaps.init())
    .pipe(typescript(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(appSrc + 'js/'));
});

Answer №5

If you are using the RC1 demo, make sure to include the shim provided by the core-js module and manage type definitions with the typings tool. To resolve any issues, add typings/index.d.ts to your gulp.src:

function updateTypeScript(files) {
  files = files || ['app/**/*.ts','typings/index.d.ts'];

  return function () {
    var tsResult = gulp.src(files)
      .pipe(changed(paths.dirs.build, { extension: '.js' }))
      .pipe(ts(tscConfig.compilerOptions));

    return merge(tsResult.dts, tsResult.js)
      .pipe(gulp.dest(paths.dirs.build));
  }
}

gulp.task('typescript', updateTypeScript());

Answer №6

I encountered a similar issue, you may want to consider using "npm run lite" instead of "npm start". It proves to be more user-friendly in my experience.

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

Data is not displaying correctly in the Angular Material Table

I'm currently trying to build a mat table based on an online tutorial, but I'm facing a problem where the table appears empty even though I have hard coded data. As someone new to Angular and HTML/CSS, I'm struggling to understand why the ma ...

htmlcssangulartypescriptangular-material-table

What is the process for excluding a package from an npm audit?

After checking my computer's security, the npm audit results revealed that the handsontable package requires fixing, but there seems to be no solution available at the moment. I attempted to disregard the handsontable package by using either npm audi ...

npmnpm-audit

The NodeJs module is experiencing a version mismatch, with the expected version of 48 not matching the actual version of

I am encountering an issue with my app even though I have installed node 6.12.3 and npm 3.5 on my machine. It seems like there's a problem with one of the node modules. I've tried running npm update and npm rebuild, as well as deleting the node_m ...

node.jsnpm

Ensure the variable is valid by using a type guard in the false branch

I am attempting to use a type guard to narrow down a complex type. In my scenario, I want the false branch of the type guard to recognize the complement of the narrowed type. interface Model { side: 'left' | 'right'; } interface LeftMo ...

typescriptfunctional-programmingtypeguards

Having issues with npm python-shell integration within electron framework

I'm currently attempting to establish a connection between a python script and an Electron app by utilizing the npm's python-shell package. The requirement is for the script to be executed whenever a button is clicked. So, let's assume my d ...

javascriptpythonnpmelectrondesktop-application

Currently, my goal is to create PDFs using Angular

<button class="print" (click)="generatePDF()">Generate PDF</button> Code to Generate PDF generatePDF(): void { const element = document.getElementById('mainPrint') as HTMLElement; const imgWidth = 210; ...

javascriptangularangularjstypescriptpdf

The function navigator.canShare() encountered a permissions denial while running in Typescript

Currently, I am in the process of developing an Angular8 PWA and have successfully implemented webshare to share text content. To my excitement, Chrome has now extended its support for file sharing starting from May 2019. However, while attempting to int ...

typescriptgoogle-chromeprogressive-web-appsnavigator

Verify enum values within controller function

I am dealing with a query parameter in my REST API that should be restricted to specific values according to an enum type. I need to find a way to handle a "Bad Request" error if the client provides any value outside of this enum. Here is what my enum loo ...

typescriptrestnestjs

Issues installing dependencies in Angular using npm

Today I attempted to create a new project. I used the following command: ng new NAME --style=less However, when I ran this command in my cmder, it resulted in errors and warnings. To troubleshoot, I decided to uninstall Node.js along with the files in R ...

node.jsgitangularnpm

Display customizable template according to variable

The answer provided for the issue regarding dynamic template generation based on value instead of variable in this thread was really helpful. However, I'm facing challenges in getting it to work. Here's a simplified example: export class A { } ...

angulartypescriptangular8

How can I ensure that TypeScript recognizes when I add a missing property back to an object in this scenario?

I recently came across an issue while using Typescript: Omit nested property and ended up encountering more complex errors. So my question remains - how can I replace multiple nested props on a TypeScript input in the convert function? P.S. On a side not ...

typescript

Is there a clever method to transform the property names of child objects into an array of strings?

I have a similar object that looks like this: { "name":"sdfsd", "id":1, "groups":[ { "name":"name1", "id":1, "subGroups":[..] }, { "name":"name2", "id":21, ...

angulartypescriptecmascript-6

In my attempt to install and require the packages "fs," "path," and "js-yaml" on my Windows 10 system, I encountered an issue. Specifically, only the "js-yaml" package resulted in the error message "

　Greetings! I am new to the world of computers and have been enjoying the insightful Q&As on this platform. This is my debut question on StackOverFlow, so please bear with me if my technical jargon or English seems a bit off. 　I spent several hour ...

node.jsnpmnode-red

Using React Query's useMutation hook may result in an error message of "No overload matches this call"

When incorporating react-query into my typescript project, I encountered a perplexing type error while attempting to utilize the useMutation() hook with a graphql query. Here is an example of the code: useMutation( async ( parameter1: string, ...

typescriptgraphqlreact-query

I successfully installed the Firebase tools using npm, but encountered an error during the process

Alert: Please choose at least one feature. Press SPACEBAR to select features, or mention a feature by executing firebase init [feature_name] ...

reactjsnpmgoogle-cloud-firestore

Creating keys from extensive JSON data without having to manually match types using Typescript

Is there a way to efficiently parse and access the values in large JSON files using Typescript, without the need to manually define interfaces for all expected key/value pairs? In the past, working with small JSON files required only extracting a few spec ...

jsontypescript

Show categories that consist solely of images

I created a photo gallery with different categories. My goal is to only show the categories that have photos in them. Within my three categories - "new", "old", and "try" - only new and old actually contain images. The issue I'm facing is that all t ...

javascriptangulartypescript

When executed as a root user, the npm install command functions correctly, but when run as the jenkins user, it throws an

When attempting to execute npm install on my CentOS Linux machine as the user jenkins, I encounter the following error: npm WARN tar ENOENT: no such file or directory, lstat '/home/jenkins/workspace/'job name'/Scheduler/scheduler-component/ ...

node.jslinuxjenkinsnpm

Tips for accessing the FormControlName of the field that has been modified in Angular reactive forms

My reactive form consists of more than 10 form controls and I currently have a subscription set up on the valueChanges observable to detect any changes. While this solution works well, the output always includes the entire form value object, which includ ...

javascriptangulartypescriptrxjs

Route user based on login status using router

I want to set up automatic routing to a login page for users who are not logged in. app.module.ts import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { LoginComponent } from &ap ...

angulartypescriptauthenticationroutesrouter