I know Angular2 beta has just been released but I can't reproduce the steps from their official site tutorial ( https://angular.io/guide/quickstart ). Maybe someone has had similar issues and knows what to do in order to fix the this? When I try to start the application with npm start command I get output like this:
0 info it worked if it ends with ok
1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ]
2 info using npm#2.7.4
3 info using node#v0.12.2
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart angular2-quickstart#1.0.0
6 info start angular2-quickstart#1.0.0
7 verbose unsafe-perm in lifecycle true
8 info angular2-quickstart#1.0.0 Failed to exec start script
9 verbose stack Error: angular2-quickstart#1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" `
9 verbose stack Exit status 127
9 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:14:12)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1015:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
10 verbose pkgid angular2-quickstart#1.0.0
11 verbose cwd /Users/tmrovsky/Documents/angular2/angular2-quickstart
12 error Darwin 13.4.0
13 error argv "node" "/usr/local/bin/npm" "start"
14 error node v0.12.2
15 error npm v2.7.4
16 error code ELIFECYCLE
17 error angular2-quickstart#1.0.0 start: `concurrent "npm run tsc:w" "npm run lite" `
17 error Exit status 127
18 error Failed at the angular2-quickstart#1.0.0 start script 'concurrent "npm run tsc:w" "npm run lite" '.
18 error This is most likely a problem with the angular2-quickstart package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error concurrent "npm run tsc:w" "npm run lite"
18 error You can get their info via:
18 error npm owner ls angular2-quickstart
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]
I had:
typescript 1.7.5 version
node 0.12.2 version
Maybe someone could help solve the problem :) ?
package.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
index.html:
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
app.components.ts:
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>',
})
export class AppComponent {}
boot.js:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
Change the start field in package.json from
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
to
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
In order to get npm start running for me, I had to make sure I had globally installed some of the devDependencies. Have you tried:
npm install -g concurrently
npm install -g lite-server
npm install -g typescript
First you need update npm, lite-server and typescript:
sudo npm update -g && sudo npm install -g concurrently lite-server typescript
Delete node_modules folder from your Angular project directory (if exist). Next run:
npm install
After that resolve ENOSPC errors:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Finally:
npm start
This is my package.json file:
{
"name": "reservationsystem",
"version": "0.0.1",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"dependencies": {
"a2-in-memory-web-api": "~0.1.0",
"angular2": "2.0.0-beta.3",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.17",
"zone.js": "0.5.11"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
}
}
I had the same error on windows 10. It looks like it's problem with concurrently npm package. I found 2 options how to solve this error:
1. Run both commands in 2 separate cmds:
in the first one run: npm run tsc:w
in the second one: npm run lite
2. Change package.json
just change the start option to this:
"start": "tsc && npm run tsc:w | npm run lite",
Here's how I solved the problem today after hours of trying all of these different solutions - (for anyone looking for another way still).
Open 2 instances of cmd at your quickstart dir:
window #1:
npm run build:watch
then...
window #2:
npm run serve
It will then open in the browser and work as expected
I had a similar problem after copying the angular2-quickstart folder (including node_modules) to create the angular2-tour-of-heroes folder. This was wierd because the original was compiling fine but the copy was not...
npm run tsc
I was able to resolve the issue by deleting the node_modules folder and re-running npm install.
This was a surprise to me, so I did a diff between the 2 folders...
diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/
there were a LOT of differences, a lot of 'where' diffs in the package.json files like this:-
diff -rw angular2-quickstart/node_modules/yargs/package.json angular2-tour-of-heroes/node_modules/yargs/package.json
5c5
< "/Users/michael/Tutorials/angular2/angular2-quickstart/node_modules/lite-server"
---
> "/Users/michael/Tutorials/angular2/angular2-tour-of-heroes/node_modules/lite-server"
...which kind of makes sense but there were also some like this:-
diff -rw angular2-quickstart/node_modules/utf-8-validate/build/gyp-mac-tool angular2-tour-of-heroes/node_modules/utf-8-validate/build/gyp-mac-tool
607c607,608
< return {k: self._ExpandVariables(data[k], substitutions) for k in data}
---
> return dict((k, self._ExpandVariables(data[k],
> substitutions)) for k in data)
...which I don't understand at all.
Oh well, Hope this helps.
Change the start field in package.json from:
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
To:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
It really helped.
This answer is in relation to the excellent Pluralsight course "Angular 2 Fundamentals" by Jim Cooper.
If like me you are having trouble getting started running the command npm start on a Windows 10 machine then I suggest the following:
Start git bash as administrator (follow the steps in the video)
Navigate to the project directory (ng2-fundamentals) and then type the following commands:
npm config get registry
npm cache clean
npm install
Once the installation is complete you will need to modify the get-shell.js file located in the spawn-default-shell module inside the node_modules folder as follows:
Change the following:
const DETECT_SH_REGEX = /sh$/;
to this:
const DETECT_SH_REGEX = /sh/;
Note the $ removed from the end of the sh string (credit to the original author of this fix alfian777 who posted the solution on github)
Save the file and then go to your git bash console and type npm start
You shouldn't see any errors now and the localhost page will start up in your default browser (alternatively open your browser and navigate to http://localhost:8808/).
None of these answers helped with Ubuntu. Finally I ran across a solution from John Papa (lite-server's author).
On Ubuntu 15.10 the Angular 2 Quick Start sprang to life after running this at the terminal:
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
&& sudo sysctl -p
Apparently it increases the number of available File Watches.
Answer Source: https://github.com/johnpapa/lite-server/issues/9
I encountered this same issue. However, none of the above answers were proper solutions for me. It turns out it was due more to my dev environment then any of the versions of things.
Since I used Visual Studio Code, I set up a build task in VSC to compile TypeScript as a watcher. This was the issue. VSC had already started a NPM task for TSC and so when executing the tutorial's 'start' script, it was having issues with the fact that VSC was still running tsc -w.
I stopped the task in VSC and reran the 'start' script and it worked just fine.
Solution A: Stop and npm Start
VSC Command>Tasks: Terminate running tasks
Terminal $ npm start
After that to bring everything working together I change the start script to just start the server and not actually launch TSC.
Solution B: Change npm start script
Replace
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
with
"start": "npm run lite"
Solution C: Just run the lite server command
`npm run lite`
I solved my issue with the Quick Start program by following below link.
Angular 2 QuickStart Live-server error
Change the Package.json Scripts Settings
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\",
to:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
This answer is for Windows 10 users only and as you'll see below, I suspect the problem is happening only for those users:
To find out what is happening, you can run the command on PowerShell and it will tell you what is the actual problem:
PS C:\Users\Laurent-Philippe> tsc && concurrently "tsc -w" "lite-server"
At line:1 char:5
+ tsc && concurrently "tsc -w" "lite-server"
+ ~~
The token '&&' is not a valid statement separator in this version.
+ CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException
+ FullyQualifiedErrorId : InvalidEndOfLine
Basically, the message explains that the token "&&" is not yet valid with Windows 10. And for those wondering, the same command replacing && with &, informed us that the ampersand operator is reserved for future use:
(&) character is not allowed. The & operator is reserved for future use; wrap an ampersand in double quotation marks ("&") to pass it as part of a string.
Conclusions:
if you want to manually launch this command from the powershell, you can use this instead:
tsc "&" concurrently "tsc -w" "lite-server"
if you want to launch your application with npm start, replace the start line in your package.json by:
"start": "tsc & concurrently \"tsc -w\" \"lite-server\" "
alternatively, the answer of user60108 also works because he is not using the ampersand:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
It's most likely that your NPM version is old, i recently had this on a developer machine at work, type:
npm -v
If it's anything less than the current stable version, and you can just update your Node.js install from here https://nodejs.org/en/ :)
This worked me, put /// <reference path="../node_modules/angular2/typings/browser.d.ts" /> at the top of bootstraping file.
For example:-
In boot.ts
/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
Note:- Make sure you have mention the correct reference path.
In devDependencies typescript is 1.7.3 but you have 1.7.5 fix common one.
Import your js files in the correct order in index.html.
for more info refer this repository https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html
or refer to my repository here
https://github.com/MrPardeep/Angular2-DatePicker
index.html
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: 'node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<script>
System.import('dist/bootstrap');
</script>
Try this:
Install Latest versions npm/nodejs I purged my npm installation
After that, install tsd npm install -g tsd
Then clone https://github.com/johnpapa/angular2-tour-of-heroes.git
Finally npm i and npm start
Installing the packages globally is one way to do it, but this restricts you to using the same version across all projects in which they are used.
Instead, you can prefix your npm scripts with ./node_modules/.bin. In your case, the package.json would look like this:
{
"name": "reservationsystem",
"version": "0.0.1",
"scripts": {
"tsc": "./node_modules/.bin/tsc",
"tsc:w": "npm run tsc -w",
"lite": "./node_modules/.bin/lite-server",
"start": "./node_modules/.bin/concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"dependencies": {
"a2-in-memory-web-api": "~0.1.0",
"angular2": "2.0.0-beta.3",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"systemjs": "0.19.17",
"zone.js": "0.5.11"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^2.0.1",
"typescript": "^1.7.5"
}
}
I think npm is supposed to supply the ./node_modules/.bin in front of each "script" command that's in that directory by default, which is why the original package.json looked the way it did. I am not sure if that feature is in every release of npm, or if there's some config setting you're supposed to specify. It'd be worth looking into!
I had the same problem, we both forgot to include the 's' on components here:
import {AppComponent} from './app.component'
Should be:
boot.js:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.components'
bootstrap(AppComponent);
I had the same error on OS X (node v6.2.0 and npm v3.9.3 installed with homebrew) and it was not solved by any of the above. I had to add full paths to the commands being run by concurrently.
In package.json, I changed this:
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
to this:
"start": "tsc && concurrently \"/Users/kyen/.node/bin/npm run tsc:w\" \"/Users/kyen/.node/bin/npm run lite\" ",
You will, of course, need to update the correct paths based on where your node global binaries are stored. Note that I didn't need to add the path to the first tsc command. It seems only concurrently needs the full paths specified.
I met the same error. And after a lot search, I finally found this one: Angular2 application install & run via package.json.
Then I tried to replace
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
to
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
Hope it helps who get the same error.
PS: My error is not the same as Tomasz, which is my npm version is 3.7.3 and node version is 5.9.1.
Uninstall all existing node packages.
Update node and npm.As it is given in documentation as at least node v5.x.x and npm 3.x.x else it will cause errors .
Do npm clean.
Then do npm install, npm start.
This solved the issue for me.
For Ubuntu 16.x users, installing latest version 5.x solves my issue in ubuntu
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
Seemingly there is more than one way in which angular2-quickstart can fail to start. I had the same issue running Angular2 version 2.0.0 under a fresh install of node 6.6.0 / npm 3.10.3 on Windows 7. In my case running npm start dumped a ton of typescript errors:
c:\git\angular2-quickstart>npm start
> angular2-quickstart#1.0.0 start c:\git\angular2-quickstart
> tsc && concurrently "npm run tsc:w" "npm run lite"
node_modules/#angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/#angular/common/src/pipes/async_pipe.d.ts(39,38): error TS2304: Cannot find name 'Promise'.
(...)
This issue is discussed in angular quickstart issue #63, "typings" not being installed correctly. That ticket gives the fix as
$ ./node_modules/.bin/typings install
which worked for me. (I'm not sure of the "right" way to do this yet.)
Please make sure the names are correct, thus changing component in boot.js to components.
Go to https://github.com/npm/npm/issues/14075 address. And try juaniliska's answer. Maybe help you.
npm config get registry
npm cache clean
npm install
In the package.json file, I removed the line which had "prestart": "npm run build". This appears to be a blocking command, and occurs before (npm) start, thus preventing the other start commands.
Change start in angular.json to either "start": "ng serve --host 0.0.0.0" or "start": "lite-server" and run.Also check if you've installed angular/cli properly or not.
I the quick start tutorial I went through the steps up until npm start. Then i got this error. Then I deleted the node_modules folder under angular-quickstart and ran npm install again. Now it works.
If you use proxy it may cause this error:
npm config set proxy http://username:pass#proxy:port
npm config set https-proxy http://username:pass#proxy:port
create a file named .typingsrc in your application folder that includes:
proxy = (value on step 1)
https-proxy = (value on step 1)
run npm cache clean
run npm install
run npm typings install
run npm start
it will work then
Add the following section in tsconfig.json:
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
and in \node_modules\typings\typings.json:
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim /es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
After these changes it works for me.
Related
I'm looking for a pattern to avoid the need of global packages when working with node, I'd like to install everything I need with npm install and then just running every command with npm run xxx, without any global package installed.
For example, I have jest configured to run my tests.
These are the dependencies in my package.json:
[...]
},
"author": "",
"license": "ISC",
"dependencies": {
"#types/express": "^4.16.1",
"#types/node": "^11.10.5",
"express": "^4.16.4",
"ts-node-dev": "^1.0.0-pre.32",
"typescript": "^3.3.3333"
},
"devDependencies": {
"#types/jest": "^24.0.9",
"#types/supertest": "^2.0.7",
"jest": "^24.3.1",
"nodemon": "^1.18.10",
"supertest": "^4.0.0",
"ts-jest": "^24.0.0"
}
[...]
and these are some scripts I have configured:
[...]
"scripts": {
"test": "jest --coverage",
"tsc": "tsc",
"watch": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/server.ts"
},
[...]
But when I issue npm run test I get this error:
$ npm run test
> ci-test#0.0.1 test /home/sas/devel/apps/vue/ci-test
> jest --coverage
sh: 1: jest: not found
npm ERR! file sh
[...]
If I install jest globally with npm install -g jest everything runs fine, but that's precisely what I'm trying to avoid.
A few assumptions I made that might be wrong:
when running scripts node first looks for commands in node_modules/.bin (in order to use locally installed packages)
when I issue npm install every command line command is installed to node_modules/.bin
This last one is not working, because even though I have jest in my devDependencies there's no node_modules/.bin/jest file in my project
$ ls node_modules/.bin/
acorn cdl esgenerate esvalidate is-ci json5 loose-envify mime nodetouch parser semver sshpk-sign strip-indent watch
atob escodegen esparse import-local-fixture jsesc js-yaml marked mkdirp nopt rc sshpk-conv sshpk-verify uglifyjs
On the other hand, as a workaround, the following seems to work:
"scripts": {
"test": "npx jest --coverage",
But it takes more than 10 seconds for npx to install jest everytime I run npm run test
So, what would be the correct way to achieve it? O how can I tell npm to install jest to node_modules/.bin and use it whe I reference it in my scripts?
It seems like it was easier than expected, I just had to issue:
npm install --only=dev
seems like by default npm won't install dev dependencies
I did a couple more tests, playing with the NODE_ENV var, and after unsetting it npm install seems to install also devDependencies, along with jest in node_modules/.bin/jest. It seems like somehow it was assuming I was in production mode.
Another trick I learned to avoid installing global dependencies is to install it with --save-dev, and then adding a script to run it with npm run. For example, to avoid installing jest globally but still be able to use it from the command line you should:
npm install jest --save-dev
Then add the following to your package.json
scripts: {
"jest": "jest"
}
And then you can run it from the command line with npm run jest. To pass params from the command line you have to add a '--' before the params, like this: npm run jest -- --coverage. Or you could just issue npx jest --coverage, if installed, npx will use jest from node_modules/.bin. (check this for more info)
BTW, this answer to a similar question might be useful
I'm getting error in my Vs Code terminal and command prompt that 'ts-node' is not recognized as an internal or external command, operable program or batch file. while i'm trying the start command in the terminal npm run dev and i have added my package.json file also.
{
"name": "tsnode",
"version": "1.0.0",
"description": "ts-node experiment.",
"scripts": {
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
"start": "ts-node --fast ./server.ts"
},
"author": "Mugesh",
"license": "ISC",
"dependencies": {
"#types/body-parser": "^1.16.3",
"#types/chalk": "^0.4.31",
"#types/express": "^4.0.35",
"#types/node": "^7.0.18",
"body-parser": "^1.17.1",
"chalk": "^1.1.3",
"express": "^4.15.2",
"nodemon": "^1.11.0",
"ts-node": "^3.0.4",
"typescript": "^2.3.4"
}
}
You need to install ts-node as global
npm install -g ts-node
More information
https://github.com/TypeStrong/ts-node
I wouldn't recommend relying on globally installed ts-node in your own module as some of the answers here suggest.
If you do that then anyone who installs your module would need to install ts-node globally as well (just a usual npm install would not be enough) and then you will have a problem if two modules need things like ts-node globally installed but with different versions etc.
To avoid that, all your dependencies should be defined in your package.json and installed locally in node_modules.
There is a little-known command npx that is used to run binaries from modules that are installed locally in node_modules.
For example, see what happens when I install (locally) ts-node and typescript:
rsp#mn-r:~/node/test/ts-test-1$ npm i ts-node typescript
npm WARN ts-test-1#0.0.0 No description
npm WARN ts-test-1#0.0.0 No repository field.
+ ts-node#6.0.3
+ typescript#2.8.3
added 19 packages from 44 contributors in 2.157s
[+] no known vulnerabilities found [19 packages audited]
and then I try to run ts-node:
rsp#mn-r:~/node/test/ts-test-1$ ts-node -v
-bash: /Users/rsp/opt/node/bin/ts-node: No such file or directory
I can run it with npx:
127!rsp#mn-r:~/node/test/ts-test-1$ npx ts-node -v
ts-node v6.0.3
node v10.1.0
typescript v2.8.3
or I could give the path explicitly:
rsp#mn-r:~/node/test/ts-test-1$ ./node_modules/.bin/ts-node -v
ts-node v6.0.3
node v10.1.0
typescript v2.8.3
In any case, I don't need to install anything globally.
I just encountered a similar issue: on Mac OS --exec ts-node works, on Windows it doesn't.
My workaround is to create a nodemon.json like this:
{
"watch": "src/**/*.ts",
"execMap": {
"ts": "ts-node"
}
}
and change the package.json scripts section to
"scripts": {
"start": "nodemon src/index.ts"
},
The only solution that worked for me:
"start": "nodemon --exec npx ts-node ./index.ts",
I ran into the same problem and found that it works by using double quotes instead of single.
"dev": "nodemon --exec \"ts-node\" --cache-directory .tscache ./server.ts"
P.S. This is 1 year after the problem. Not sure if package versions are a factor. Will confirm if needed.
If you work under Windows you can't use single quote in the json file. That is why you have to replace all single quote symbols(') by the double quote symbols(").
But between two double quotes(") you have to use escaped double quote(").
For the current case you have to change the row in the file package.json:
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
into the row:
"dev": "nodemon --exec \"ts-node --cache-directory .tscache\" ./server.ts",
Nodemon is for watching and rerunning node processes when files change. The local ts-node installed in the node_modules directory is not recognized in the scope of the --exec argument. To get around this, some people have recommended installing ts-node globally. As a user pointed out, that's not a good solution because it relies on packages external to your project and makes the ts-node in our node_modules pointless.
Edit:
With newer versions of nodemon, you can simplify this even further (note: you still need ts-node installed as a devDependency).
"start": "nodemon src/index.ts"
Previous:
To fix your solution, prefix ts-node with the npx helper, which will use your local node_module executables.
package.json, inside the scripts block:
"start": "nodemon --watch './src/**/*' -e ts --exec 'npx ts-node src/index.ts'"
An alternative approach could be to use the typescript watcher with the existing node command and the concurrently package.
"start": "concurrently \"tsc --watch\" \"node ./dist/index.js\""
Same principle. One package watches for changes (nodemon & tsc) and restarts the second process (the node/ts-node server).
Edit 11/17/2021:
I returned this post to use it as a reference for setting up a prototype build and found the nodemon approach above was no longer working, it was now throwing the error:
''npx' is not recognized as an internal or external command,
operable program or batch file.
I found a fix was to convert all single quotes to escaped double quotes.
"start": "nodemon --watch \"./src/**/*\" -e ts --exec \"npx ts-node src/index.ts\""
Guess something changed since I my original post. Hope that helps!
For me deleting node_modules and installing it again using npm i was enough.
I had the similar problem, but I have resolved by replacing
"dev": "nodemon --exec 'ts-node --cache-directory .tscache' ./server.ts",
to
"dev": "nodemon --exec ts-node --cache-directory .tscache ./server.ts",
Just remove the single quote(') and install ts-node globally
I had a similar problem while using nodemon:
I had nodemon installed globally, AND ts-node only installed locally.
Solution:
I installed ts-node globally (still keeping the local dependency).
I fixed the issue by removing single quorts around ts-node. as per below
"dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
updated as
"dev": "nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts"
please note. my environment is windows 10 and npm version6.14.4
Like suggested in some answers, you should install ts-node locally and not globally. npx makes it easy to use CLI tools and other executables hosted on the registry as explained here. Hence, can be used to run ts-node on your terminal and even scripts from your package.json file. For example;
Take this to be my package.json file
{
...
"scripts": {
"start": "npx nodemon path/to/file"
}
}
Now running npm run start would not give any more issues.
You can try the following command
"dev": "nodemon --watch './**/*.ts' --exec \"ts-node\" src/index.ts"
This worked for me .
If your ts-node isn't working, as an alternative you can do the following:
1) Install nodemon locally --> npm i nodemon
2) In your package.json 'scripts' add the following:
"scripts": {
"start": "nodemon index.ts",
"test": "echo \"Error: no test specified\" && exit 1"
},
3) Now run npm start (this will automatically run node for you, but this WILL NOT COMPILE TS )
4) Open a new tab in the terminal/command line, cd the folder your working in and run tsc index.tsc --watch
This will compile your typescript. The only downside is you will just have to have both tabs open, one for running node automatically and the other for compiling automatically, but this works.
I was having the same issue on windows. I found the solution for my issue was resolved when I corrected some misplaced '
Originally:
"scripts": {
"dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}
Fixed:
"scripts": {
"dev": "nodemon --watch 'src/**/*.ts' --exec \"ts-node\" src/index.ts",
"build": "tsc",
"start": "node dist/index.js"
}
The difference in case it isn't clear is that I no longer wrap ts-node in '
* EDIT *
I changed this based on the answer from #RoutesMaps.com above. This solved my problem as well as removing the ' but #RoutesMaps.com actually explains the issue resolution
I ran this command after npm install ts-node.
This fixed my problem:
npm install -D tslib #types/node
yarn add -D ts-node
"scripts": {
"start": "ts-node src/index.ts"
}
'yarn start' now works
Found the answer.
Without installing ts-node globally, just create inside your project nodemon.json file and put it there :
{
"execMap": {
"ts": "node --loader ts-node/esm"
}
}
So now, you can keep type:"module" in your package.json and module:"ESNEXT(or smth that supports ES Modules)" in your tsconfig.json. However, you are going to get constant warning from nodemon that it's, I mean loader type, experimental feature but it's not critical.
In your package.json, in dev command for example just run nodemon path/filename.ts
If you are using a mac these are the steps I came up with in order to fix this in the terminal.
Install globaly and use the returned file path with the symlink ‘ts-node’ and move this file into /usr/local/bin
Install locally without saving to package.json
copy folder in /node_modules into /usr/local/lib/node_modules/
Make sure the file is executable by opening /ts-node/dist and using the command chmod +x bin.js
run npm i in ts-node folder
Make sure that dist folder still exsists, if not copy it back over.
Test running ts-node in terminal, if it does not work it will return an error of which module needs to be moved over to ../
After ts-node runs be sure to delete the folder /usr/local/lib/node_modules/ts-node/node_modules
I was having the same issue. I found the solution for my issue was resolved when i do simply run this command first "npm run build" and than try it nodemon and also add in package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "tsc",
"dev": "ts-node ./lib/server.ts",
"start": "nodemon ./dist/server.js",
"prod": "npm run build && npm run start"}
If you are using code-runner in vs-code then edit setting.json file
"typescript": "tsc $fileName && node $fileNameWithoutExt.js "
Write the the script like this inside your package.json file
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "rimraf ./build && tsc",
"start": "node build/index.js",
"tsc": "tsc",
"watch-node": "nodemon build/index.js",
"postinstall": "npm run tsc"
},
Then, npm run build
and finally npm run start
I encountered the same error when trying to run nodemon from a Git Bash but it seems to be working just fine when running nodemon from PowerShell. So, you should consider giving some other terminals a chance.
Me helped this command
npm i -D typescript
More specifically written there https://nodejs.dev/learn/nodejs-with-typescript
Please use TSC --init, instead of TS --init
this error can occur if you have one version of ts-node installed in your project and another version globally.
To solve the problem - install the same version of the package
Just had this same problem and came up with a hybrid solution, using npx to execute but via nodemon config (rather than package.json).
nodemon.json...
{
"watch": ["src"],
"ext": "ts",
"exec": "npx ts-node ./src/server.ts"
}
Actually if you install nodemon as globally then install ts-node also globally. If you install nodemon as -D (dev dependency) then install ts-node as dev dependency. It will work.
A bit late to the party, but my issue was that I had set the NODE_ENV=Production environment variable on my CI. When NODE_ENV is set the dev dependencies(where the ts-node was listed) won't be installed.
Removing NODE_ENV fixed the issue.
I removed it from dev dependencies and added it to dependencies. That solved the problem for my case.
I was developing my project in nodejs. I found if I need to code and test api, I will run two console, one is to execute typescript watch, another is to execute server.
I think it's so troublesome. I find other developers on github have written scripts in package.json. It's easy to call any commands. It attracts how to write the scripts and simply my development workflow.
In short, the comand of typescript watch is tsc -w and the comand of running server is node app.js. My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do? Thanks.
My idea is merge the commands as tsc -w & node app.js but I can't work the two commands at the same time. How do I do
You have a few options. Simplest is to use ts-node-dev : https://github.com/whitecolor/ts-node-dev
Option 1
Step 1
install concurrently, use npm, pnpm or yarn
pnpm i concurrently -D
Step 2
create a script with this command
"scripts": {
"run": "tsc && concurrently \"tsc -w\" \"nodemon dist/app.js\"",
}
Option 2
without install anything (mac or Linux)
"scripts": {
"run": "tsc -w & nodemon dist/app.js",
}
run tsc first so that your directory has something at the time of running node
And with that you will have running your Typescript application 🚀
Another option can be to use nodemon:
tsc -w & nodemon app.js
Since Typescript 3.4 the compilation is faster because you can use the incremental compiler option and they keep improving (including interesting changes for large projects in 3.8).
Update:
I also moved to use concurrently as HerberthObregon says in his answer
TLDR, If you like nodemon this is a straight forward way to get file watch, compilation and execution:
nodemon --ext ts --exec 'tsc && node dist/index.js'
Optionally replace tsc with babel for faster compilation.
Here is a more complete example, in package.json (with source maps):
"scripts": {
"develop": "nodemon --ext ts --exec 'yarn build --incremental && yarn serve'",
"build": "tsc",
"serve": "node --require source-map-support/register dist/index.js",
...
},
Install source-map-support as a dependency if you want, ahem... source map support! Otherwise, remove --require source-map-support/register from the serve script above.
tsconfig.json
{
"compilerOptions": {
...
"sourceMap": true,
"outDir": "dist",
}
}
Building on herberthObregon's answer
Step 1: Install packages
npm install concurrently typescript nodemon --save-dev
Step 2: Create these scripts in package.json
"scripts": {
"build": "tsc",
"build:watch": "tsc -w",
"dev": "npm run build && concurrently \"npm run build:watch\" \"npm run serve:watch\"",
"serve": "node dist/index.js",
"serve:watch": "nodemon dist/index.js"
},
build runs a standard typescript build
build:watch runs typescript build in watch mode
serve serves up your node project (assuming your tsconfig outputs to dest/index/js)
serve:watch uses nodemon to restart the node server whenever the js output changes
dev puts them all together
Just going to throw my hat in here, here's a solution using ts-node-dev and concurrently, similar to the one provided by #HerberthObregon but using ts-node-dev instead of nodemon:
"scripts": {
"start": "npm run build && concurrently \"npm run build:watch\" \"npm run dev\"",
"dev": "tsnd --respawn src/main.ts",
"build": "tsc -p tsconfig.release.json",
"build:watch": "tsc -w -p tsconfig.release.json"
}
Bonus: If you need help with your figuring out tscand your tsconfig.json, I use the sensible defaults from this node typescript starter.
Here's a solution that works for me
1. Install ts-node and nodemon as dev dependencies
2. Create a script : "dev" : "nodemon app.ts"
How can I execute the start script from a package.json file with Nodemon?
This will be a simple command for this
nodemon --exec npm start
In package json:
{
"name": "abc",
"version": "0.0.1",
"description": "my server",
"scripts": {
"start": "nodemon my_file.js"
},
"devDependencies": {
"nodemon": "~1.3.8",
},
"dependencies": {
}
}
Then from the terminal you can use npm start
Nodemon installation: https://www.npmjs.com/package/nodemon
I have a TypeScript file called "server.ts", The following npm scripts configures Nodemon and npm to start my app and monitor for any changes on TypeScript files:
"start": "nodemon -e ts --exec \"npm run myapp\"",
"myapp": "tsc -p . && node server.js",
I already have Nodemon on dependencies. When I run npm start, it will ask Nodemon to monitor its files using the -e switch and then it calls the myapp npm script which is a simple combination of transpiling the typescript files and then starting the resulting server.js. When I change the TypeScript file, because of -e switch the same cycle happens and new .js files will be generated and executed.
I use Nodemon version 1.88.3 in my Node.js project.
To install Nodemon, see in https://www.npmjs.com/package/nodemon.
Check your package.json, see if "scripts" has changed like this:
"scripts": {
"dev": "nodemon server.js"
},
server.js is my file name, you can use another name for this file like app.js.
After that, run this on your terminal: npm run dev
Use -exec:
"your-script-name": "nodemon [options] --exec 'npm start -s'"
In package json:
"scripts": {
"start": "node index",
"dev": "nodemon index"
},
"devDependencies": {
"nodemon": "^2.0.2"
}
And in the terminal for developing:
npm run dev
And for starting the server regularly:
npm start
First change your package.json file,
"scripts":
{
"start": "node ./bin/www",
"start-dev": "nodemon ./app.js"
},
After that, execute command
npm run start-dev
In package.json file. change file like this
"scripts":{
"start": "node ./bin/www",
"start-dev": "nodemon ./app.js"
},
and then execute npm run start-dev
Add this to script object from your project's package.json file
"start":"nodemon index.js"
It should be like this
"scripts": {
"start":"nodemon index.js"
}
Nodemon emits events upon every change in state; start, restart crash, etc. You can add a Nodemon configuration file (nodemon.json) like so:
{
"events": {
"start": "npm run *your_file*"
}
}
Read more in Nodemon events — run tasks at server start, restart, crash, exit.
If globally installed then
"scripts": {
"start": "nodemon FileName.js(server.js)",
},
Make sure you have installed nodemon globally:
npm install -g nodemon
Finally, if you are a Windows user, make sure that the security restriction of the Windows PowerShell is enabled.
I simply use 'npx' in the terminal to set up nodemon and execute it
npx nodemon
You can also install nodemon globally for frequent use:
npm i nodemon -g or sudo npm i nodemon -g
then edit your package.json:
"scripts": {
"start": "node index.js",
"dev": "nodemon index.js"
},
Generally, 'dev' specifies developmental use (npm run dev).
It will depend on types of your Nodemon installation. If you install Nodemon globally by using commands (npm install nodemon --global or npm install nodemon -g), you do not have to specify any script for Nodemon in your package.json file. Just executing command nodemon index.js will run your project.
But if you install Nodemon locally by command npm install nodemon then you have to specify the script. If you name it as start then npm run start or npm start will trigger the server to run.
// Absolutely no need for global installation
"scripts": {
"start": "nodemon index.js"
}
{
"name": "backend",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "nodemon ./bin/www"
},
"dependencies": {
"bcrypt": "^5.0.1",
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"hbs": "^4.1.2",
"http-errors": "~1.6.3",
"morgan": "~1.9.1",
"nodemon": "^2.0.12"
}
}
use "nodemon ./bin/www" scripts > start
eg:
"scripts": {
"start": "nodemon ./bin/www"
},
Try this, with watch:
nodemon --exec ts-node pathtoapp/filewithserver.ts -e ts
my project example: nodemon --exec ts-node src/server.ts -e ts
To avoid a global install, add Nodemon as a dependency, then...
package.json
"scripts": {
"start": "node ./bin/www",
"start-dev": "./node_modules/nodemon/bin/nodemon.js ./bin/www"
},
If you have nodemon installed globally, simply running nodemon in your project will automatically run the start script from package.json.
For example:
"scripts": {
"start": "node src/server.js"
},
From the nodemon documentation:
nodemon will also search for the scripts.start property in package.json (as of nodemon 1.1.x).
I know it's 5 years late, if you want to use nodemon.json you may try this,
{
"verbose": true,
"ignore": ["*.test.js", "fixtures/*"],
"execMap": {
"js": "electron ." // 'js' is for the extension, and 'electron .' is command that I want to execute
}
}
The execMap will execute like a script in package.json, then you can run nodemon js
You can use this instead of npm start :
npx env-cmd nodemon
You can do this one:
nodemon --exec ts-node src/app.ts
This will run the app.ts for you forever
First install package for nodemon as dev dependencies using
$ npm i nodemon -D
Then your package.json will have:
"devDependencies": {
"nodemon": "^2.0.20"
}
Then you can edit change package.json scripts part as
"scripts": {
"start": "node app.js",
"dev": "nodemon app.js"
}
Then you can use command:
$ npm run dev
You can also install nodemon as a development dependency:
npm install --save-dev nodemon or using yarn: yarn add nodemon -D.
With a local installation, nodemon will not be available in your system path or you can't use it directly from the command line. Instead, the local installation of nodemon can be run by calling it from within an npm script (such as npm start) or using npx nodemon.
In other words just run it with npx nodemon index.js
Just use the command : npx nodemon app.js
This is very simple ! and we can run the below command without altering the package.json file in your project
see below:
scripts": {
"build": "node_modules/.bin/babel sercer/src --out-dir server/dist ",
"build:watch": "node_modules/.bin/babel server/src --out-dir server/dist --watch",
"start:server": "node ./node_modules/nodemon/bin/nodemon.js ./server/dist/app.js",
"dev" : "(npm run build:watch) && (npm run start:server)"
}
you know, both of them can work well when I run npm run xxx , but when i conbian them like npm run dev does,the last one will not taking effect.what wrong with my script?
You could try
"dev" : "npm run build:watch && npm run start:server"
you can use the post- and pre- scripts that will be called before and after that script.
eg :
"build": "npm run build:css && npm run build:js",
"prebuild:js": "npm run lint"
In the above example build will execute both build:css and build:js - but not before running the lint task.