Compiling TypeScript files for Angular 2 with Atom can be quite time-consuming

Currently, I am utilizing Angular 2 RC-6 by referencing the Angular2 Documentation. However, I have encountered an issue with Atom being too slow to compile my '.ts' files. Interestingly, when I relocate my tsconfig.json file from the root folder to a different directory, the compilation process speeds up significantly; although there is a downside - certain Dependency Injections such as 'rxjs/add/operator/toPromise' seem to be missing.

I am seeking advice on how to enhance the compiling speed in Atom or make modifications to the tsconfig.json file for better performance.

My project follows the directory structure outlined in the documentation.

Below is a snippet of my tsconfig.json configuration:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
angulartypescriptatom-editor

Answer №1

As Daniel mentioned, it's important to exclude certain folders when working with TypeScript and JavaScript files. The node_modules folder, in particular, contains a large number of these files.

To do this, you can add the following exclude option to your tsconfig.json:

"exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
]

If you incorporate this into your existing configuration, it should appear similar to this:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

Answer №2

For those facing the same issue as me, I wanted to share my solution.

Initially, I followed rinukkusu's advice and excluded the node_modules folder which unfortunately caused the compiler (Atom 1.12.9, Atom-Typescript 10.1.13) to stop working altogether.

After some troubleshooting, I decided to include the include option in the configuration file to see if that would resolve the issue. Although the documentation didn't explicitly mention both options were necessary, it seemed to do the trick for me.

In my case, the configuration ended up looking like this:

 {
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "include": [
        "app/**/*"
    ],
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

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

What category does a Fresh of Deno event fall under?

I'm currently working with Deno and fresh. When it comes to events in islands, what is the type for an event like the one below? export function Sample() { return ( <input type="file" onChange={(e) => ...} // What typ ...

typescriptdenofreshjsfresh-framework

Achieving a shuffling CSS animation in Angular 8 may require some adjustments compared to Angular 2. Here's how you can make it

Seeking assistance with animating an app-transition-group component in Angular 8. My CSS includes: .flip-list-move { transition: transform 1s; } Despite calling the shuffle function, the animation always happens instantly and fails to animate properly ...

cssangular

Tips for choosing and unchoosing rows in angular 6

I am looking to extract the values from selected rows and store them in an array. However, I also need to remove a row from the result array when it is deselected. The issue with my current code is that every time I click on a row, the fileName values are ...

angulartypescriptag-grid-angular

The element 'loginToken' is not found within the type '{ loginToken: string; } | { error: Error; } | { username: string; password: string; }'

I'm currently working on creating a reducer using Typescript and Redux, but I keep running into this error: Property 'loginToken' is not recognized in type '{ loginToken: string; } | { error: Error; } | { username: string; password: str ...

reactjstypescriptreduxredux-saga

`Understanding the outcome type by assessing the (potential) attributes with TypeScript`

Here is a detailed example of a problem with some code: type Mapper<T, R> = (data: T) => R; interface Config<T, R> { readonly mapper?: Mapper<T, R>; } function transform<T, R>(config: Config<T, R>, data: T) { return c ...

typescriptrxjs

Angular's text interpolation fails to update when a value is changed by an eventListener

I am encountering an issue with two angular apps, one acting as the parent and the other as the child within an iframe. The HTML structure is quite simple: <div class="first"> <label>{{postedMessage}}</label> </div> &l ...

angulartypescriptinterpolation

Having difficulty implementing interval to a maximum of 2 minutes or until a certain condition is fulfilled in Angular

In my current scenario, I am working with two APIs - apiOne and apiTwo. When I call apiOne, it should return a response. If the response is successful, then I need to pass this response as a parameter to apiTwo. ApiTwo will then provide another response wh ...

javascriptangularionic-framework

Angular view showcasing a JSON array

After retrieving data from the Laravel API, I used the following method: this.dataService.getData().subscribe(res=>{ this.contacts=res }); Upon receiving a JSON array response from Laravel like the one below, I attempted to iterate throu ...

jsonangularlaravel

Include a log out option in the side menu of the ionic2 application

I am working with the sidemenu template to kick off my application. I aim to incorporate a button within the sidemenu that enables users to trigger a modal alert for confirming logout. Below is the code snippet: app.component.ts: import { Component, View ...

angulartypescriptionic2

Angular2: Implement a feature to append textbox input to a span element upon button click

I'm completely new to Angular2 and I could really use some assistance with the following task. I need to take the input from a textbox and add it to a span in HTML. The requirement is to only make changes in the .ts file. I'm having trouble figu ...

angularangular2-template

Mocked observables are returned when testing an Angular service that includes parameters

I'm currently exploring various types of unit testing and find myself struggling with a test for a service once again. Here is the function in my service that I need to test: Just to clarify: this.setParams returns an object like {name: 'Test&ap ...

angulartypescriptunit-testingrxjsjasmine

An error was encountered when attempting to define a file that contains both a class and an interface with an expected sem

Seeking guidance on creating a Typescript file with a class and interface: export class Merchant { constructor( public id: string, public name: string, public state_raw: string, public users: string, ) {} }; export interface MerchantL ...

typescript

Expanding worldwide in TypeScript

Is there a way to globally add fetch in TypeScript without explicitly using "(global as any).fetch" every time? (global as any).fetch I attempted this by creating a file in ./types/index.d.ts I also tried referencing it by including the file in tsconfig. ...

typescriptdeclaration-files

How Can I Build a Dynamic Field Form Builder in Angular 4?

While working with dynamic JSON data, I needed to create fields dynamically. For instance, if my JSON array contains 3 values, I would generate 3 input checkboxes dynamically as shown below: <ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows"&g ...

angulartypescript

Arranging Data in AngularJS based on Selected Filter Criteria

I have a filter function that currently only returns the name values in my table. I would like to add options for both ascending and descending sorting to this filter. Progress So Far: I am able to retrieve values from all inputs, including the name and ...

javascriptangulartypescript

Typescript is unable to access the global variables of Node.js

After using Typescript 1.8 with typings, I made the decision to upgrade to typescript 2.8 with @types. When I downloaded @types/node, my console started showing errors: error TS2304: Cannot find name 'require'. The project structure is as foll ...

node.jstypescript

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

I have a JSON array dataset where each object may contain nested arrays. In order to display the inner nested array elements as part of the parent array using Angular's NgFor, I need to format the input like this: [{ 'id': 1, 'tit ...

javascripthtmlangular

Is it feasible to utilize mat-selection-list with an object instead?

I've been exploring the mat-selection-list feature available in the material.angular.io documentation at material.angular.io/components/list/overview Instead of using a string array, I'm aiming to utilize an array of objects. The documentation c ...

angularangular-materialmat-list

What should I do when dealing with multiple submit buttons in NextJS?

How can I differentiate between two submit buttons in a form component created in Next.js? I'm struggling to determine which button was pressed and need help resolving this issue. import React from "react"; const LoginPage = () => { as ...

htmltypescriptnext.jsprisma

What are the steps to update data in an md-table?

I'm currently working on a web application using Angular 4, but I'm facing an issue regarding the access to new data in my md-table. To better understand the problem, I have replicated the same example for my application. You can find the examp ...

formsangular