[node.js] Angular2 QuickStart npm start가 제대로 작동하지 않습니다.

Program / 글쓴이

파일 구조

Angular2 베타가 방금 출시되었음을 알고 있지만 공식 사이트 자습서 ( https://angular.io/guide/quickstart ) 의 단계를 재현 할 수 없습니다 . 누군가 비슷한 문제가 있었고이 문제를 해결하기 위해 무엇을해야하는지 알고 있습니까? npm start명령으로 응용 프로그램을 시작하려고 하면 다음과 같은 출력이 나타납니다.

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 ]

나는 : typescript 1.7.5 버전 노드 0.12.2 버전

누군가가 문제를 해결하는 데 도움이 될 수 있습니다. :)?

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

답변

startpackage.json 의 필드를 다음에서 변경하십시오.

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

에 

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

답변

npm start나를 위해 실행하려면 devDependencies 중 일부를 전역 적으로 설치했는지 확인해야했습니다. 시도해 보셨습니까?

  • npm install -g concurrently
  • npm install -g lite-server
  • npm install -g typescript

답변

먼저 npm, lite-server 및 typescript 업데이트가 필요합니다.

sudo npm update -g && sudo npm install -g concurrently lite-server typescript

Angular 프로젝트 디렉터리에서 node_modules 폴더를 삭제합니다 (존재하는 경우). 다음 실행 :

npm install

그 후 ENOSPC 오류를 해결합니다.

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

드디어:

npm start

이것은 내 package.json 파일입니다. 

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

스 니펫 확장

답변

Windows 10에서 동일한 오류가 발생했습니다. 동시에 npm 패키지에 문제가있는 것 같습니다. 이 오류를 해결하는 방법에는 두 가지 옵션이 있습니다.

  • 1. 2 개의 별도 cmd에서 두 명령을 모두 실행합니다.

    • 첫 번째 실행에서 : npm run tsc:w
    • 두 번째 : npm run lite

  • 2. 변경 package.json

    • 시작 옵션을 다음과 같이 변경하십시오.
      "start": "tsc && npm run tsc:w | npm run lite",

답변

다음은 이러한 다양한 솔루션을 모두 시도한 후 오늘 문제를 해결 한 방법입니다 (아직도 다른 방법을 찾고있는 사람을 위해).

빠른 시작 디렉터리에서 cmd 인스턴스 2 개를 엽니 다.

창 # 1 :

npm run build:watch

그때…

창 # 2 :

npm run serve

그런 다음 브라우저에서 열리고 예상대로 작동합니다.

답변

angular2-tour-of-heroes 폴더를 만들기 위해 angular2-quickstart 폴더 (node_modules 포함)를 복사 한 후 비슷한 문제가 발생했습니다. 원본이 잘 컴파일 되었기 때문에 이것은 이상했지만 사본은 …

npm run tsc

node_modules 폴더 를 삭제하고 npm install을 다시 실행 하여 문제를 해결할 수있었습니다 .

놀랍게도 두 폴더를 비교 해봤는데 …

diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/

다음과 같은 package.json 파일에는 많은 차이점이 있습니다.

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"

… 어떤 종류의 의미가 있지만 다음과 같은 것도 있습니다.

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)

… 나는 전혀 이해하지 못합니다.

오, 이것이 도움이되기를 바랍니다.

답변

package.json의 시작 필드를 다음에서 변경하십시오.

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

에:

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

정말 도움이되었습니다.