Angular2 QuickStart npm start is not working corre

2020-01-23 15:44发布

站内文章 / Angular

47 0

一夜七次

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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);

回答1:

Change the start field in package.json from

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "

"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "

回答2:

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

回答3:

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"
  }
}

回答4:

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",

回答5:

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

回答6:

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.

回答7:

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.

回答8:

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/).

回答9:

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

回答10:

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`

回答11:

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\" ",

回答12:

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\" "

回答13:

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/ :)

回答14:

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.

回答15:

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>

回答16:

I can reproduce steps without any problem.

Please try:

(1) remove this line from your index.html

<script src="node_modules/es6-shim/es6-shim.js"></script>

(2) modify file: app.components.ts, delete "," at the end of line in template field

@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})

Here is my environment:

$ node -v
v5.2.0

$ npm -v
3.3.12

$ tsc -v
message TS6029: Version 1.7.5

Please refer this repo for my work: https://github.com/AlanJui/ng2-quick-start

回答17:

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

回答18:

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!

回答19:

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);

回答20:

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.

回答21:

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.

回答22:

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.

回答23:

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

回答24:

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.)

回答25:

Please make sure the names are correct, thus changing component in boot.js to components.

回答26:

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

回答27:

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.

回答28:

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.

回答29:

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.

回答30:

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

标签： node.js angular npm