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

Removing empty options from a select dropdown in Angular 9

In the process of working with Angular 9, I am currently in the process of constructing a dropdown menu that contains various options. However, I have encountered an issue where there is a blank option displayed when the page initially loads. How can I eli ...

typescriptangular9

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

I created a conditional type in my code that constrains the second argument of my class constructor based on the type of the first argument. Although the type checker correctly limits what I can pass to the constructor, I am struggling to get the compiler ...

typescript

Angular Material UI: Nested Table Component

I am dealing with a table that has four static headers and two static columns. The data in the last two columns changes based on certain conditions. I need to convert this table into an Angular Material table. The first table is a standard HTML table. Th ...

angularmaterial-ui

Switching between various conditions

Here is a sample of my component: import { Component, OnInit } from '@angular/core'; @Component({ selector: 'myApp-component', templateUrl: './myApp.component.html', styleUrls: ['./myApp.component.scss'] }) ex ...

angular

The parameter 'any' cannot be assigned to the parameter 'never' - Array provided is incompatible

Currently delving into TypeScript and encountering an issue while setting a reducer in redux Toolkit. Here's the code snippet in question: const testSlice = createSlice({ name: "test", initialState: [], reducers: { callApi: (state, ...

typescriptredux

Using Meteor methods in a Meteor and Ionic application: A guide

After building the web app with Meteor, I am now looking to develop a new app utilizing both Meteor and Ionic technologies. My goal is to leverage the existing Meteor methods in my Ionic app without duplicating efforts for mobile development. Any suggestio ...

javascriptangularmeteorionic-frameworkangular-meteor

Encountering an "Invalid hook call error" while utilizing my custom library with styled-components

I recently developed my own custom UI tool using the styled-components library, integrating typescript and rollup for efficiency. One of the components I created looks like this: import styled from 'styled-components' export const MyUITest2 = s ...

reactjstypescriptstyled-componentsrollup

Guide to utilizing @types/node in a Node.js application

Currently, I am using VSCode on Ubuntu 16.04 for my project. The node project was set up with the following commands: npm init tsc --init Within this project, a new file named index.ts has been created. The intention is to utilize fs and readline to read ...

node.jstypescriptnpmdefinitelytyped

Error: The program encountered a type error while trying to access the '0' property of an undefined or null reference

I am a beginner in the world of coding and I am currently working on creating an application that allows users to add items to their order. My goal is to have the quantity of an item increase when it is selected multiple times, rather than listing the same ...

javascriptangulartypescriptionic-framework

Angular - Electron interface fails to reflect updated model changes

Whenever I click on a field that allows me to choose a folder from an electron dialog, the dialog opens up and I am able to select the desired folder. However, after clicking okay, even though the folder path is saved in my model, it does not immediately s ...

javascriptangulartypescriptelectronangular6

TypeORM: When generating a migration, a SyntaxError is thrown stating that an import statement cannot be used outside a

While configuring TypeORM in my NextJS TypeScript project, I encountered an issue where I received the error message: SyntaxError: Cannot use import statement outside a module when attempting to create migrations for my entities. ...

typescriptnext.jstypeorm

Customizing default attribute prop types of HTML input element in Typescript React

I am currently working on creating a customized "Input" component where I want to extend the default HTML input attributes (props). My goal is to override the default 'size' attribute by utilizing Typescript's Omit within my own interface d ...

reactjstypescript

What sets apart .to and .toService in InversifyJS?

I find the documentation on using .toService(MyClass) for transitive bindings confusing. The examples provided also show that achieving the same result is possible with a regular .to(MyClass). https://github.com/inversify/InversifyJS/blob/master/wiki/tran ...

typescriptinversifyjs

What is the method for returning a string array?

My query is about how to return a string[]. Currently, TypeScript is throwing an error because each element of the array has a type of ( T[keyof T] extends readonly (infer InnerArr)[] ? InnerArr : T[keyof T] ). How can I accept the 'property' arg ...

javascripttypescript

Ways to retrieve an image uploaded on a nestjs server

I am facing an issue with my NestJS server where I have uploaded images but cannot access them as they appear to be some unreadable data. I have tried converting them to a blob and then setting it as an object URL for the image tag, but that also did not w ...

node.jsangularmongodbexpressnestjs

What is the best way to retrieve the post JSON data in the event of a 404 error?

When my service call returns a 404 error, I want to display the server's message indicating the status. The response includes a status code and message in JSON format for success or failure. This is an example of my current service call: this._trans ...

javascriptangulartypescript

Cross-origin error triggered by using an external API within a ReactJS application

I'm facing a common CORS issue in my application while trying to call an API. The API I am attempting to access can be found here: https://github.com/nickypangers/passport-visa-api Below is the code snippet used for making the API call: const getVi ...

reactjstypescript

``There seems to be an issue with clicking an element in selenium

Having trouble with selenium while testing an angular site. Need to click on the pub name field on this screen: https://i.stack.imgur.com/i2NEO.png The side menu is open and here is the HTML: https://i.stack.imgur.com/0AxR9.png Tried waiting for the ele ...

angularseleniumselenium-chromedriver

material-icons appear differently when letter-spacing is applied in iOS browsers

To display levels using star icons from angular material, I wanted the stars to be shown next to each other. I attempted to achieve this by applying letter-spacing: -0.25rem;, but unfortunately it did not render correctly on iOS platforms (resulting in s ...

cssiosangularicons

Angular universal triggers an "Error at XMLHttpRequest.send" issue

After updating my project to Angular 10 and incorporating angular universal, I encountered a strange error. While the application builds without any issues, I face an error when trying to run it on my development environment: ERROR Error at XMLHttpReque ...

angulartypescriptangular-universalangular10