Guide on executing .ts script file and building angular 5 with NPM

I am facing an issue with running a file that has a .ts extension before executing npm run build to build my Angular 5 project.

package.json
 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "compile": "npm-run-all myts build",
    "myts": "ts-node git.version.ts",
    "build": "ng build --prod",
    "test": "ng test",
  },

However, I encountered an error message:

npm run compile

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfa1a8e2a9a0bda2bce2aebfa68fffe1ffe1ff">[email protected]</a> compile C:\Users\George35mk\Documents\Projects\gui\frontend\> 
npm-run-all myts build

'npm-run-all' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="503e377d363f223d237d6177334a434b08627c607e60">[email protected]</a> compile: `npm-run-all myts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d8d19bd0d9c4dbc59bd7c6dff68698869886">[email protected]</a> compile script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\George35mk\AppData\Roaming\npm-cache\_logs\2018-03-01T14_47_01_179Z-debug.log
PS C:\Users\George35mk\Documents\Projects\gui\frontend\

If I run only one script, it works fine:

ts-node git.version.ts

The main issue seems to be with running multiple scripts sequentially using npm.

angulartypescriptnpmts-node

Answer №1

In my development setup using node, express, and angular with typescript, I have discovered a streamlined approach to handle all tasks efficiently with just one simple command, eliminating the need for multiple installations.

With my method, I am able to:

  1. Compile node typescript server files to javascript and automatically monitor changes in the typescript files.
  2. Compile the angular project, serve it to the node server, and keep an eye on any modifications in the angular code.
  3. Start the node server and automatically restart it whenever there are changes detected

All this can be accomplished by running a single command - "npm start"

Below is a snippet from my package.json file:

{
  "name": "node",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/server.js",
  "scripts": {
    "start": "start tsc --watch & cd ../angular & start ng build --watch & cd ../node & timeout 15 & start nodemon --watch ../angular/dist --watch dist"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.16.3",
    "ws": "^6.0.0"
  },
  "devDependencies": {
    "@types/express": "^4.16.0",
    "@types/node": "^10.9.2",
    "@types/ws": "^6.0.0",
    "typescript": "^3.0.1"
  }
}

Here is how the project structure looks like:

My_project
 - node
 - angular

tsconfig.json options:
    "outDir": "dist", 
    "rootDir": "src"

Answer №2

Make changes to the package.json as shown below:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "compile": "npm run myts && npm run build",
  "myts": "ts-node git.version.ts",
  "build": "ng build --prod",
  "test": "ng test",
}

Explanation

  1. && ensures sequential execution of commands.
  2. No need for npm-run-all in this case.
  3. If you prefer using npm-run-all, then install it with 
    npm install npm-run-all --save-dev
    .

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

Include baseHref in the sourceLocale configuration of Angular's internationalization feature

In order to set a baseHref for my default language in my Angular code (written in Portuguese), I need to make some adjustments. My goal is to use "ng serve --configuration=pt" to serve angular, and have the router display "http://localhost:4200/pt", simila ...

angular

The module 'babel-core' cannot be located, however '@babel-core' is already installed

Every time I try to execute npm run dev, I encounter this error message: ERROR in ./src/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-core' Require stack: Even though I have install ...

reactjsnpmwebpackinstallationbabeljs

Pair two values from the interface

I need to extract and combine two values from an Interface: export interface CurrenciesList { currency: string; country: string; } The initial mapping looks like this: this.optionValues["currency"] = value.map(i => ({ id: i.currency, name: i.curr ...

angulartypescript

Exploring the (*ngFor) Directive to Iterate Through an [object Object]

Attempting to iterate through the array using *ngFor as shown below. let geographicalArea = [{ "_id": "5e77f43e48348935b4571fa7", "name": "Latin America", "employee": { "_id": "5e77c50c4476e734d8b30dc6", "name": "Thomas", ...

javascriptarraysjsonangular

Having trouble with clearInterval in my Angular code

After all files have finished running, the array this.currentlyRunning is emptied and its length becomes zero. if(numberOfFiles === 0) { clearInterval(this.repeat); } I conducted a test using console.log and found that even though ...

javascriptangulartypescript

The design of Angular Material's <mat-table> does not render properly when using the window.print() function

I am currently using Angular material 6 to present data in a grid format utilizing material components. When it comes to printing, I have a "printReport()" function that captures the HTML content from the view and triggers the window.print() method. The i ...

angular

Tips for incorporating a mail button to share html content within an Angular framework

We are in the process of developing a unique Angular application and have integrated the share-buttons component for users to easily share their referral codes. However, we have encountered an issue with the email button not being able to send HTML content ...

htmlangulartypescriptemailoutlook

What is the best way to retrieve the Parent component's name within a Child component in Angular 2?

In my scenario, I have three elements: C1, C2, and C3. I need to designate C2 as both a child of C1 and C3. Based on which element is the parent of C2, I want to display the HTML text - "C1 is my parent" or "C3 is my parent". This summarizes the issue at ...

angularparent-childmean-stack

Error: The connection to Node/Postgresql was refused at 127.0.0.1:5432. This occurred after connecting at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)

After running a Node server connecting to a Postgresql DB (via Knex) without issues, my laptop crashed. Upon restart, the DB connection stopped working, showing this error message: Error: connect ECONNREFUSED 127.0.0.1:5432 at TCPConnectWrap.afterConnect ...

javascriptnode.jspostgresqlnpmknex.js

Resolving CORS Error in Angular and PHP: A Comprehensive Guide

My current project involves learning Angular and creating a solution that communicates with an IIS Server running on PHP as an API. The IIS server is set up with Windows Authentication to authenticate users, and the combination of IIS/PHP is functioning p ...

phpangulariiscors

Container that has the ability to store objects conforming to specific interfaces

If you were to envision having three different types of objects, they might look something like this: interface X { testX: someType; } interface Y { testY: someOtherType[]; } interface Z { testZ1: string; testZ2: number; } Now imagine a master o ...

typescript

The function slice is not a method of _co

I'm attempting to showcase the failedjobs array<any> data in a reverse order <ion-item *ngFor="let failjob of failedjobs.slice().reverse()"> An issue arises as I encounter this error ERROR TypeError: _co.failedjobs.slice is not a fu ...

javascriptangularionic2ionic3

Module is absent in JavaScript but present in TypeScript

As I delve into coding a vscode extension by following a tutorial, I encountered an issue with importing in my server.ts file. The directory structure looks like this: ...

javascripttypescriptnpmvisual-studio-codevscode-extensions

Modifying the default FilterSettings in ejs-grid: A step-by-step guide

Brand new to Angular and Material technologies, I recently created a grid following the instructions provided here. Below is the html template for the table: <ejs-grid #grid [dataSource]='data' allowFiltering='true' allowPaging=& ...

angulardatagridangular-materialejssyncfusion

Error TS2322: The specified type 'Element' cannot be assigned to the type 'boolean'

I'm just beginning to explore TypeScript and I ran into an issue while trying to type my constant dialogFuncMap. I received an error (listed in the comments below). Why am I getting this error if the type of state is boolean? And how can I resolve it ...

typescript

Is it possible to bind an http post response to a dropdown list in Angular?

My goal is to connect my post response with a dropdown list, but the text displayed in the drop-down box shows "[object Object]". My request returns two results - `ArticleID` and `Title`. I want to display `Title` in the dropdown and save the corresponding ...

angulartypescript

The ASP.NET Core Web API successfully sends back a response, but unfortunately, the frontend is only seeing an empty value along with a status code of 200 (OK)

Currently, I am delving into the world of web APIs and have stumbled upon a perplexing issue that requires assistance. I have an active ASP.NET Core Web API at the backend, while at the frontend, an Angular application (running on version 15.1.5) is in pl ...

c#angulartypescriptpostmanasp.net-core-webapi

Having trouble deploying my MEAN stack application on Heroku due to a MongoNetworkError: unable to establish a connection to the

Encountering difficulty connecting to MongoDB for application deployment, receiving error message "MongoNetworkError: failed to connect to server [localhost:27017] on first connect [Error: connect ECONNREFUSED 127.0.0.1:27017". What are potential issues ca ...

angularmongodbherokumean

Guide on downloading Node modules to an Angular 2 project

I am trying to install a Git project located in the directory D:/myapp. I currently have npm version 3.10.10 and Node.js version 6.11 installed on my Windows machine. However, when I attempt to install all dependent node modules using the 'install npm ...

node.jsangularangular2-templatenpm-installgit-bash

What is the process for verifying the installation of socket.io on my system?

I have been working on setting up a chat feature, and I am following the instructions provided in the following URL: https://socket.io/get-started/chat/ ... The website recommends installing socket.io using npm with the command: npm install --save socke ...

npmsocket.io