Angular2 QuickStart npm start ne fonctionne pas correctement
Je sais que la version bêta d’Angular2 vient de paraître, mais je ne peux pas reproduire les étapes de leur didacticiel sur le site officiel ( https://angular.io/guide/quickstart ). Peut-être que quelqu'un a eu des problèmes similaires et sait quoi faire pour résoudre ce problème? Lorsque j'essaie de démarrer l'application avec la commande npm start, le résultat est le suivant:
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.<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 [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 ]
J'ai eu: TypeScript 1.7.5 version noeud version 0.12.2
Peut-être que quelqu'un pourrait aider à résoudre le problème :)?
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);
Modifiez le champ start dans package.json à partir de
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
à
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
Afin de pouvoir utiliser npm start, je devais m'assurer que j'avais installé globalement certaines des devDependencies. As-tu essayé:
npm install -g concurrentlynpm install -g lite-servernpm install -g TypeScript
Tout d’abord, vous avez besoin des mises à jour npm, lite-server et TypeScript:
Sudo npm update -g && Sudo npm install -g concurrently lite-server TypeScript
Supprimez le dossier node_modules de votre répertoire de projet Angular (s'il existe). Prochaine course:
npm install
Après avoir résolu les erreurs ENOSPC:
echo fs.inotify.max_user_watches=524288 | Sudo tee -a /etc/sysctl.conf && Sudo sysctl -p
Finalement:
npm start
Ceci est mon fichier 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"
}
}J'ai eu la même erreur sur Windows 10. Il semble que ce soit un problème avec le paquet npm en même temps. J'ai trouvé 2 options pour résoudre cette erreur:
1. Exécuter les deux commandes dans 2 cmds séparés:
-dans le premier lancer npm lancer tsc: w
-dans le second npm run lite
2. Modifier package.json
-juste de changer l'option de démarrage à ceci:
"start": "tsc && npm run tsc:w | npm run lite",
Voici comment j'ai résolu le problème aujourd'hui après des heures à essayer toutes ces solutions différentes pour ceux qui recherchent encore une autre solution).
--- (Ouvrez 2 instances de cmd à votre répertoire quickstart:
fenêtre # 1:
npm run build:watch
ensuite...
fenêtre # 2:
npm run serve
Il s'ouvrira ensuite dans le navigateur et fonctionnera comme prévu
J'ai eu un problème similaire après avoir copié le dossier angular2-quickstart (y compris node_modules) pour créer le dossier angular2-tour-of-heroes. C'était étrange parce que l'original compilait bien mais la copie n'était pas ...
npm run tsc
J'ai pu résoudre le problème en suppression du dossier node_modules et réexécution de l'installation de npm.
Ce fut une surprise pour moi, alors j'ai fait un diff entre les 2 dossiers ...
diff -rw angular2-quickstart/node_modules/ angular2-tour-of-heroes/node_modules/
il y avait BEAUCOUP de différences, beaucoup de différences 'où' dans les fichiers package.json comme ceci: -
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"
... ce qui a du sens mais il y en avait aussi comme ça: -
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)
... que je ne comprends pas du tout.
Eh bien, espérons que cela aide.
Modifiez le champ de démarrage dans package.json à partir de:
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" "
À:
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" "
Cela m'a vraiment aidé.
Cette réponse est en relation avec l'excellent cours Pluralsight "Angular 2 Fundamentals" de Jim Cooper.
Si comme moi vous ne parvenez pas à exécuter la commande npm start sur un ordinateur Windows 10, voici ce que je suggère:
Démarrez git bash en tant qu'administrateur (suivez les étapes de la vidéo). Accédez au répertoire du projet ( ng2-Fundamentals ), puis tapez les commandes suivantes:
npm config get registry
npm cache clean
npm install
Une fois l'installation terminée, vous devrez modifier le fichier get-Shell.js situé dans le module spawn-default-Shell du dossier node_modules comme suit:
Changer ce qui suit:
const DETECT_SH_REGEX = /sh$/;
pour ça:
const DETECT_SH_REGEX = /sh/;
Notez le $ enlevé à la fin de la chaîne sh (à l'auteur de ce correctif, alfian777, qui a posté la solution sur github )
Enregistrez le fichier puis allez sur votre console git bash et tapez npm start
Vous ne devriez plus voir d'erreur maintenant et la page localhost va démarrer dans votre navigateur par défaut (vous pouvez également ouvrir votre navigateur et naviguer jusqu'à http: // localhost: 8808 / ).
Aucune de ces réponses n'a aidé avec Ubuntu . Enfin, j'ai rencontré une solution de John Papa (auteur du serveur léger).
Sur Ubuntu 15.10, le Angular 2 Quick Start a pris vie après avoir été exécuté sur le terminal:
echo fs.inotify.max_user_watches = 524288 | Sudo tee -a /etc/sysctl.conf && Sudo sysctl -p
Apparemment, cela augmente le nombre de File Watch disponibles.
Source de la réponse: https://github.com/johnpapa/lite-server/issues/9
J'ai rencontré le même problème. Cependant, aucune des réponses ci-dessus n'était une solution appropriée pour moi. Il s’avère que c’est plus dû à mon environnement de développement qu’à n’importe quelle version.
Depuis que j'ai utilisé Visual Studio Code, j'ai configuré une tâche de construction dans VSC pour compiler TypeScript en tant qu'observateur. C'était le problème. VSC avait déjà démarré une tâche NPM pour TSC. Ainsi, lors de l'exécution du script de démarrage du didacticiel, le problème était que VSC exécutait toujours TSC -w.
J'ai arrêté la tâche dans VSC et relancé le script 'start' et tout a bien fonctionné.
Solution A: Stop et npm Start
- Commande VSC> Tâches: Terminez les tâches en cours d'exécution
- Terminal $ npm start
Après cela, pour que tout fonctionne correctement, je modifie le script de démarrage afin de simplement démarrer le serveur et de ne pas lancer TSC.
Solution B: Modifier le script de démarrage npm
Remplacer
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "avec
"start": "npm run lite"
Solution C: exécutez simplement la commande du serveur lite
`npm run lite`
J'ai résolu mon problème avec le programme Quick Start en suivant le lien ci-dessous.
erreur angulaire 2 QuickStart Live-server
Modifier les paramètres des scripts Package.json
"start": "tsc && concurremment \" npm exécuter tsc: w\"\" npm run lite\",
à
"start": "npm run tsc: w \"\"npm run lite \" "simultanément,
Cette réponse concerne uniquement les utilisateurs de Windows 10 et, comme vous le verrez ci-dessous, le problème ne se pose que pour ces utilisateurs:
Pour savoir ce qui se passe, vous pouvez exécuter la commande sur PowerShell et celle-ci vous indiquera le problème réel:
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
En gros, le message explique que le jeton "&&" n'est pas encore valide avec Windows 10. Et pour ceux qui le demandent, la même commande remplaçant && par &, nous a informés que l'opérateur esperluette est réservé pour une utilisation future:
(&) 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.
Conclusions:
si vous voulez lancer manuellement cette commande depuis le powershell, vous pouvez utiliser ceci à la place:
tsc "&" concurremment "tsc -w" "lite-server"
si vous voulez lancer votre application avec npm start, remplacez la ligne de démarrage dans votre package.json par:
"start": "tsc et simultanément \" tsc -w\"\" lite-server\""
sinon, la réponse de user60108 fonctionne également car il n'utilise pas l'esperluette:
"start": "npm run tsc: w \"\"npm run lite \" "simultanément
Il est fort probable que votre version de NPM soit ancienne. Je l'avais récemment sur une machine de développement au travail, tapez:
npm -v
S'il s'agit de quelque chose de moins que la version stable actuelle et que vous pouvez simplement mettre à jour votre installation de Node.js à partir d'ici https://nodejs.org/fr/ :)
Cela m'a fonctionné, mettez /// <reference path="../node_modules/angular2/typings/browser.d.ts" /> en haut du fichier d'amorçage.
Par exemple:-
Dans boot.ts
/// <reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
Remarque: - Assurez-vous de mentionner le bon chemin de référence.
- Dans devDependencies, TypeScript est 1.7.3 mais vous avez 1.7.5 corrigé le plus commun.
- Importez vos fichiers js dans le bon ordre dans
index.html. pour plus d'informations, consultez ce référentiel https://github.com/pkozlowski-opensource/ng2-play/blob/master/index.html ou référez-vous à mon référentiel ici
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>
Je peux reproduire des étapes sans aucun problème.
S'il vous plaît essayez:
(1) supprimez cette ligne de votre index.html
<script src="node_modules/es6-shim/es6-shim.js"></script>
(2) modifier le fichier: app.components.ts , supprimer "," à la fin de la ligne dans le modèle champ
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
Voici mon environnement:
$ node -v
v5.2.0
$ npm -v
3.3.12
$ tsc -v
message TS6029: Version 1.7.5
Veuillez vous référer à ce dépôt pour mon travail: https://github.com/AlanJui/ng2-quick-start
Remplacez start dans angular.json par "start": "ng serve --Host 0.0.0.0" ou "start": "lite-server" et exécutez-le. Vérifiez également si vous avez installé angular/cli correctement ou non.
Pour les utilisateurs d'Ubuntu 16.x, l'installation de la dernière version 5.x résout mon problème dans Ubuntu.
curl -sL https://deb.nodesource.com/setup_5.x | Sudo -E bash -
Sudo apt-get install -y nodejs
Essaye ça:
- Installer les dernières versions de npm/nodejs J'ai purgé mon installation de npm
- Après cela, installez tsd
npm install -g tsd - Puis clonez https://github.com/johnpapa/angular2-tour-of-heroes.git
- Enfin
npm ietnpm start
J'ai eu le même problème, nous avons tous deux oublié d'inclure le 's' sur les composants ici:
import {AppComponent} from './app.component'
Devrait être:
boot.js:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.components'
bootstrap(AppComponent);
J'ai rencontré la même erreur. Et après de nombreuses recherches, j’ai finalement trouvé celui-ci: application Angular2 à installer et exécuter via package.json . Puis j'ai essayé de remplacer
"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" },
J'espère que cela aide ceux qui obtiennent la même erreur.
PS: Mon erreur n’est pas la même chose que Tomasz, c’est-à-dire que ma version de npm est 3.7.3 et que la version du noeud est 5.9.1.
J'ai eu la même erreur sur OS X (noeud v6.2.0 et npm v3.9.3 installé avec homebrew) et cela n'a pas été résolu par aucun des problèmes ci-dessus. J'ai dû ajouter des chemins complets aux commandes en cours d'exécution simultanément.
Dans package.json, j'ai changé ceci:
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
pour ça:
"start": "tsc && concurrently \"/Users/kyen/.node/bin/npm run tsc:w\" \"/Users/kyen/.node/bin/npm run lite\" ",
Vous devrez bien sûr mettre à jour les chemins appropriés en fonction de l'emplacement de stockage des fichiers binaires globaux de vos noeuds. Notez que je n'avais pas besoin d'ajouter le chemin d'accès à la première commande tsc. Il semble que seuls les chemins complets spécifiés soient utilisés simultanément.
Dans le didacticiel de démarrage rapide, j’ai parcouru les étapes jusqu’à "npm start". Ensuite, j'ai eu cette erreur. Ensuite, j'ai supprimé le dossier node_modules sous angular-quickstart et j'ai à nouveau lancé l'installation de npm. Maintenant ça marche.
L'installation globale des packages est un moyen de le faire, mais cela vous oblige à utiliser la même version pour tous les projets dans lesquels ils sont utilisés.
Au lieu de cela, vous pouvez préfixer vos scripts npm avec ./node_modules/.bin. Dans votre cas, le package.json ressemblerait à ceci:
{
"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"
}
}
Je pense que npm est censé fournir le ./node_modules/.bin devant chaque commande de "script" qui se trouve dans ce répertoire par défaut. C'est pourquoi le package.json d'origine avait cette apparence. Je ne sais pas si cette fonctionnalité est présente dans chaque version de npm, ou si vous devez spécifier un paramètre de configuration. Ça vaudrait la peine de regarder!
Si vous utilisez un proxy cela peut causer cette erreur:
npm config set proxy http: // nom d'utilisateur: pass @ proxy: port
npm config set https-proxy http: // nom d'utilisateur: pass @ proxy: port
créer un fichier nommant .typingsrc dans votre dossier d’application qui comprend
proxy = (valeur à l'étape 1) https-proxy = (valeur à l'étape 1)
- exécuter le cache npm en mode minimal
- lancer npm install
- exécuter npm typings install
- lancer npm start
cela fonctionnera alors
Désinstallez tous les packages de noeud existants. Mettez à jour le noeud et npm.Comme il est indiqué dans la documentation au moins comme noeud v5.x.x et npm 3.x.x, sinon cela provoquera des erreurs.
Faites npm clean. Ensuite, faites npm install, npm start.
Cela a résolu le problème pour moi.
Apparemment, il y a plus d'une façon par laquelle angular2-quickstart peut ne pas démarrer. J'ai eu le même problème en cours d'exécution Angular2 version 2.0. lors d'une nouvelle installation du noeud 6.6.0/npm 3.10.3 sur Windows 7. Dans mon cas, exécuter npm start a généré une tonne de TypeScript. les erreurs:
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'.
(...)
Ce problème est discuté dans problème angulaire de démarrage rapide n ° 63, les "typings" n'étant pas installés correctement . Ce billet donne la solution comme
$ ./node_modules/.bin/typings install
qui a fonctionné pour moi. (Je ne suis pas encore sûr de la "bonne" façon de le faire.)
Assurez-vous que les noms sont corrects, en remplaçant ainsi component dans boot.js par components. 
Dans le fichier package.json, j'ai supprimé la ligne contenant "prestart": "npm run build". Cela semble être une commande de blocage et se produit avant le démarrage de (npm), empêchant ainsi les autres commandes de démarrage.
Allez à l’adresse https://github.com/npm/npm/issues/14075 . Et essayez la réponse de juaniliska. Peut-être t'aider.
npm config get registre
npm cache clean
npm installer
ajoutez la section suivante dans tsconfig.json
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
et dans\node_modules\typings\typings.json
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim
/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
Après que cela change, cela fonctionne pour moi.