program story

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

inputbox 2020. 8. 10. 08:04
반응형

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


파일 구조

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

정말 도움이되었습니다.


이 답변은 Jim Cooper의 우수한 Pluralsight 과정 "Angular 2 Fundamentals"와 관련이 있습니다.

나처럼 Windows 10 컴퓨터에서 npm start 명령을 실행하는 데 문제가 있다면 다음을 제안합니다.

관리자 권한으로 git bash를 시작하고 (동영상의 단계를 따르십시오) 프로젝트 디렉토리 ( ng2-fundamentals )로 이동 한 후 다음 명령을 입력하십시오.

npm config get registry

npm cache clean

npm install

설치가 완료되면 node_modules 폴더 내의 spawn-default-shell 모듈에있는 get-shell.js 파일을 다음과 같이 수정해야합니다.

다음을 변경하십시오.

const DETECT_SH_REGEX = /sh$/;

이에:

const DETECT_SH_REGEX = /sh/;

sh 문자열의 끝에서 제거 된 $를 확인합니다 ( github에 솔루션을 게시 한이 수정 alfian777의 원래 작성자에게 크레딧 )

파일을 저장 한 다음 git bash 콘솔로 이동하여 npm start를 입력합니다.

이제 오류가 표시되지 않아야하며 기본 브라우저에서 localhost 페이지가 시작됩니다 (또는 브라우저를 열고 http : // localhost : 8808 /로 이동 ).


이 답변 중 어느 것도 우분투에 도움이되지 않았습니다 . 마지막으로 John Papa (라이트 서버 작성자)의 솔루션을 발견했습니다.

Ubuntu 15.10에서 Angular 2 Quick Start는 터미널에서 다음을 실행 한 후 활성화되었습니다.

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

분명히 그것은 사용 가능한 파일 감시의 수를 증가시킵니다.

답변 출처 : https://github.com/johnpapa/lite-server/issues/9


이 같은 문제가 발생했습니다. 그러나 위의 답변 중 어느 것도 나에게 적절한 해결책이 아닙니다. 그것은 더 많은 것의 버전보다 내 개발 환경 때문인 것으로 밝혀졌습니다.

Visual Studio Code를 사용했기 때문에 VSC에서 빌드 작업을 설정하여 TypeScript를 감시자로 컴파일했습니다. 이것이 문제였습니다. VSC는 이미 TSC에 대한 NPM 작업을 시작 했으므로 자습서의 '시작'스크립트를 실행할 때 VSC가 여전히 실행 중이라는 사실에 문제가있었습니다 tsc -w.

VSC에서 작업을 중지하고 '시작'스크립트를 다시 실행했는데 제대로 작동했습니다.

해결 방법 A : 중지 및 npm 시작

  • VSC 명령> 작업 : 실행중인 작업 종료
  • 터미널 $ npm start

그 후 모든 것이 함께 작동하도록 시작 스크립트를 변경하여 서버를 시작하고 실제로 TSC를 시작하지 않습니다.

해결 방법 B : npm 시작 스크립트 변경

  • 바꾸다

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

  • "start": "npm run lite"

해결 방법 C : lite server 명령을 실행하십시오.

`npm run lite`

아래 링크를 따라 Quick Start 프로그램 관련 문제를 해결했습니다.

Angular 2 QuickStart 라이브 서버 오류

Package.json스크립트 설정 변경

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

에:

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

이 답변은 Windows 10 사용자 전용이며 아래에서 볼 수 있듯이 해당 사용자에게만 문제가 발생한다고 생각합니다.

무슨 일이 일어나고 있는지 알아보기 위해 PowerShell에서 명령을 실행하면 실제 문제가 무엇인지 알려줍니다.

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

기본적으로 메시지는 "&&"토큰이 Windows 10에서 아직 유효하지 않다고 설명합니다. 궁금한 사람들을 위해 &&를 &로 바꾸는 동일한 명령이 앰퍼샌드 연산자가 향후 사용을 위해 예약되어 있음을 알려줍니다.

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

결론 :

  • powershell에서이 명령을 수동으로 시작하려면 대신 다음을 사용할 수 있습니다.

    tsc "&"동시 "tsc -w" "lite-server"

  • npm start로 애플리케이션을 시작하려면 package.json의 시작 줄을 다음으로 바꿉니다.

    "start": "tsc 및 동시에 \"tsc -w \ "\"lite-server \ ""

  • 또는 user60108의 대답은 앰퍼샌드를 사용하지 않기 때문에 작동합니다.

    "start": "동시에 \"npm run tsc : w \ "\"npm run lite \ ""


NPM 버전이 오래되었을 가능성이 큽니다. 최근 작업중인 개발자 컴퓨터에 다음을 입력했습니다.

npm -v

현재 안정 버전보다 낮 으면 여기 https://nodejs.org/en/ 에서 Node.js 설치를 업데이트 할 수 있습니다. :)


이것은 나를 일하고 /// <reference path="../node_modules/angular2/typings/browser.d.ts" />부트 스트랩 파일의 맨 위에 놓았 습니다.

예 :-

에서 boot.ts

/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.component'

bootstrap(AppComponent);

참고 :-올바른 참조 경로를 언급했는지 확인하십시오 .


  1. devDependencies에서 typescript는 1.7.3이지만 1.7.5 수정 공통 사항이 있습니다.
  2. .NET Framework에서 올바른 순서로 js 파일을 가져옵니다 index.html. 자세한 내용은이 저장소 https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html을 참조 하거나 여기에서 내 저장소를 참조하십시오.

    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> 

단계를 문제 없게 재현 할 수 있습니다.

시도하십시오 :

(1) index.html 에서이 줄을 제거하십시오.

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

(2) 파일 수정 : app.components.ts , 템플릿 필드 의 줄 끝에서 ","삭제

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

내 환경은 다음과 같습니다.

$ node -v
v5.2.0

$ npm -v
3.3.12

$ tsc -v
message TS6029: Version 1.7.5

내 작업에 대한이 저장소를 참조하십시오 : https://github.com/AlanJui/ng2-quick-start


이 시도:

  1. 최신 버전 설치 npm / nodejs 내 npm 설치를 제거했습니다.
  2. 그 후 tsd를 설치하십시오. npm install -g tsd
  3. 그런 다음 https://github.com/johnpapa/angular2-tour-of-heroes.git 복제
  4. 마지막으로 npm i하고npm start

패키지를 전역으로 설치하는 것도이를 수행하는 한 가지 방법이지만, 패키지가 사용되는 모든 프로젝트에서 동일한 버전을 사용하도록 제한됩니다.

대신 npm 스크립트에 ./node_modules/.bin. 귀하의 경우에는 package.json다음과 같습니다.

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

npm은 ./node_modules/.bin기본적으로 해당 디렉토리에있는 각 "스크립트"명령 앞에 제공해야한다고 생각합니다. 이것이 원본 package.json이 그랬던 것처럼 보이는 이유 입니다. 해당 기능이 npm의 모든 릴리스에 있는지 또는 지정해야하는 구성 설정이 있는지 확실하지 않습니다. 살펴볼 가치가 있습니다!


나는 똑같은 문제가 있었고 우리 둘 다 여기에 구성 요소에 's'를 포함하는 것을 잊었습니다.

import  {AppComponent} from './app.component'

해야한다:

boot.js :

import {bootstrap} from 'angular2/platform/browser'
import  {AppComponent} from './app.components'

bootstrap(AppComponent);

OS X (노드 v6.2.0 및 npm v3.9.3이 homebrew와 함께 설치됨)에서 동일한 오류가 발생했으며 위의 어느 것으로도 해결되지 않았습니다. 동시에 실행되는 명령에 전체 경로를 추가해야했습니다.

package.json에서 다음과 같이 변경했습니다.

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

이에:

"start": "tsc && concurrently \"/Users/kyen/.node/bin/npm run tsc:w\" \"/Users/kyen/.node/bin/npm run lite\" ",

물론 노드 전역 바이너리가 저장된 위치에 따라 올바른 경로를 업데이트해야합니다. 첫 번째 tsc 명령에 경로를 추가 할 필요가 없었습니다. 동시에 지정된 전체 경로 만 필요한 것 같습니다.


나는 같은 오류를 만났다. 그리고 많은 검색 끝에 마침내 Angular2 application install & run via package.json을 찾았습니다 . 그런 다음 교체하려고

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

"scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", "lite": "lite-server", "postinstall": "typings install", "tsc": "tsc", "tsc:w": "tsc -w", "typings": "typings" },

같은 오류가 발생하는 데 도움이되기를 바랍니다.

추신 : 내 오류는 내 npm 버전이 3.7.3이고 노드 버전이 5.9.1 인 Tomasz와 동일하지 않습니다.


기존 노드 패키지를 모두 제거하십시오. 노드와 npm을 업데이트합니다. 문서에 최소한 노드 v5.xx 및 npm 3.xx로 제공되므로 오류가 발생합니다.

마십시오 npm clean. 그런 다음 npm install, npm start.

이것은 나를 위해 문제를 해결했습니다.


Ubuntu 16.x 사용자의 경우 최신 버전 5.x를 설치하면 우분투에서 내 문제가 해결됩니다.

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs

angular2-quickstart 가 시작되지 않을 수 있는 방법은 여러 가지가 있습니다. Windows 7에서 노드 6.6.0 / npm 3.10.3을 새로 설치 한 상태 에서 Angular2 버전 2.0.0을 실행하는 것과 동일한 문제 npm start가 발생했습니다.

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

이 문제는 각도 빠른 시작 문제 # 63, "입력"이 올바르게 설치되지 않음에서 설명합니다 . 그 티켓은 다음과 같이 수정합니다.

$ ./node_modules/.bin/typings install

그것은 나를 위해 일했습니다. (이 작업을 수행하는 "올바른"방법은 아직 확실하지 않습니다.)


확실히 이름이 따라서 변경 올바른지 확인하십시오 componentboot.jscomponents.여기에 이미지 설명 입력


https://github.com/npm/npm/issues/14075 주소로 이동합니다 . 그리고 juaniliska의 대답을 시도하십시오. 아마 당신을 도울 것입니다.

npm 구성 레지스트리 가져 오기

npm 캐시 정리

npm 설치


package.json 파일에서 "prestart": "npm run build". 이것은 차단 명령으로 보이며 (npm) 시작 전에 발생하므로 다른 시작 명령을 방지합니다.


angular.json의 시작을 "start": "ng serve --host 0.0.0.0"또는로 변경 "start": "lite-server"하고 실행하십시오. 또한 angular / cli를 올바르게 설치했는지 확인하십시오.


나는까지 단계를 수행 한 빠른 시작 튜토리얼 npm start입니다. 그런 다음이 오류가 발생했습니다. 그런 다음 node_modules아래 폴더를 삭제하고 다시 angular-quickstart실행 npm install했습니다. 이제 작동합니다.


프록시를 사용하면 다음 오류가 발생할 수 있습니다.

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

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

  3. 다음 .typingsrc을 포함하는 응용 프로그램 폴더에 이름이 지정된 파일을 만듭니다 .

    • proxy = (1 단계의 값)
    • https-proxy = (1 단계의 값)
  4. 운영 npm cache clean

  5. 운영 npm install
  6. 운영 npm typings install
  7. 운영 npm start

그러면 작동합니다

참고 URL : https://stackoverflow.com/questions/34335340/angular2-quickstart-npm-start-is-not-working-correctly

반응형