programing

Angular2 QuickStart npm 시작이 올바르게 작동하지 않음

yellowcard 2023. 9. 7. 21:38
반응형

Angular2 QuickStart npm 시작이 올바르게 작동하지 않음

File structure

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 버전

아마 누군가가 문제 해결을 도와줄 수 있을 겁니다 :)?

꾸러미의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.debook:

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

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 아들입니다.

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

로.

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

를 얻기 npm start저를 위해 실행할 때, 전 세계적으로 일부 devDependency를 설치했는지 확인해야 했습니다.시도해 보셨습니까?

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

먼저 npm 업데이트, lite-server 및 타이프스크립트가 필요합니다.

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

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

npm install

ENOSPC 오류를 해결한 후 다음을(를)

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

마지막으로:

npm start

이것은 제 소포입니다.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"
  }
}

윈도우 10에서도 같은 오류가 있었습니다.동시에 npm 패키지에 문제가 있는 것 같습니다.이 오류를 해결하는 두 가지 방법을 찾았습니다.

  • 1. 두 명령을 두 개의 개별 cmds로 실행합니다.

    • 에서: 에서 에서 :npm run tsc:w
    • 에서 에서 :npm run lite
  • 체인지 2. package.json

    • 같이 합니다."start": "tsc && npm run tsc:w | npm run lite",

여러 시간 동안 다양한 솔루션을 시도한 후 오늘 문제를 해결한 방법은 다음과 같습니다. (여전히 다른 방법을 찾고 있는 모든 사람에게)

빠른 시작 dir에서 cmd 인스턴스 2개를 엽니다.

창 #1:

npm run build:watch

그럼...

창 #2:

npm run serve

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

angular2-quickstart 폴더(node_modules 포함)를 복사하여 angular2-tour-of-heroes 폴더를 생성한 후 유사한 문제가 발생했습니다.원본은 잘 편집되고 있었지만 사본은...

npm run tsc

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

저는 깜짝 놀랄 일이라 폴더 두 개 사이에 차이가 있었습니다.

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

패키지에는 많은 차이와 '어디에' 차이가 있었습니다.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)

...전혀 이해할 수 없는 일입니다.

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

패키지의 시작 필드를 변경합니다.json 출처:

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

받는 사람:

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

정말 도움이 됐어요.

이 답변은 Jim Cooper의 우수한 복수 시력 강좌 "Angular 2 Fundamentals"와 관련된 것입니다.

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

관리자로 git bash를 시작합니다(동영상의 단계를 따릅니다) 프로젝트 디렉토리(ng2-fundamentals)로 이동한 후 다음 명령을 입력합니다.

npm config get registry

npm cache clean

npm install

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

다음을 변경합니다.

const DETECT_SH_REGEX = /sh$/;

다음 항목에 대해:

const DETECT_SH_REGEX = /sh/;

sh 문자열 끝에서 제거된 $(github에 솔루션을 게시한 이 수정자 alfian777의 원본 작성자에게 공을 돌립니다.)

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

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

Ubuntu에 도움이 되는 답변은 없었습니다.마침내 나는 John Papa(라이트 서버의 저자)의 해결책을 우연히 발견했습니다.

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

echo fs.notify.max_user_watchs=524288 | sudo tee -a /etc/sudoctl.conf & sudo sysctl -p

그것은 사용 가능한 파일워치의 수를 증가시키는 것으로 보입니다.

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

저도 이와 같은 문제에 직면했습니다.하지만 위의 어떤 답변도 제게 적절한 해결책이 아니었습니다.그것은 어떤 버전의 사물보다 내 개발 환경에 기인한 것으로 드러났습니다.

Visual Studio Code를 사용했기 때문에, TypeScript를 watcher로 컴파일하기 위해 VSC에서 빌드 작업을 설정했습니다.이것이 문제였습니다.할 때 가 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`

아래 링크를 따라 빠른 시작 프로그램으로 문제를 해결했습니다.

각도 2 QuickStart Live-server 오류

합니다를 .Package.json 설정트

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

대상:

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

이 대답은 윈도우 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

기본적으로 이 메시지는 토큰 "&&"이 아직 윈도우 10에서는 유효하지 않다고 설명합니다.궁금하신 분들을 위해 &amp;을 &amp;로 대체한 동일한 명령어를 통해 앰퍼샌드 연산자는 향후 사용을 위해 예약되어 있음을 알려드렸습니다.

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

결론:

  • 파워셸에서 이 명령을 수동으로 실행하려면 대신 다음을 사용할 수 있습니다.

    tsc "&" 동시에 "tsc -w" "slot-server"

  • npm start로 응용프로그램을 시작하려면 패키지의 시작 줄을 바꿉니다.json 기준:

    "start": "tsc & 동시에 \"tsc -w\" \"tsc-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에서 스크립트 유형은 1.7.3이지만 1.7.5에서 공통 스크립트를 수정할 수 있습니다.
  2. 을 js 을 로 의 올바른 순서로 .index.html. 자세한 정보는 이 저장소 https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html 를 참조하거나 여기 있는 내 저장소를 참조하십시오.

    https://github.com/MrPardeep/Angular2-DatePicker

색인을 작성하다

<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. 최신 버전 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기본적으로 해당 디렉토리에 있는 각각의 "script" 명령 앞에, 원본이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이 홈브루와 함께 설치됨)에서 동일한 오류가 발생하여 위 어느 것으로도 해결되지 않았습니다.동시에 실행 중인 명령어에 전체 경로를 추가해야 했습니다.

패키지로.제이슨, 이걸 바꿨습니다

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

같은 오류를 범하는 사람들에게 도움이 되기를 바랍니다.

추신: 제 오류는 Tomasz와 같지 않습니다. 제 npm 버전은 3.7.3이고 노드 버전은 5.9.1입니다.

기존 노드 패키지를 모두 제거합니다.노드 및 npm 업데이트.최소한 노드 v5.x.x 및 npm 3.x.x로 설명서에 나와 있으므로 그렇지 않으면 오류가 발생합니다.

npm clean. 그럼.npm install,npm start.

이것으로 저는 문제가 해결되었습니다.

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

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

각진 2-퀵 스타트가 시작에 실패할 수 있는 방법은 한 가지가 아닌 것 같습니다.윈도우 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장화를 신고components. enter image description here

https://github.com/npm/npm/issues/14075 주소로 이동합니다.그리고 후아니리스카의 대답을 시도해보세요.도와줄 수도 있겠군요.

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

npm 캐시 클린

npm설치

소포 안, json 파일, 있던 제거했습니다 j which line 제거했습니다 had the 파일 , , removed son 소포 i 있던 file son j 안에"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-message = (1단계의 값)
  4. npm cache clean

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

그러면 될 겁니다.

에 다음 섹션 tsconfig.json:

"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}

그리고 안에\node_modules\typings\typings.json:

"ambientDependencies": {
  "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim /es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}

이런 변화가 있은 후에 저는 효과가 있습니다.

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

반응형