Le script 'start' de NPM s'est terminé sans indiquer que le CLI d'Angular écoutait les requêtes.

Question

J'essaie de lancer une SPA .NET Core 2/Angular 6. J'ai créé une application Angular 5 à l'aide de "dotnet new angular", puis j'ai procédé à la mise à niveau à l'aide de ce guide depuis angular.io. Une fois que j'ai terminé la mise à niveau, j'ai essayé d'exécuter l'application en utilisant "dotnet run" et j'ai obtenu une page d'erreur laide avec l'erreur :

Une exception non gérée s'est produite lors du traitement de la demande.

AggregateException : Une ou plusieurs erreurs se sont produites. (Une ou plusieurs erreurs sont survenues. (Le script 'start' de NPM s'est terminé sans indiquer que le Angular CLI était à l'écoute des demandes. La sortie d'erreur était : Inconnu option : '--extractCss'.

InvalidOperationException : Le script 'start' de NPM s'est terminé sans indiquer que le CLI d'Angular écoutait les requêtes. La sortie d'erreur était : Option inconnue : '--extractCss'.

Pensant que j'avais peut-être manqué une étape lors de la mise à jour, j'ai essayé une deuxième fois et j'ai obtenu la même erreur.

Voici les étapes que j'ai suivies après avoir créé l'application :

npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
ng update @angular/core
npm install --save @angular/material @angular/cdk @angular/animations hammerjs 
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

J'exécute Node version 9.4.0 et .Net Core 2.1.200 sur Windows 10 (1703) Enterprise.

Avez-vous des idées sur la manière de résoudre ce problème ? Voici une trace complète de la pile :

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.<WithTimeout>d__1`1.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.<PerformProxyRequest>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.<Invoke>d__4.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
---> (Inner Exception #0) System.AggregateException: One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extractCss'

) ---> System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extractCss'

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
   at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
   at System.Threading.ExecutionContext.Run(ExecutionContext executionContext, ContextCallback callback, Object state)
   at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot)
---> (Inner Exception #0) System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: Unknown option: '--extractCss'

 ---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()
   --- End of inner exception stack trace ---
   at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<StartAngularCliServerAsync>d__3.MoveNext()<---
<---

Answer 1

Essayez de faire ce qui suit

1. Ouvrir un Powershell
2. Naviguez jusqu'au clientapp répertoire
3. Exécuter npm audit fix

Cela fonctionne pour ReactJS & VueJS également des projets.

Answer 2

Pour moi, cette question et les suivantes ont résolu le problème : https://github.com/angular/angular-cli/issues/10666

Vous devez également modifier votre fichier package.json et supprimer le paramètre --extractCss des propriétés start et build. de :

"scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",

à :

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",

Answer 3

Le problème me dérange aussi pendant quelques jours. J'ai finalement trouvé un moyen de le contourner. Apparemment, Visual Studio essaie de lancer le serveur Angular CLI pour nous automatiquement avec le processus ASP.Net core. Pour cette instance, ça a échoué.

Donc, selon le document de Microsoft aquí nous pouvons démarrer le serveur Angular CLI manuellement.

1. naviguez jusqu'au dossier 'ClientApp', et lancez :

   ng servir

   pour démarrer le serveur depuis la console.

2. Dans le fichier 'Startup.cs', remplacez

   spa.UseAngularCliServer(..)

avec

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");

3. F5 pour démarrer le projet ASP.Net Core comme nous le faisons normalement.

De cette façon, vous pouvez continuer à déboguer l'application.

Answer 4

Si la solution ci-dessus ne fonctionne pas, vous pouvez essayer ce qui suit, qui a fonctionné pour moi.

Scénario : J'ai transféré une solution VS 2017 en état de marche : projets core web api & angular spa sur un ordinateur nouvellement installé ; j'ai obtenu l'erreur ci-dessus.

Solution : Après avoir installé les charges de travail node.js via le programme d'installation de Visual Studio, node.js pour Windows ( https://nodejs.org/en/download/ ) et les fonctions Windows nécessaires pour IIS ; j'étais de nouveau sur la bonne voie.

L'installation principale est le node.js pour visual studio et Windows (qui a npm inclus), j'ai dû installer les deux pour que cela fonctionne. Probablement la configuration des chemins pour l'invite de commande....

Answer 5

Les solutions de Joe et de Jay fonctionnent toutes les deux. Pour utiliser la configuration par défaut du modèle sans modifier le code, il suffit d'installer node.js pour Windows comme Jay l'a indiqué ci-dessus, puis de redémarrer VS. https://nodejs.org/en/download/

Un excellent tutoriel sur la création, la configuration et le déploiement de projets Core Angular avec vs et vscode ici . Il inclut également la configuration de IIS. https://www.codeproject.com/Articles/1250961/Deploying-an-Angular-Application-with-ASP-NET-Core