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);
start
package.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);
참고 :-올바른 참조 경로를 언급했는지 확인하십시오 .
- devDependencies에서 typescript는 1.7.3이지만 1.7.5 수정 공통 사항이 있습니다.
- .NET Framework에서 올바른 순서로 js 파일을 가져옵니다
index.html
. 자세한 내용은이 저장소 https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html을 참조 하거나 여기에서 내 저장소를 참조하십시오.
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
이 시도:
- 최신 버전 설치 npm / nodejs 내 npm 설치를 제거했습니다.
- 그 후 tsd를 설치하십시오.
npm install -g tsd
- 그런 다음 https://github.com/johnpapa/angular2-tour-of-heroes.git 복제
- 마지막으로
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
그것은 나를 위해 일했습니다. (이 작업을 수행하는 "올바른"방법은 아직 확실하지 않습니다.)
확실히 이름이 따라서 변경 올바른지 확인하십시오 component
에 boot.js 에 components
.
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
했습니다. 이제 작동합니다.
프록시를 사용하면 다음 오류가 발생할 수 있습니다.
npm config set proxy http://username:pass@proxy:port
npm config set https-proxy http://username:pass@proxy:port
다음
.typingsrc
을 포함하는 응용 프로그램 폴더에 이름이 지정된 파일을 만듭니다 .- proxy = (1 단계의 값)
- https-proxy = (1 단계의 값)
운영
npm cache clean
- 운영
npm install
- 운영
npm typings install
- 운영
npm start
그러면 작동합니다
참고 URL : https://stackoverflow.com/questions/34335340/angular2-quickstart-npm-start-is-not-working-correctly
'program story' 카테고리의 다른 글
for 루프가 둘 이상 증가 / 감소 할 수 있습니까? (0) | 2020.08.11 |
---|---|
jQuery Ajax를 사용하여 MVC 컨트롤러 메서드에 개체 목록 전달 (0) | 2020.08.11 |
Eclipse의 Android 앱 : 그래픽 레이아웃에 표시되지 않는 텍스트 편집 (0) | 2020.08.10 |
오버플로 CSS 속성이 숨겨진 값으로 작동하도록 만드는 방법 (0) | 2020.08.10 |
PascalCase를 pascal_case로 변환하는 방법? (0) | 2020.08.10 |