Angular2 QuickStart npm start is not working corre

2020-01-23 15:05发布

站内问答 / Angular
1779 30 5

File structure

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

30条回答
Evening l夕情丶
2楼-- · 2020-01-23 15:42

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);
查看更多
0人赞 添加讨论(0) 举报
女痞
3楼-- · 2020-01-23 15:43

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.

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
4楼-- · 2020-01-23 15:44

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

查看更多
0人赞 添加讨论(0) 举报
ら.Afraid
5楼-- · 2020-01-23 15:44

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

查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
6楼-- · 2020-01-23 15:46

If you use proxy it may cause this error:

  1. npm config set proxy http://username:pass@proxy:port

  2. npm config set https-proxy http://username:pass@proxy:port

  3. create a file named .typingsrc in your application folder that includes:

    • proxy = (value on step 1)
    • https-proxy = (value on step 1)

  4. run npm cache clean

  5. run npm install
  6. run npm typings install
  7. run npm start

it will work then

查看更多
0人赞 添加讨论(0) 举报
冷血范
7楼-- · 2020-01-23 15:47

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 3 4 5 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)