Angular2 QuickStart npm start ทำงานไม่ถูกต้อง


105

โครงสร้างไฟล์

ฉันรู้ว่า Angular2 beta เพิ่งเปิดตัว แต่ฉันไม่สามารถทำซ้ำขั้นตอนจากบทช่วยสอนของเว็บไซต์อย่างเป็นทางการได้ ( 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);

คุณช่วยแก้ไขโพสต์ด้วยไฟล์ของคุณได้ไหม
Romain

โครงสร้างโฟลเดอร์ของคุณคืออะไร? index.html อยู่ในapp/หรือภายนอก?
the_critic

ครั้งแรกไฟล์ของคุณboot.jsจะต้องเป็นไฟล์ typescript เปลี่ยนชื่อเป็นboot.ts ฉันไม่เห็นสิ่งอื่นที่ดูเหมือนจะผิด ... ตามที่the_criticกล่าวคุณช่วยให้โครงสร้างโครงการของคุณกับเราได้
Romain

มันคือ boot.ts. ฉันพิมพ์ 'js' ที่นี่ใน stackoverflow โดยไม่ได้ตั้งใจ - ขออภัย ดัชนี html อยู่ในรูทเช่น package.json เป็นต้น ไม่ได้อยู่ในแอป / ไดเรกทอรี
Tomasz Ciunel

2
ตรวจสอบให้แน่ใจรุ่นโหนดของคุณ>=4.2.1 <5และรุ่น NPM ของคุณจะถูก>=2.14.7 <3.0ระบุไว้ในคู่มือสำหรับนักพัฒนา ฉันคิดว่าคุณสามารถทำให้มันทำงานกับโหนด 5 ได้ แต่ฉันไม่รู้ว่าจะทำอย่างไร
Eric Martinez

คำตอบ:


224

เปลี่ยนstartฟิลด์ใน package.json จาก

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

ถึง

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

2
ทำไมเขาถึงเรียกใช้ tsc สองครั้ง ( tscและtsc -w)
smartmouse

9
มันได้ผล! แต่ทำไม? เริ่มท้อใจใน ng2 แล้ว
Maxim

9
ในหลักสูตร "เริ่มเล่นโดยเล่นเชิงมุม 2 อย่างรวดเร็ว" ใน Pluralsight Ward Bell อธิบายถึงสิ่งนี้ "tsc" คอมไพล์โค้ดก่อนเพราะหากไม่มีสิ่งนั้นในโปรเจ็กต์ที่ใหญ่กว่าอาจเป็นไปได้ว่าเซิร์ฟเวอร์เริ่มทำงานก่อนที่การคอมไพล์จะสิ้นสุดลง ในกรณีนี้เซิร์ฟเวอร์จะแสดงข้อผิดพลาดโดยระบุว่าไม่รู้จะทำอย่างไร
Starceaker

1
ในปี 2017 วิธีแก้ปัญหาในคำตอบของคุณพบปัญหาที่แท้จริงนั่นคือมีข้อผิดพลาดในการรวบรวมใน typescript ในโค้ดแอป เมื่อฉันแก้ไขข้อผิดพลาดในการคอมไพล์เวอร์ชันดั้งเดิมจะทำงานได้ดีโดยไม่มีวิธีแก้ปัญหาของคุณอีกต่อไป
CodeMed

1
ยอดเยี่ยม ... "start": "พร้อมกัน \" npm run tsc: w \ "\" npm run lite \ "" ใช้ได้ผลสำหรับฉัน ...
DILIP KOSURI

86

เพื่อให้npm startฉันทำงานได้ฉันต้องแน่ใจว่าฉันได้ติดตั้ง devDependencies ทั่วโลกแล้ว คุณได้ลอง:

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

แต่ฉันคิดว่าlite-serverเป็นทางเลือกที่คุณสามารถใช้บริการอื่น ๆ ได้เช่นกัน
Pardeep Jain

11
ทำงานให้ฉัน sudo npm update -g && sudo npm install -g concurrently lite-server typescript.
Sam Finnigan

6
อย่าลืมถอนการติดตั้งเวอร์ชันท้องถิ่น:npm uninstall lite-server
Aurelien

1
ฉันมีปัญหาเดียวกันในการเริ่มต้นเว็บเซิร์ฟเวอร์โดยใช้ angular2-seed จากหลักสูตร Udemy สิ่งนี้ได้แก้ไขปัญหาของฉันแล้ว
dance2die

ใช่ การติดตั้งเซิร์ฟเวอร์ไลต์ทั่วโลกและการถอนการติดตั้งแพคเกจในเครื่องก็ใช้ได้ผลสำหรับฉันใน Vagrant! ขอบคุณมาก!
Yahya Uddin

48

ก่อนอื่นคุณต้องอัปเดต npm, lite-server และ typescript:

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

ลบโฟลเดอร์ node_modules จากไดเร็กทอรีโปรเจ็กต์ Angular ของคุณ (ถ้ามี) วิ่งครั้งต่อไป:

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


3
ฉันโหวตให้เพราะนี่ช่วยแก้ปัญหาของฉันได้ อย่างไรก็ตามฉันชอบที่จะเข้าใจว่าการเพิ่ม fs.inotify.max_user_watches ไปยัง / etc / sysctl แก้ไขอย่างไร
Joshua Wilson

ดูเหมือนว่าผู้เฝ้าดูต้องการหน่วยความจำมากขึ้นและสิ่งนี้ให้สิ่งนั้น
Joshua Wilson

ผมพบว่ามันลำบากในการทำงานที่ดีขึ้นเมื่อฉันลบโมดูลแรก rm -r node_modules/- ยังไงก็ตามที่ผู้ชายคนนั้นพูดมันทำให้ฉันต้องไป ฉันรู้สึกว่าfs.inotify.max_user_watches=524288มันดูมากเกินไปสำหรับฉัน คือมีสติดีขึ้นในลม?
จะ

เป็นมูลค่าเพิ่มว่าการเริ่มต้นอย่างรวดเร็วของJavascript จะเริ่มทำงานทันทีเมื่อแกะกล่อง ไม่มีของแถมมากมาย stays on screenและเมื่อเซิร์ฟเวอร์หยุดหน้าเว็บ เวอร์ชัน typescript จะหายไปพร้อมกับควัน
จะ

สิ่งนี้ช่วยฉันได้ขอบคุณ echo fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
chintan adatiya

15

ฉันมีข้อผิดพลาดเดียวกันบน windows 10 ดูเหมือนว่าจะมีปัญหากับแพ็คเกจ npm พร้อมกัน ฉันพบ 2 ตัวเลือกในการแก้ไขข้อผิดพลาดนี้:

  • 1. เรียกใช้คำสั่งทั้งสองใน 2 cmds แยกกัน:

    • ในการรันครั้งแรก: npm run tsc:w
    • ในอันที่สอง: npm run lite
  • 2. เปลี่ยน package.json

    • เพียงแค่เปลี่ยนตัวเลือกเริ่มเป็นสิ่งนี้: "start": "tsc && npm run tsc:w | npm run lite",

2
เพียงเพื่อทราบ บน Linux:"start": "tsc && npm run tsc:w & npm run lite",
ACV

มันเป็นการคอมไพล์ใหม่อัตโนมัติสำหรับฉัน
dontHaveName

ฉันอ้างถึงความคิดเห็นแรกของฉัน :) บน linux มันใช้ไม่ได้
ACV

เพียงวิธีนี้ใช้ได้ผลสำหรับฉัน พยายามก่อน (เรียกใช้คำสั่งทั้งสองใน 2 cmds แยกกัน) จากนั้นหยุดกระบวนการทั้งใน cmds สุดท้ายใช้ที่สอง (เปลี่ยน package.json) และเรียกใช้ "npm start" ในหนึ่ง cmd เพียงอย่างเดียว ถ้าฉันเปลี่ยนไฟล์เดียวlocalhostโดยอัตโนมัติ: 3000 จะรีเฟรชและแสดงการเปลี่ยนแปลงของฉัน ขอบคุณมาก!
Andrew F.

13

นี่คือวิธีที่ฉันแก้ไขปัญหาในวันนี้หลังจากลองใช้วิธีแก้ปัญหาต่างๆเหล่านี้มาหลายชั่วโมง - (สำหรับใครก็ตามที่กำลังมองหาวิธีอื่นอยู่)

เปิด cmd 2 อินสแตนซ์ที่เจ้าหน้าที่เริ่มต้นด่วนของคุณ:

หน้าต่าง # 1:

npm run build:watch

แล้ว ...

หน้าต่าง # 2:

npm run serve

จากนั้นจะเปิดขึ้นในเบราว์เซอร์และทำงานตามที่คาดไว้


9

ฉันมีปัญหาที่คล้ายกันหลังจากคัดลอกโฟลเดอร์ angular2-quickstart (รวมถึง node_modules) เพื่อสร้างโฟลเดอร์ angular2-tour-of-heroes สิ่งนี้แปลกประหลาดเพราะต้นฉบับรวบรวมได้ดี แต่สำเนาไม่ได้ ...

npm run tsc

ผมสามารถที่จะแก้ปัญหาโดยการลบ node_modules โฟลเดอร์และใหม่ทำงาน NPM ติดตั้ง

นี่เป็นเรื่องแปลกใจสำหรับฉันดังนั้นฉันจึงสร้างความแตกต่างระหว่าง 2 โฟลเดอร์ ...

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)

... ซึ่งฉันไม่เข้าใจเลย.

หวังว่านี่จะช่วยได้


5

เปลี่ยนฟิลด์เริ่มต้นใน package.json จาก:

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

ถึง:

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

มันช่วยได้จริงๆ


5

คำตอบนี้สัมพันธ์กับหลักสูตร Pluralsight ที่ยอดเยี่ยม "Angular 2 Fundamentals" โดย Jim Cooper

ถ้าเช่นฉันคุณกำลังมีปัญหาในการเริ่มต้นรันคำสั่ง npm start บนเครื่อง Windows 10 ฉันขอแนะนำสิ่งต่อไปนี้:

เริ่ม git bash ในฐานะผู้ดูแลระบบ (ทำตามขั้นตอนในวิดีโอ) ไปที่ไดเร็กทอรีโปรเจ็กต์ ( ng2-fundamentals ) จากนั้นพิมพ์คำสั่งต่อไปนี้:

npm config get registry

npm cache clean

npm install

เมื่อการติดตั้งเสร็จสมบูรณ์คุณจะต้องแก้ไขไฟล์ get-shell.js ที่อยู่ในโมดูล spawn-default-shell ภายในโฟลเดอร์ node_modules ดังนี้:

เปลี่ยนสิ่งต่อไปนี้:

const DETECT_SH_REGEX = /sh$/;

สำหรับสิ่งนี้:

const DETECT_SH_REGEX = /sh/;

สังเกต $ ที่ลบออกจากส่วนท้ายของสตริง sh (ให้เครดิตกับผู้เขียนต้นฉบับของการแก้ไขนี้ alfian777 ที่โพสต์วิธีแก้ปัญหาบนgithub )

บันทึกไฟล์จากนั้นไปที่ git bash console แล้วพิมพ์ npm start

คุณไม่ควรเห็นข้อผิดพลาดใด ๆ ในตอนนี้และหน้า localhost จะเริ่มต้นขึ้นในเบราว์เซอร์เริ่มต้นของคุณ (หรือเปิดเบราว์เซอร์ของคุณและไปที่http: // localhost: 8808 / )


3

ไม่มีคำตอบเหล่านี้ช่วยด้วยอูบุนตู ในที่สุดฉันก็พบโซลูชันจาก John Papa (ผู้เขียนของเซิร์ฟเวอร์ lite)

บน Ubuntu 15.10 การเริ่มต้นอย่างรวดเร็ว Angular 2 เริ่มมีชีวิตชีวาหลังจากรันสิ่งนี้ที่เทอร์มินัล:

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

เห็นได้ชัดว่ามันเพิ่มจำนวน File Watch ที่มีอยู่

คำตอบที่มา: https://github.com/johnpapa/lite-server/issues/9


3

ฉันพบปัญหาเดียวกันนี้ อย่างไรก็ตามคำตอบข้างต้นไม่มีคำตอบที่เหมาะสมสำหรับฉัน ปรากฎว่าเป็นเพราะสภาพแวดล้อมการพัฒนาของฉันมากกว่าจากนั้นสิ่งต่างๆในเวอร์ชันใด ๆ

เนื่องจากฉันใช้ Visual Studio Code ฉันจึงตั้งค่างานสร้างใน VSC เพื่อรวบรวม TypeScript ในฐานะผู้เฝ้าดู นี่คือปัญหา VSC ได้เริ่มงาน NPM สำหรับ TSC แล้วดังนั้นเมื่อเรียกใช้สคริปต์ 'เริ่มต้น' ของบทช่วยสอนก็มีปัญหากับข้อเท็จจริงที่ว่า VSC ยังคงทำงานtsc -wอยู่

ฉันหยุดงานใน VSC และรันสคริปต์ 'start' อีกครั้งและทำงานได้ดี

โซลูชัน A: หยุดและเริ่ม npm

  • คำสั่ง VSC> งาน: ยุติงานที่กำลังทำงานอยู่
  • เทอร์มินอล $ npm start

หลังจากนั้นเพื่อให้ทุกอย่างทำงานร่วมกันฉันเปลี่ยนสคริปต์เริ่มต้นเป็นเพียงแค่เริ่มเซิร์ฟเวอร์และไม่ได้เปิด TSC จริง

โซลูชัน B: เปลี่ยนสคริปต์เริ่มต้น npm

  • แทนที่

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

  • ด้วย

    "start": "npm run lite"

โซลูชัน C: เพียงเรียกใช้คำสั่งเซิร์ฟเวอร์ lite

`npm run lite`

3

ฉันแก้ไขปัญหาด้วยโปรแกรม Quick Start ตามลิงค์ด้านล่าง

ข้อผิดพลาดเซิร์ฟเวอร์ Angular 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\" ",

2

คำตอบนี้มีไว้สำหรับผู้ใช้ 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 ให้แทนที่บรรทัดเริ่มต้นใน package.json ของคุณโดย:

    "start": "tsc & พร้อมกัน \" tsc -w \ "\" lite-server \ ""

  • หรือคำตอบของ user60108 ก็ใช้ได้เช่นกันเพราะเขาไม่ได้ใช้เครื่องหมายและ:

    "start": "พร้อมกัน \" npm รัน tsc: w \ "\" npm run lite \ ""


1

เป็นไปได้มากว่าเวอร์ชัน NPM ของคุณเก่าฉันเพิ่งมีสิ่งนี้ในเครื่องของนักพัฒนาซอฟต์แวร์ในที่ทำงานพิมพ์:

npm -v

หากมีอะไรน้อยกว่าเวอร์ชันเสถียรในปัจจุบันและคุณสามารถอัปเดตการติดตั้ง Node.js ได้จากที่นี่https://nodejs.org/en/ :)


1

สิ่งนี้ได้ผลฉันวางไว้/// <reference path="../node_modules/angular2/typings/browser.d.ts" />ที่ด้านบนของไฟล์ bootstraping

ตัวอย่างเช่น:-

ใน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
  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

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> 

ขอบคุณสำหรับการเล่นซ้ำ แต่ไม่สามารถแก้ปัญหาของฉันได้ :)
Tomasz Ciunel

กว่าที่ @Eric กล่าวว่าตรวจสอบเวอร์ชันโหนดของคุณควรอยู่ระหว่าง 4 * 5 และเวอร์ชัน npm ควรอยู่ระหว่าง 2 * 3 หรือโพสต์โครงสร้างโครงการของคุณมันจะช่วยให้ฉันพบปัญหา
Pardeep Jain

ขอบคุณ! สิ่งนี้ได้ผลสำหรับฉัน ลิงค์นี้โดยเฉพาะ: github.com/pkozlowski-opensource/ng2-play/blob/master/…
brando

ยินดีต้อนรับคุณ :) ลิงค์นี้มีประโยชน์มากสำหรับการเริ่มต้นใน angular2 beta0.0
Pardeep Jain

0

ฉันสามารถทำซ้ำขั้นตอนได้โดยไม่มีปัญหา

โปรดลอง:

(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

โปรดอ้างอิง repo นี้สำหรับงานของฉัน: https://github.com/AlanJui/ng2-quick-start


หากเราใช้,ในตอนท้ายของเทมเพลตฉันก็ไม่เกิดปัญหาใด ๆ และโครงการจะดำเนินไปได้อย่างไรหากไม่มีes6-shim
Pardeep Jain


0

การติดตั้งแพ็กเกจทั่วโลกเป็นวิธีหนึ่งที่ทำได้ แต่จะ จำกัด ให้คุณใช้เวอร์ชันเดียวกันในทุกโปรเจ็กต์ที่ใช้

คุณสามารถนำหน้าสคริปต์ 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 หรือไม่หรือมีการตั้งค่าการกำหนดค่าบางอย่างที่คุณควรระบุ ควรค่าแก่การพิจารณา!


0

ฉันมีปัญหาเดียวกันเราทั้งคู่ลืมใส่ 's' ในส่วนประกอบที่นี่:

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

ควรจะเป็น:

boot.js:

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

bootstrap(AppComponent);

สิ่งนี้ไม่เป็นความจริงตามตัวอย่างไม่ควรมีใน app.component
Brad Woods

0

ฉันมีข้อผิดพลาดเดียวกันบน 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 แรก ดูเหมือนว่าจะต้องใช้เส้นทางแบบเต็มพร้อมกันเท่านั้น


0

ฉันพบข้อผิดพลาดเดียวกัน และหลังจากค้นหาเป็นจำนวนมากในที่สุดฉันก็พบสิ่งนี้: แอปพลิเคชัน Angular2 ติดตั้งและรันผ่าน package.jsonpackage.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" },

หวังว่าจะช่วยให้ใครได้รับข้อผิดพลาดเดียวกัน

PS: ข้อผิดพลาดของฉันไม่เหมือนกับ Tomasz ซึ่งเป็นเวอร์ชัน npm ของฉันคือ 3.7.3 และเวอร์ชันโหนดคือ 5.9.1


0

ถอนการติดตั้งแพ็กเกจโหนดที่มีอยู่ทั้งหมด อัปเดตโหนดและ npm ตามที่ระบุในเอกสารเป็นอย่างน้อยโหนด v5.xx และ npm 3.xx มิฉะนั้นจะทำให้เกิดข้อผิดพลาด

ทำnpm clean. แล้วทำnpm install,npm start ,

สิ่งนี้ช่วยแก้ปัญหาให้ฉันได้


ไม่เป็นความจริงเอกสารแสดงสถิติอย่างน้อยโหนด v4.xx angular.io/docs/ts/latest/…
Brad Woods

0

สำหรับผู้ใช้ Ubuntu 16.x การติดตั้งเวอร์ชันล่าสุด 5.x ช่วยแก้ปัญหาของฉันใน ubuntu

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

0

ดูเหมือนจะมีมากกว่าหนึ่งวิธีที่angular2-quickstartไม่สามารถเริ่มต้นได้ ฉันมีปัญหาเดียวกันกับการเรียกใช้Angular2 เวอร์ชัน 2.0.0ภายใต้การติดตั้งใหม่ของโหนด 6.6.0 / npm 3.10.3 บน Windows 7 ในกรณีของฉันที่รันnpm startข้อผิดพลาด typescript จำนวนมากทิ้ง:

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

ปัญหานี้จะกล่าวถึงในมุมปัญหา QuickStart # 63 "typings" ไม่ได้ถูกติดตั้งอย่างถูกต้อง ตั๋วนั้นให้การแก้ไขเป็น

$ ./node_modules/.bin/typings install

ซึ่งเหมาะกับฉัน (ฉันยังไม่แน่ใจวิธีที่ "ถูกต้อง" ในการดำเนินการนี้)




0

ในไฟล์ package.json ฉันลบบรรทัดที่มี"prestart": "npm run build"ไฟล์. สิ่งนี้ดูเหมือนจะเป็นคำสั่งการบล็อกและเกิดขึ้นก่อน (npm) start ดังนั้นจึงป้องกันไม่ให้คำสั่ง start อื่น ๆ


0

เปลี่ยน start ใน angular.json เป็น"start": "ng serve --host 0.0.0.0"หรือ"start": "lite-server"และ run ตรวจสอบด้วยว่าคุณได้ติดตั้ง angular / cli อย่างถูกต้องหรือไม่


0

npm startฉันกวดวิชาเริ่มต้นอย่างรวดเร็วฉันก็ผ่านขั้นตอนจนถึง จากนั้นฉันได้รับข้อผิดพลาดนี้ จากนั้นฉันก็ลบnode_modulesโฟลเดอร์ข้างใต้angular-quickstartและเรียกใช้npm installอีกครั้ง ตอนนี้ใช้งานได้แล้ว


0

หากคุณใช้พร็อกซีอาจทำให้เกิดข้อผิดพลาดนี้:

  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

มันจะทำงานแล้ว


ไม่ได้รับ stille: ข้อผิดพลาด TS5023: ตัวเลือกคอมไพเลอร์ที่ไม่รู้จัก 'moduleResolution'
Christof Kälin
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.