Generating JavaScript files automatically upon initiating the npm start command

As I develop an Angular2 app with typescript, I encounter a situation where running npm start results in all .ts files being compiled into javascript files and saved in the directory. Is there a way to disable this automatic compilation?

The contents of my package.json file are as follows:

 {
  "name": "angular-prac",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\"",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings":"^0.6.8"
  }
}
typescriptnpmangular

Answer №1

The problem likely lies within your tsconfig.json file. This is the configuration file for your TypeScript build, typically found in your project root along with the package.json file. By default, it simply compiles files in place, resulting in the accumulation of compiled Javascript files in your source folder. The specific options you should add will vary based on your desired output:

If you want all compiled files to be merged into a single output file:

{
    "compilerOptions": {
        "outFile": "./dist/app.js"
    }
}

If you prefer all compiled files to be placed in a separate directory as individual files:

{
    "compilerOptions": {
        "outDir": "./dist"
    }
}

If you already have a tsconfig.json file present, simply add these options rather than replacing the entire configuration.

There exists a multitude of options for customizing the TypeScript build process. If you wish to make further adjustments, additional information can be found on the wiki. Feel free to reach out if you require more examples and I will gladly incorporate them into the response.

Answer №2

When you execute the "npm run start" command, it initiates both the TypeScript compiler and lite-server. If your aim is solely to launch the HTTP server, you can opt for this specific command:

$ npm run lite

By doing so, there is no need to recompile the TypeScript files upon startup, allowing you to utilize the previously compiled JS files for running your Angular2 application.

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

Transform JSON reply in JavaScript/Typescript/Angular

Looking for assistance with restructuring JSON data received from a server API for easier processing. You can find the input JSON file at assets/input-json.json within the stackblitz project: https://stackblitz.com/edit/angular-ivy-87qser?file=src/assets/ ...

javascriptjsonangulartypescript

Tips for accessing files following the transmission of a post request within the req.body

Encountering a problem where image uploads to an s3 bucket are not successful. The error message received is: API resolved without sending a response for /api/upload/uploadPhoto, this may result in stalled requests. The front end includes an input that ca ...

javascripttypescriptfileamazon-s3next.js

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

cssnpmwebpack

Encountering issues with accessing a variable before its initialization in the getServerSideProps function in

Currently, I am working on setting up Firebase and configuring the APIs and functions to retrieve necessary data in my firebase.tsx file. Afterwards, I import them into my pages/index.tsx file but I am encountering an issue where I cannot access exports af ...

typescriptfirebasegoogle-cloud-firestorenext.js

Angular2: Determining which checkboxes have been selected

Currently, I am utilizing angular2 and have the following HTML code: <div *ngFor="let val of channelForTabs; let i=index"> <label for="isCheckBox" style="margin-left:15px;">Draw</label> <input id="checkBox{{i}} ...

angulartypescript

Angular: Issue encountered when accessing nested properties within an interface due to reading properties of undefined

Encountering difficulties with utilizing nested property interface. //Food Interface (food.interface.ts)// export interface Food { name: string; quantity?: string; description?: string; nutrients?: { calories?: number; protein?: number; carbs?: ...

angulartypescript

What is the best way to ensure an observable has finished before retrieving a value?

Looking at the function provided below: public getAssemblyTree(id: number) { .... const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' })); request.sub ...

javascriptangulartypescriptobservable

How can you generate a "Package Contains Lower Node Version" error message during the installation of an NPM package if the node version is higher than the current system's node version?

I am looking for a way to trigger an error during the installation of an NPM package if the node version supported by that module does not match the system/server node version. Specifically, I want to prevent the installation of any npm module that suppor ...

javascriptnode.jsangularreactjsnpm

What is the command to display a list of all globally installed modules in Ubuntu?

I'm currently using ubuntu 14.04. Is there a method to display all global modules (that were installed via npm) on the terminal? If so, how can I accomplish this task? ...

node.jsubuntunpmnpm-cli

Importing the isPropertyUpdated method in Angular 4

My challenge lies in utilizing the isPropertyUpdated function within Angular 4. However, I have encountered a roadblock as Angular 4 does not facilitate deep imports. An example of an import that fails to work on Angular 4 is: import {isPropertyUpdated} ...

javascriptangulartypescript

Adding a new package manager to an ASP.NET MVC 6 project: Step by step guide

In an ASP.NET MVC 6 application developed using Visual Studio 2015, there are currently two package managers listed under Dependencies: Bower and NPM. Is it possible to incorporate another package manager such as JSPM into the existing list and effectively ...

visual-studionpmasp.net-core-mvcbowerjspm

Event listener for scrolling in Angular Dart component

I am looking to implement a functionality where a "back to top" button appears once the user has scrolled the page by 500px. I have been trying to capture the scroll event in the main Div of my AppComponent. <div class="container" scrollable&g ...

angulardart

Guide on passing LOCALE_ID from an observable within Angular 2

To localize the date pipe in Angular 2, you must supply the LOCALE_ID. I have developed a service called LocaleService that offers an locale$: Observable<string> which utilizes a BehaviorSubject<string>. I wish for this service to remain full ...

angularangular2-providers

Looking to utilize Axios in React to make API calls based on different categories upon clicking - how can I achieve this?

My current issue involves making an API call upon clicking, but all I see in my console is null. My goal is to have different API categories called depending on which item is clicked. const [category, setCategory] = useState(""); useEffect(() => { ...

javascriptreactjstypescriptaxios

Null value returned by getDOM() function during transition from Angular 2 to Angular 4

I've encountered a unique challenge that has me stumped. Despite finding similar issues, the proposed solutions don't seem to work for my case. My issue arose when I decided to migrate a project from Angular 2 to Angular 4. I began by creating a ...

angular

Is there a way to selectively filter and display certain data in an Angular data table?

https://i.sstatic.net/0N3OZ.jpg I am currently working on a project using Angular 7 frameworks that involves dealing with large amounts of data. One of the tasks is to filter out trial units based on the 'userName' field in the raw data. I have ...

angulartypescript

What is the hierarchy of importance for routes in Angular - parent versus child levels?

Let's say I define a top-level route with the path '/some/childr': [{ path: '/some/childr'}] Then, I create another top-level route /some with a child route /childr: [{ path: '/some', children: ['/childr']}] ...

angularangular2-routing

Filtering input for multiple header columns in an Angular table

A complex Angular table structure has been implemented with three columns. Each column header contains an input field for Stock Number, Case, and Availability. Users have the flexibility to search using a Single Input (Stock Number OR Case OR Availability ...

angulartypescriptangular-materialangular-forms

Typescript check for type with Jest

Assume there is an interface defined as follows: export interface CMSData { id: number; url: string; htmlTag: string; importJSComponent: string; componentData: ComponentAttribute[]; } There is a method that returns an array of this obj ...

javascripttypescriptunit-testingjestjs

How can TypeScript generics be used to create multiple indexes?

Here is an interface snippet: interface A { a1: { a11: string }; a2: { a21: string }; a3: { a31: string }; } I am looking to create a generic type object with indexing based on selected fields from interface A. Here is the pseudo-code exampl ...

typescriptgenerics