Compiling TypeScript sources encountered a TS1005 error during compilation

While my application runs smoothly within VS2022, I encounter errors when attempting to run gulp and compile TypeScript sources. The errors look like the ones below. I have provided my tsconfig and package files; however, I am uncertain if I need to modify the gulp script.

C:/WebProjects/ITF/Web/node_modules/typescript/lib/lib.es6.d.ts(20624,14): error TS1005: ';' expected. C:/WebProjects/ITF/Web/node_modules/typescript/lib/lib.es6.d.ts(20625,14): error TS1005: ';' expected. C:/WebProjects/ITF/Web/node_modules/typescript/lib/lib.es6.d.ts(20626,14): error TS1005: ';' expected.

Compiling TypeScript sources

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 asset 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"));
    return stream;
}));

tsConfig

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noEmitHelpers": false,
    "sourceMap": true,
    "noResolve": false,
    "noEmitOnError": true,
    "outDir": "dist/debug"
  },
  "filesGlob": [
    "./**/*.ts",
    "!./node_modules"
  ],
  "exclude": [
    "node_modules",
    "jspm_packages",
    "typings",
    "dist",
    "typings/*",
    "typings/main.d.ts",
    "typings/main",
    "Scripts"
  ],
  "compileOnSave": true,
  "buildOnSave": true
}

Package

 "dependencies": {
    "@angular/cli": "^6.2.1",
    "@angular/common": "4.4.7",
    "@angular/compiler": "4.4.7",
    "@angular/core": "4.4.7",
    ...
    // Other dependencies listed here...
    ...
  }

Answer №1

It appears that the problem may lie in the older version of gulp-typescript you are currently using. Have you considered updating to a newer version? This could potentially resolve the issue, although it may require updating other packages as well. The error may be due to this package utilizing an outdated version of tsc. For more information, please refer to -> TypeScript error TS1005: ';' expected (II)

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 an Increment and Decrement Button for Products in Angular and Ionic 3

I have gone through various tutorials, but there is still some confusion. I am attempting to create an increment and decrement button, but so far I have not been successful. Within an ion-list, I have multiple h3 elements. Here is a snippet of my view: ...

Is it possible to transfer the build files from one environment to another in Angular without the need to run npm run build again

I have experience working in over three different environments with Angular. I am wondering if there is a way to reuse built files from one environment in the others without having to rebuild each time. If this is possible, I would appreciate guidance on ...

Ways to showcase alerts on dashboard

I have a specific need to incorporate a notification bell icon in my dashboard. Essentially, I want the user to be alerted about any actions that they need to take through this notification system. For example, if a task is rejected, approved, or pending v ...

Struggling to dynamically update array values by comparing two arrays

I am faced with a scenario where I have two arrays within an Angular framework. One of the arrays is a regular array named A, containing values such as ['Stock_Number', 'Model', 'Type', 'Bill_Number'] The other arr ...

Angular: Efficient ways to Transfer Information using Angular Router

Good day, Within the app.module.ts: {path: 'homepage', component: HomepageComponent}, In the xxx.component.ts, we have the following code: private function() { const variable = this.createObject(param); console.log(variable); this ...

`How to utilize the spread operator in Angular 4 to push an object to a specific length`

One issue I'm facing is trying to push an object onto a specific index position in an array, but it's getting pushed to the end of the array instead. this.tradingPartner = new TradingPartnerModel(); this.tradingPartners = [...this.tradingPartner ...

Contrasting @Input with Dependency Injection in Angular 10

Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...

What steps should be taken to remedy token generation issues within a REST API request?

Seeking assistance with Angular 7 and Loopback API integration. Currently working on testing a sample code that involves a token and token/generate-token. Need guidance on how to generate or access this token aside from the mentioned methods. Any help woul ...

Using the `import.meta` meta-property is restricted to the `es2020`, `esnext`, or `system` options in snowpack+testing-library and will result in an error

I've been encountering issues while setting up Jest and React Testing Library for the snowpack project. The error message I'm receiving is "The 'import.meta' meta-property is only allowed when the '--module' option is 'es ...

Is it possible to swap images by clicking on them?

Let's say I'm working with 3 images. Image A, B and C. A is the main image initially. If I click on image B, it will become the main image and image A will take its place in the old position. The same condition applies when B is the main image a ...

MXGraph has an issue where edges fail to be redrawn after being moved

Perhaps this question may seem trivial, but I am facing an issue in my code and seeking guidance from the community. I am working on a javascript mxGraph application within Angular7. Specifically, I have modified the ports.html example for my project. Wh ...

Creating a unique attribute in FabricJS object using TypeScript

Encountering a TypeScript error when trying to add a custom attribute to a new FabricJS object. How can I extend the IObjectOptions globally to include this custom attribute? const workarea = new fabric.Rect({ id: "workarea", width: 250, he ...

What is the process of incorporating a custom data type with ngModel in Angular Dart?

In the process of developing an app using AngularDart, I have come across some interesting challenges. While I appreciate the ease with which forms can be handled in AngularDart, I am facing a hurdle when it comes to working with different data types. My ...

The Angular controller fails to display any data when inserted within double curly braces on the HTML page

I have been working on a basic binding application using TypeScript. I created a controller called 'bugCtrl' and it appears to be functioning correctly in debug mode (with console.log and alert statements). Below is the HTML code from my page: & ...

CSS-WHAT Package for Angular Update - Enhance Your Styles!

In my Angular setup, the configurations are as follows: _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | ...

Is it possible to navigate to a particular step during an Angular IntroJS event?

Whenever I attempt to navigate to a specific step from within the IntroJS onexit event, it seems to cause confusion and display the incorrect step along with the highlighted element. I have defined my steps using JSON, with a total of 8 steps: [{ elem ...

Error: Code layer not located while utilizing "sam invoke local" in AWS

Currently, I am engaged in an AWS project where I am developing two lambda functions. Both of these functions rely on a common codebase stored in the node_modules directory, which is placed in a separate layer named AWS::Lambda::LayerVersion, not to be con ...

Using Angular 4 Component to Invoke JavaScript/jQuery Code From an External File

I have written a jQuery code that is executed at ngAfterViewInit(). //myComponent.ts ngAfterViewInit() { $(function () { $('#myElement').click(function (e) { //the code works fine here }); } However, I want t ...

How can we effectively handle model instantiation and creation in typescript?

I've been facing challenges when it comes to instantiating and initializing a model in TypeScript. In my project, I am using Nest where I receive an object from an API that needs to be validated by converting it to a DTO. This DTO should then be used ...

initial state in React determined by DOM calculations

Currently, I am utilizing https://www.npmjs.com/package/react-slick and facing a challenge in setting "slidesToShow" dynamically based on the available width. Although I have successfully managed to make it work after resizing the window, I need to provid ...