Angular2 QuickStart npm start non funziona correttamente

Struttura del file

So che la versione beta di Angular2 è appena stata rilasciata ma non riesco a riprodurre i passaggi del tutorial del sito ufficiale ( https://angular.io/guide/quickstart ). Forse qualcuno ha avuto problemi simili e sa cosa fare per risolvere il problema? Quando provo ad avviare l’applicazione con il comando npm start ottengo output come questo:

 0 info it worked if it ends with ok 1 verbose cli [ 'node', '/usr/local/bin/npm', 'start' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'prestart', 'start', 'poststart' ] 5 info prestart [email protected] 6 info start [email protected] 7 verbose unsafe-perm in lifecycle true 8 info [email protected] Failed to exec start script 9 verbose stack Error: [email protected] start: `concurrent "npm run tsc:w" "npm run lite" ` 9 verbose stack Exit status 127 9 verbose stack at EventEmitter. (/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. (/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 [email protected] 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 [email protected] start: `concurrent "npm run tsc:w" "npm run lite" ` 17 error Exit status 127 18 error Failed at the [email protected] 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 ] 

Ho avuto: versione 1.1.2 del nodo di typescript versione 0.12.2

Forse qualcuno potrebbe aiutare a risolvere il problema :)?

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:

   Angular 2 QuickStart         System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/boot') .then(null, console.error.bind(console));     Loading...   

app.components.ts:

 import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '

My First Angular 2 App

', }) export class AppComponent {}

boot.js:

 import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent); 

Cambia il campo di start in package.json da

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

a

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

Per far npm start che npm start funzionare, dovevo assicurarmi di aver installato globalmente alcune devdependioni. Hai provato:

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

Per prima cosa è necessario aggiornare npm, lite-server e typescript:

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

Eliminare la cartella node_modules dalla directory del progetto Angular (se esistente). Prossima esecuzione:

 npm install 

Dopo aver risolto gli errori ENOSPC:

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

Finalmente:

 npm start 

Questo è il mio file 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" } } 

Ho avuto lo stesso errore su Windows 10. Sembra che si tratti di un problema con il pacchetto npm in contemporanea. Ho trovato 2 opzioni su come risolvere questo errore:

1. Esegui entrambi i comandi in 2 cmd separati:

-nel primo run npm eseguire tsc: w

-nel secondo uno npm esegue lite

2. Cambia package.json

-giusta modifica l’opzione di avvio a questo:

"start": "tsc && npm run tsc:w | npm run lite",

Ecco come ho risolto il problema oggi dopo aver provato tutte queste soluzioni diverse (per chi cerca ancora un altro modo).

Apri 2 istanze di cmd nella tua cartella quickstart:

finestra n. 1:

 npm run build:watch 

poi…

finestra # 2:

 npm run serve 

Si aprirà quindi nel browser e funzionerà come previsto

Ho avuto un problema simile dopo aver copiato la cartella angular2-quickstart (inclusi node_modules) per creare la cartella angular2-tour-of-heroes. Questo era strano perché l’originale stava compilando bene ma la copia non era …

 npm run tsc 

Sono stato in grado di risolvere il problema eliminando la cartella node_modules e rieseguendo l’installazione di npm .

Questa è stata una sorpresa per me, quindi ho fatto una diff tra le 2 cartelle …

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

c’erano un sacco di differenze, un sacco di ‘where’ diffs nei file package.json come questo: –

 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" 

… che tipo di ha senso ma ce n’erano anche alcuni come questo: –

 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) 

… che non capisco affatto.

Oh bene, spero che questo aiuti.

Cambia il campo di inizio in package.json da:

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

A:

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

Mi ha davvero aiutato.

Questa risposta è in relazione all’eccellente corso Pluralsight “Angular 2 Fundamentals” di Jim Cooper.

Se come me hai problemi a iniziare a eseguire il comando npm su una macchina Windows 10, ti suggerisco di seguire:

Avviare git bash come amministratore (seguire i passaggi nel video) Passare alla directory del progetto ( ng2-fundamentals ) e quindi digitare i seguenti comandi:

 npm config get registry npm cache clean npm install 

Una volta completata l’installazione sarà necessario modificare il file get-shell.js che si trova nel modulo spawn-default-shell all’interno della cartella node_modules come segue:

Cambia il seguente:

 const DETECT_SH_REGEX = /sh$/; 

a questa:

 const DETECT_SH_REGEX = /sh/; 

Nota $ rimosso dalla fine della stringa sh (credito all’autore originale di questa correzione alfian777 che ha pubblicato la soluzione su github )

Salva il file e poi vai alla tua console git bash e digita npm start

Non dovresti vedere nessun errore ora e la pagina localhost verrà avviata nel browser predefinito (in alternativa, apri il browser e vai a http: // localhost: 8808 / ).

Nessuna di queste risposte ha aiutato con Ubuntu . Finalmente ho trovato una soluzione di John Papa (l’autore di lite-server).

Su Ubuntu 15.10 l’avvio rapido angular 2 è diventato vitale dopo averlo eseguito sul terminale:

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

Apparentemente aumenta il numero di File Watch disponibili.

Risposta Fonte: https://github.com/johnpapa/lite-server/issues/9

Ho incontrato questo stesso problema. Tuttavia, nessuna delle risposte di cui sopra sono state soluzioni adeguate per me. Si scopre che era dovuto più al mio ambiente di sviluppo che a qualsiasi versione delle cose.

Poiché ho utilizzato Visual Studio Code, ho impostato un’attività di compilazione in VSC per compilare TypeScript come watcher. Questo era il problema. VSC aveva già avviato un task NPM per TSC e quindi quando eseguiva lo script ‘start’ del tutorial, stava avendo problemi con il fatto che VSC stava ancora eseguendo TSC -w.

Ho interrotto l’attività in VSC e ho rianalizzato lo script ‘start’ e ha funzionato bene.

Soluzione A: arresto e avvio npm

  • Comando VSC> Attività: termina le attività in esecuzione
  • Inizio del terminale $ npm

Dopodiché, per far funzionare tutto insieme, cambio lo script di avvio per avviare semplicemente il server e non avviare realmente TSC.

Soluzione B: cambia lo script di avvio di npm

  • Sostituire

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

  • con

    "start": "npm run lite"

Soluzione C: basta eseguire il comando lite server

 `npm run lite` 

Ho risolto il mio problema con il programma Quick Start seguendo il link sottostante.

Angular 2 QuickStart Errore del server live

Modifica le impostazioni di Package.json Scripts

“start”: “tsc && concurrently \” npm esegui tsc: w \ “\” npm esegui lite \ “,

a

“start”: “simultaneamente \” npm esegui tsc: w \ “\” npm esegui lite \ “”,

Questa risposta è solo per gli utenti di Windows 10 e, come vedrai di seguito, sospetto che il problema stia accadendo solo per quegli utenti:

Per scoprire cosa sta succedendo, è ansible eseguire il comando su PowerShell e ti dirà qual è il vero problema:

 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 

Fondamentalmente, il messaggio spiega che il token “&&” non è ancora valido con Windows 10. E per chi si chiede, lo stesso comando che sostituisce && con &, ci ha informati che l’operatore commerciale è riservato per un uso futuro:

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

Conclusioni :

  • se vuoi lanciare manualmente questo comando da PowerShell, puoi usare questo invece:

    tsc “&” contemporaneamente “tsc -w” “lite-server”

  • se vuoi avviare la tua applicazione con npm start, sostituisci la linea di partenza nel tuo pacchetto.json di:

    “start”: “tsc & concurrently \” tsc -w \ “\” lite-server \ “”

  • in alternativa, la risposta dell’utente60108 funziona anche perché non sta utilizzando la e commerciale:

    “start”: “simultaneamente \” npm esegui tsc: w \ “\” npm esegui lite \ “”

È molto probabile che la tua versione NPM sia vecchia, di recente l’ho avuta su una macchina per sviluppatori al lavoro, tipo:

 npm -v 

Se è qualcosa di meno della versione stabile corrente, e puoi semplicemente aggiornare l’installazione di Node.js da qui https://nodejs.org/en/ 🙂

Questo mi ha fatto, mettere /// nella parte superiore del file di bootstrap.

Per esempio:-

In boot.ts

 ///  import {bootstrap} from 'angular2/platform/browser' import {AppComponent} from './app.component' bootstrap(AppComponent); 

Nota: – Assicurarsi di aver menzionato il percorso di riferimento corretto.

  1. In devDependencies il typescript è 1.7.3 ma si ha 1.7.5 un comune di correzione.
  2. Importa i tuoi file js nell’ordine corretto in index.html . per maggiori informazioni, consultare questo repository https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html o fare riferimento al mio repository qui

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

index.html

          

Posso riprodurre passaggi senza alcun problema.

Per favore prova:

(1) rimuovi questa riga dal tuo index.html

  

(2) modificare il file: app.components.ts , eliminare “,” alla fine della riga nel campo del modello

 @Component({ selector: 'my-app', template: '

My First Angular 2 App

' })

Ecco il mio ambiente:

 $ node -v v5.2.0 $ npm -v 3.3.12 $ tsc -v message TS6029: Version 1.7.5 

Si prega di fare riferimento a questo pronti contro termine per il mio lavoro: https://github.com/AlanJui/ng2-quick-start

Prova questo:

  1. Installa Ultime versioni npm / nodejs Ho eliminato l’installazione di npm
  2. Successivamente, installa tsd npm install -g tsd
  3. Quindi clona https://github.com/johnpapa/angular2-tour-of-heroes.git
  4. Finalmente npm i e npm start

L’installazione globale dei pacchetti è un modo per farlo, ma ciò ti impedisce di utilizzare la stessa versione su tutti i progetti in cui vengono utilizzati.

Invece, puoi prefisso gli script ./node_modules/.bin con ./node_modules/.bin . Nel tuo caso, il package.json sarebbe simile a questo:

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

Penso che npm dovrebbe fornire il file ./node_modules/.bin davanti a ciascun comando “script” che si trova in quella directory per impostazione predefinita, ed è per questo che il package.json originale ha funzionato come ha fatto. Non sono sicuro che quella funzione sia presente in ogni versione di npm o se ci sono alcune impostazioni di configurazione che dovresti specificare. Vale la pena esaminarlo!

Ho avuto lo stesso problema, abbiamo entrambi dimenticato di includere i ‘s’ sui componenti qui:

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

Dovrebbe essere:

boot.js:

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

Ho avuto lo stesso errore su OS X (nodo v6.2.0 e npm v3.9.3 installato con homebrew) e non è stato risolto da nessuno dei precedenti. Ho dovuto aggiungere percorsi completi ai comandi eseguiti contemporaneamente.

In package.json, ho cambiato questo:

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

a questa:

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

Ovviamente, è necessario aggiornare i percorsi corretti in base alla posizione in cui sono archiviati i file binari globali del nodo. Si noti che non è stato necessario aggiungere il percorso al primo comando tsc. Sembra che solo contemporaneamente siano necessari i percorsi completi specificati.

Ho incontrato lo stesso errore. E dopo una lunga ricerca, ho finalmente trovato questo: installazione di Angular2 ed esecuzione tramite package.json . Poi ho provato a sostituire

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

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

Spero che aiuti chi ottiene lo stesso errore.

PS: Il mio errore non è lo stesso di Tomasz, che è la mia versione npm 3.7.3 e la versione del nodo è 5.9.1.

Disinstallare tutti i pacchetti di nodes esistenti. Aggiorna nodo e npm.come viene fornito nella documentazione almeno come nodo v5.xx e npm 3.xx altrimenti causerà errori.

Do npm clean . Quindi npm install npm start , npm start .

Questo ha risolto il problema per me.

Se si utilizza il proxy può causare questo errore:

  1. npm config set proxy http: // nome utente: pass @ proxy: porta

  2. npm config set https-proxy http: // nome utente: pass @ proxy: porta

  3. creare un nome file .typingsrc nella cartella dell’applicazione che include

proxy = (valore sul passaggio 1) https-proxy = (valore sul passaggio 1)

  1. eseguire npm cache clean
  2. eseguire l’installazione di npm
  3. eseguire la tipizzazione di npm install
  4. avvia npm start

funzionerà allora

aggiungere la seguente sezione in tsconfig.json

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

}

e in \ node_modules \ typings \ typings.json

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

Dopo questo cambiamento funziona per me.

Per gli utenti di Ubuntu 16.x, l’installazione dell’ultima versione 5.x risolve il problema in Ubuntu

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

Apparentemente c’è più di un modo in cui angular2-quickstart non può iniziare. Ho avuto lo stesso problema con Angular2 versione 2.0.0 in una nuova installazione del nodo 6.6.0 / npm 3.10.3 su Windows 7. Nel mio caso, l’esecuzione di npm start un sacco di errori di typescript:

 c:\git\angular2-quickstart>npm start > [email protected] 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'. (...) 

Questo problema è stato discusso nel numero n. 63 di quickstart, “tipizzazioni” non installate correttamente . Quel biglietto dà la correzione come

 $ ./node_modules/.bin/typings install 

che ha funzionato per me. (Non sono sicuro del modo “giusto” per farlo ancora.)

Il tutorial di avvio rapido ho seguito i passaggi fino a “npm start”. Quindi ho ricevuto questo errore. Quindi ho eliminato la cartella node_modules in angular-quickstart ed ho eseguito nuovamente l’installazione di npm. Ora funziona.

Assicurati che i nomi siano corretti, quindi modifica il component in boot.js in components . inserisci la descrizione dell'immagine qui

Vai all’indirizzo https://github.com/npm/npm/issues/14075 . E prova la risposta di juaniliska. Forse ti aiuto.

la configurazione di npm ottiene il registro

cache npm pulita

installazione di npm

Nel mio caso, ho solo bisogno di aggiungere un file .ts fittizio. Così ho creato un file test.ts senza contenuti e ho avviato npm per risolvere il problema.