The elixir-typescript compilation process encountered an error and was unable to complete

I am currently working on integrating Angular2 with Laravel 5.2 and facing an issue with configuring gulp to compile typescript files.

Below is a snippet from my package.json file:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

This is the content of my tsconfig.json file (located in resources/assets/typescript):

{
  "compilerOptions": {
    ...
  },
  "exclude": [
    "node_modules"
  ]
}

Finally, here is my gulpfile.js code snippet:

...

Upon running gulp from the console, I encountered errors like:

/var/www/chat/laravel/node_modules/@angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.
[14:59:24] gulp-notify: [Laravel Elixir] TypeScript Compilation Failed!: /var/www/chat/laravel/node_modules/@angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.
{ [TypeScript error: /var/www/chat/laravel/node_modules/@angular/common/src/directives/ng_class.d.ts(81,34): error TS2304: Cannot find name 'Set'.]
  name: 'TypeScript error',
.....

The error seems to be related to compiling TypeScript files located inside node_modules directory despite specifying exclusions in the tsconfig.json file.

Answer №1

I encountered a similar problem, but managed to resolve it successfully.

https://github.com/axiskafi/angular2-laravel5

You may need to make some modifications to your package.json and gulp file. By following the provided link and instructions, you should be able to fix the issue at hand.

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

Ways to apply one watcher (subscription) across multiple components in Angular?

Within my Angular application, I am seeking a way for user preferences to be saved to the database using the backend API. This functionality should be implemented across all pages and components. Currently, I have the following code snippet: export class ...

Is it worth diving into Vue.js, Angular, or React while utilizing Laravel currently?

After spending 2 months immersing myself in Laravel, I am considering expanding my skills by learning a JavaScript framework. While I have discovered that Laravel comes bundled with Vue.js, there are also options like Angular and React.js which are more po ...

What is the reason behind TypeScript not stating "When comparing a string to a null value, the condition will always return 'false'?"

When comparing a string to a number, an error and warning are generated. But why is there no warning when comparing a string to null/undefined? In this case, the type 'smth' is still narrowed to never without any warning displayed. The strictNul ...

Ways to utilize and display data in a *ngFor loop

I have created a simple service for accessing an HTTP service. Can anyone help me with how to bind this service information in *ngFor? import { Component } from '@angular/core'; import {Http } from '@angular/http'; import { In ...

After logging in, the initial API request is unauthorized and requires a page refresh for access (Using Laravel Sanctum and VueJS)

I've been grappling with this 401 issue for quite some time now. Even after successfully logging in and obtaining the token, I continue to encounter a 401 exception on the initial page load. Strangely, the error disappears upon refreshing the page. It ...

Altering the dimensions of radio buttons

I am a newcomer to using material-ui. I am currently working on incorporating radio buttons in a component and would like to reduce its size. While inspecting it in Chrome, I was able to adjust the width of the svg icon (1em). However, I am unsure how to a ...

Click on the photo and drag your mouse outside of it to zoom out [Angular2]

HTML <div class="zoomPhoto" *ngIf="zoomed" (click)="unZoomPhoto()"> <img src="{{currentPhoto}}" [style.margin-left.px]="-(zoomedPhotoWidth/2)" [style.margin-top.px]="-(zoomedPhotoHeight/2)" #photo /> </div> CSS .zoomPhoto{ backg ...

The subscription data for nested classes appears to be displaying as undefined

In my current project, I am utilizing Angular 8 and facing an issue with a nested class. The problem arises when trying to access data from an observable subscribe operation in the child class (Players) within the main Tournament class. Until the data is r ...

Using Angular to Generate a File from Form Input and Delivering it to the User

I am attempting to develop a feature in Angular 9 that takes user input from a textarea, processes it, and then presents it back to the user as a downloadable (txt) file. The structure of the form in app.component.html is as follows: <form (ngSubmit)= ...

Is there a way to showcase Images or Stars in a Material Angular Form?

I have a form where the rating is displayed using star images, but it is stored as a number in string format on the backend. While experimenting, I am trying to figure out the best way to achieve this. Currently, this is what I have: https://i.sstatic.net ...

Version 4.6.4 of TypeScript is flagging the code as invalid

How can I fix this Typescript problem? const userInformation: { email: string; id: string; _token: string; _tokenExpirationDate: string; } = JSON.parse(localStorage.getItem('userData')); https://i.sstatic.net/xMh9P.pn ...

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

I am struggling with implementing a menu on the header section of my Angular 14 homepage. The menu I added is not opening as expected. Even after trying various working menu samples from the internet, I couldn't get it to work in my project. Here are ...

How to extract a date from Mat-Datepicker without using moment library

I'm encountering an issue with Mat-datepicker in my Angular app. When I manually input the date into the field, it doesn't parse in the correct locale, but it displays correctly when selected from the month view. Recently, I made the switch from ...

Building a multi-platform desktop application using Angular and Electron integrated with ngx

Having developed an Angular application, there is now a need for a desktop version as well. Electron was used to run the application, and everything is functioning as intended. However, an issue arises with localization. In the electron application, only ...

Utilize Moment to retrieve the weekend dates

Currently tackling a date-related issue and feeling stuck. Is it feasible to extract weekends from an array of dates using Moment.js instead of the getDay() method? I'm a beginner in JavaScript. ...

Is it necessary to only override the monospaced font?

Can the monospace font in Angular Material be customized for just the <code>foo</code> blocks? I want to use a font where the number zero 0 looks distinct from the letter oh O. ...

Encountering a problem while trying to integrate ng-zorro-antd in an Angular 8 project using the CLI command ng add ng-zorro

I am encountering an issue when trying to integrate ng-zorro-antd with Angular 8 using the CLI. I have followed these steps: Create a new project using 'ng new PROJECT_NAME' Navigate into the project directory using 'cd PROJECT_NAME' ...

Updating a single record in Angular 9 using Angular Material's Mat table

I am facing a unique scenario and seeking assistance with the following issue. In my application, I utilize a mat table to display data which is constantly being updated through signalR from the backend. This frequent data updating poses a challenge for m ...

Encountered an issue while trying to read the property 'temp' of undefined within an HTML document

Can someone help me with this issue? I'm facing an error with the JSON data retrieved from an API: ERROR in src/app/weather/weather.component.ts(39,30): error TS2339: Property 'main' does not exist on type 'Iweather[]' Here is ...

I am currently facing an issue related to the length property. It is showing an ERROR TypeError: Cannot read property 'length' of undefined

Is it recommended to set the length to be inherited from Angular right? If so, why am I getting this error: "MyPostsComponent.html: 7 ERROR TypeError: Cannot read the 'length' of undefined property" when fileList.length is greater than 0? onFile ...