25
votes

TimeoutException: le processus CLI angulaire n'a pas commencé à écouter les demandes dans le délai d'expiration de 0 seconde

J'obtiens cette erreur après la mise à niveau vers angular 9. J'utilise Visual Studio 2019, ASP .NET core avec angular. Même si je crée un nouveau projet et que je mets à jour angular vers la version 9, cela cesse de fonctionner.

La liste complète des réponses de page est:

TimeoutException: le processus Angular CLI n'a pas commencé à écouter les demandes dans le délai d'expiration de 0 seconde. Vérifiez la sortie du journal pour obtenir des informations d'erreur. Microsoft. proxy404s) Microsoft.AspNetCore.Builder.SpaProxyingExtensions + <> c__DisplayClass2_0 + <b__0> d.MoveNext () Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke (contexte HttpContext)

Mon package.json est:

{
  "name": "webapplication10",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng run WebApplication10:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.0.0",
    "@angular/cdk": "~9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/forms": "9.0.0",
    "@angular/material": "~9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@nguniversal/module-map-ngfactory-loader": "8.1.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "core-js": "^3.6.4",
    "jquery": "3.4.1",
    "oidc-client": "^1.10.1",
    "popper.js": "^1.16.1",
    "rxjs": "^6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular/cli": "9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@types/jasmine": "^3.5.3",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "^12.12.27",
    "codelyzer": "^5.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.2",
    "typescript": "3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "^4.12.0",
    "protractor": "~5.4.2",
    "ts-node": "~8.4.1",
    "tslint": "~5.20.0"
  }
}
```


0 commentaires

11 Réponses :


5
votes

Comme suggéré dans https://developercommunity.visualstudio.com/solutions/446713/view.html , vous devez configurer le paramètre de configuration StartupTimeout.

Fondamentalement dans Startup.cs:

 app.UseSpa(spa =>
    {
      spa.Options.SourcePath = "./";
      //Configure the timeout to 5 minutes to avoid "The Angular CLI process did not start listening for requests within the timeout period of 50 seconds." issue
      spa.Options.StartupTimeout = new TimeSpan(0, 5, 0);
      if (env.IsDevelopment())
      {
        spa.UseAngularCliServer(npmScript: "start");
      }
    });


9 commentaires

Oui, j'ai essayé à nouveau d'obtenir la même erreur. Mon erreur est un peu différente de votre suggestion car elle indique un délai d'expiration de 0 seconde.


Il semble que le middleware SPA obtient un StartupTimeout de 0 seconde de quelque part. Puisque la valeur par défaut doit être de 120 secondes (réf: github.com/dotnet/aspnetcore/blob/… ), il est plausible que quelque part soit dit de timeout à 0 secondes. Vérifiez également votre appSettings.json pour "SpaOptions" (vérifiez également tous les fichiers de paramètres et variables spécifiques à l'environnement). Pouvez-vous publier votre Startup.cs (nettoyer du code non pertinent / propriétaire) et appSettings.json?


Aussi: si vous «ng servez» votre application client depuis une console, est-elle en cours d'exécution sans problème?


si j'exécute le serveur ng, le navigateur ne me montre que la page de chargement avec l'erreur de console: Uncaught SyntaxError: Le code en mode strict peut ne pas inclure une instruction with.


J'ai enquêté davantage sur le sujet. J'ai créé 2 applications angulaires identiques et mis à jour la version angulaire dans une seule d'entre elles. La mise à jour ne fonctionne pas et le message de délai d'attente est affiché exactement comme dans votre cas. Je pense que quelque chose empêche le proxy .net de communiquer avec le serveur Angular (qui fonctionne correctement).


BTW: ce message "0 secondes" est dû à un bogue dans asp.net core <= 3.1.1. Il est corrigé sur la branche master, donc je pense qu'ils le feront patcher sur la prochaine version de sdk ...?


Donc, ce bug est connu d'eux sera corrigé?


Oui, le problème 17277 est inclus dans le jalon "Planification du prochain sprint" ( git.io/Jv85b ) qui, et je cite: "est utilisé pour suivre les problèmes que nous prévoyons d'envisager dans le cadre de notre prochaine étape, dans la version actuelle . ", donc la correction de ce bogue dans l'une des prochaines versions est au moins possible.


Merci Claudio!



5
votes

pour résoudre l'erreur de mode strict, supprimez cette ligne de main.ts

export { renderModule, renderModuleFactory } from '@angular/platform-server';

Cela ne résout cependant pas le problème de délai d'expiration. J'obtiens également cette erreur après la mise à niveau vers Angular 9 et l'utilisation de .NET Core.

L'exécution de l'application angulaire à l'aide de «ng serve», puis la modification de votre script de démarrage du spa pour utiliser UseProxyToSpaDevelopmentServer fonctionne comme une solution de contournement


4 commentaires

merci pour la solution du mode strict, mais si vous trouvez une solution concernant le problème de délai d'expiration, veuillez partager avec moi.


Pouvez-vous m'en dire plus sur les raisons pour lesquelles je dois supprimer cette ligne pour résoudre ce problème? car cette erreur n'était pas présente dans la version précédente d'angular. Désolé, je suis nouveau dans angular, je demande juste de comprendre.


cette ligne a été ajoutée dans le cadre de la mise à niveau de 8 à 9 mais n'est pas requise pour main.ts


Merci Fairlie Agile. Appréciez-le.



28
votes

TL; DR

Malheureusement, le problème semble lié à certains changements dans la façon dont Angular CLI démarre la partie angulaire de l'application. Selon ce numéro:

https://github.com/dotnet/aspnetcore/issues/17277

les solutions proposées sont de définir la progression: true dans angular.json ou d'effectuer un simple écho avant ng serve ( https://github.com/dotnet/aspnetcore/issues/17277#issuecomment-562433864 ).

Réponse complète

J'ai creusé la base de code de base asp.net ( https://github.com/dotnet/aspnetcore ), en regardant comment le modèle Angular démarre l'application Angular.

Le moteur principal qui démarre le serveur angulaire est représenté par deux classes: AngularCliMiddleware ( https://git.io/JvlaL ) et NodeScriptRunner ( https://git.io/Jvlaq ).

Dans AngularCliMiddleware, nous trouvons ce code (j'ai supprimé les commentaires d'origine et ajouté certains des miens pour expliquer quelques choses):

public static void Attach(ISpaBuilder spaBuilder, string npmScriptName)
{
    var sourcePath = spaBuilder.Options.SourcePath;
    if (string.IsNullOrEmpty(sourcePath))
    {
        throw new ArgumentException("Cannot be null or empty", nameof(sourcePath));
    }

    if (string.IsNullOrEmpty(npmScriptName))
    {
        throw new ArgumentException("Cannot be null or empty", nameof(npmScriptName));
    }

    // Start Angular CLI and attach to middleware pipeline
    var appBuilder = spaBuilder.ApplicationBuilder;
    var logger = LoggerFinder.GetOrCreateLogger(appBuilder, LogCategoryName);
    var angularCliServerInfoTask = StartAngularCliServerAsync(sourcePath, npmScriptName, logger);

    var targetUriTask = angularCliServerInfoTask.ContinueWith(
        task => new UriBuilder("http", "localhost", task.Result.Port).Uri);

    SpaProxyingExtensions.UseProxyToSpaDevelopmentServer(spaBuilder, () =>
    {
        var timeout = spaBuilder.Options.StartupTimeout;
        return targetUriTask.WithTimeout(timeout,
            $"The Angular CLI process did not start listening for requests " +

            // === NOTE THIS LINE, THAT CARRIES THE "0 seconds" BUG!!!
            $"within the timeout period of {timeout.Seconds} seconds. " + 

            $"Check the log output for error information.");
    });
}

private static async Task<AngularCliServerInfo> StartAngularCliServerAsync(
    string sourcePath, string npmScriptName, ILogger logger)
{
    var portNumber = TcpPortFinder.FindAvailablePort();
    logger.LogInformation($"Starting @angular/cli on port {portNumber}...");

    var npmScriptRunner = new NpmScriptRunner(
        sourcePath, npmScriptName, $"--port {portNumber}", null);
    npmScriptRunner.AttachToLogger(logger);

    Match openBrowserLine;
    using (var stdErrReader = new EventedStreamStringReader(npmScriptRunner.StdErr))
    {
        try
        {
            // THIS LINE: awaits for the angular server to output
            // the 'open your browser...' string to stdout stream
            openBrowserLine = await npmScriptRunner.StdOut.WaitForMatch(
                new Regex("open your browser on (http\\S+)", RegexOptions.None, RegexMatchTimeout));
        }
        catch (EndOfStreamException ex)
        {
            throw new InvalidOperationException(
                $"The NPM script '{npmScriptName}' exited without indicating that the " +
                $"Angular CLI was listening for requests. The error output was: " +
                $"{stdErrReader.ReadAsString()}", ex);
        }
    }

    var uri = new Uri(openBrowserLine.Groups[1].Value);
    var serverInfo = new AngularCliServerInfo { Port = uri.Port };

    await WaitForAngularCliServerToAcceptRequests(uri);

    return serverInfo;
}

Comme vous pouvez le voir, la méthode StartAngularCliServerAsync crée un nouvel objet NpmScriptRunner , qui est un wrapper autour d'un appel de méthode Process.Start, en gros, attache l'enregistreur, puis attend que le StdOut du processus émette quelque chose qui correspond à "ouvrez votre navigateur sur httpSOMETHING ... ".

Une chose amusante est que cela devrait fonctionner !

Si vous exécutez ng serve (ou npm run start) dans le dossier ClientApp, une fois que le serveur démarre, il émet toujours la sortie "ouvrez votre navigateur sur http ...".

Si vous exécutez l'application dotnet, le serveur de nœuds démarre réellement, activez simplement tous les journaux en mode Débogage, recherchez la ligne "Démarrage @ angular / cli sur le port ..." et essayez de visiter localhost sur ce port, vous verrez que votre application angulaire est en cours d'exécution.

Le problème est que, pour une raison quelconque, StdOut n'obtient plus la ligne "ouvrez votre navigateur sur", ni qu'elle n'est écrite par l'enregistreur ... il semble que d'une certaine manière, cette ligne de sortie particulière de ng serve est retenue, comme si n'est plus envoyé dans le flux de sortie Stardard. La méthode WaitForMatch atteint son délai d'expiration après 5 secondes et est récupérée à partir du code de la méthode d'extension WithTimeout, qui génère le message (bogué) "... 0 secondes ...".

Pour ce que j'ai pu voir, une fois que vous avez exécuté votre application dotnet, une série de processus est générée en séquence, mais je n'ai pas remarqué de différence dans les lignes de commande d'Angular 8 à Angular 9.

Ma théorie est que quelque chose a été changé dans Angular CLI qui empêche cette ligne d'être envoyée dans stdout, de sorte que le proxy .net ne l'attrape pas et ne peut pas détecter quand le serveur angular est démarré.

Selon ce numéro:

https://github.com/dotnet/aspnetcore/issues/17277

les solutions proposées sont de définir la progression: true dans angular.json ou d'effectuer un simple écho avant ng serve ( https://github.com/dotnet/aspnetcore/issues/17277#issuecomment-562433864 ).


6 commentaires

Merci d'avoir creusé dans le problème Claudio, Oui, cela fonctionne lorsque nous changeons la progression de false à true, de même que ng sert, alors cela me donne "Uncaught SyntaxError: Le code en mode strict peut ne pas inclure d'instruction with" et pour éviter cette erreur Comme Fairlie Agile Suggérer un solution que je dois supprimer la ligne "export {renderModule, renderModuleFactory} de '@ angular / platform-server';" De main.ts,


La solution de progression fonctionne également de manière aléatoire. Donc je suppose qu'aucun d'eux ne fonctionne.


@ GerardoBuenrostroGonzález, vous pouvez essayer cette solution: github.com/dotnet/aspnetcore/issues/… . C'est un peu plus piraté, mais cela devrait fonctionner, essentiellement en forçant une autre ligne "ouvrez votre navigateur ..." dans la sortie standard. Si ni cela ne fonctionne, veuillez participer à la discussion github, ajouter plus d'informations au cas est toujours utile pour obtenir une correction complète. Bonne chance!


@ClaudioValerio Merci! Cela a fonctionné! Un peu exagéré peut-être, mais je ne me plains pas! 🥳


Voici un dépôt gihub qui utilise la version "start" package.json du correctif. github.com/jefflomax/dotnet-core-3-angular-9-ngrx-9


Cette solution n'a pas fonctionné pour moi la version angulaire 9 que j'utilise déjà a progress = true, je teste sur localhost, je ne sais pas s'il s'agit d'un problème d'environnement de développement uniquement



8
votes

Voici ce que j'ai fait

de Fairlie Agile, a commenté cette ligne dans main.ts

"progress": true,

De Claudio Valerio Dans angular.json, set

export { renderModule, renderModuleFactory } from '@angular/platform-server';

Maintenant, je peux exécuter l'application en cliquant sur F5 / Exécuter IIS Express


1 commentaires

Cela a fonctionné pour moi pour Angular v9.1.1 et .net core 3.1. Merci!



-1
votes

Voici une solution de contournement:

  • Dans package.json, changez le script de démarrage de "ng serve" à "ngserve"
@echo ** Angular Live Development Server is listening on localhost:%~2, open your browser on http://localhost:%~2/ **
ng serve %1 %~2
  • Dans le même répertoire, créez un fichier ngserve.cmd avec le contenu suivant:
"scripts": {
  "start": "ngserve",

Maintenant, Dotnet obtient la ligne qu'il attend. Après cela, la commande ng serve démarrera le serveur (donc en fait le serveur de développement Angular Live n'écoute pas encore), le navigateur s'ouvrira et d'abord cela ne fonctionnera pas (ng serve toujours en train de compiler), mais si vous appuyez sur recharger après un moment, ça devrait aller.

Ce n'est qu'une solution de contournement, mais cela fonctionne pour nous.


0 commentaires

1
votes

Dans package.json, changez ng serve en ng serve --host 0.0.0.0 entrez la description de l'image ici


0 commentaires

18
votes

Je l'ai résolu en changeant:

 "scripts": {   
        "start": "echo Starting... && ng serve",

à:

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

dans package.json


3 commentaires

Cette solution a fonctionné pour moi. J'étais confronté à ce problème pendant des jours et rien ne fonctionnait.


Cela résout également mon problème, mais je pense que c'était parce que j'avais la version CLI globale différente de la version locale et des avertissements et que cela prend donc un certain temps. L'ajout de l'écho permet de créer le délai nécessaire. Je mets à jour la CLI et cela fonctionne sans la solution de contournement.


J'ai voté pour cela mais cependant, cette solution de contournement ne semble pas cohérente



4
votes

J'ai ajouté de la verbosité au processus de package.json dans le fichier package.json comme ceci.

"scripts": {
  "ng": "ng",
  "start": "ng serve --verbose",
  "build": "ng build", ...
}, ...

Je ne sais pas pourquoi cela a fonctionné, mais je sens que cela est lié d'une manière ou d'une autre au même ralentissement que l'écho.


0 commentaires

1
votes

Dans mon cas, il y avait des erreurs de compilation TypeScript qui n'ont pas été interceptées par SpaServices ou ts-node. Il y avait des références utilisant le même nom de fichier avec des espaces de noms différents qui confondaient le compilateur d'exécution. Exécutez ng build dans le dossier ClientApp et assurez-vous qu'il n'y a pas d'erreurs.


0 commentaires

1
votes

Si vous travaillez uniquement sur le backend, dans votre startup.cs commentez

//spa.UseAngularCliServer(npmScript: "start");
spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");//Todo Switch back for SPA Dev

et ajouter

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

Ainsi...

spa.UseAngularCliServer(npmScript: "start");

Exécutez le SPA à partir de cmd (dans le répertoire ClientApp) via npm start.

Ensuite, lorsque vous exécutez ou déboguez votre application complète à partir de Visual Studio, elle tournera beaucoup plus rapidement.


0 commentaires

0
votes

Aucune des solutions ici n'a fonctionné pour moi. Le problème a commencé après la mise à niveau des composants de ma solution vers leurs dernières versions. La seule chose qui fonctionne pour moi est de mettre à niveau mon cli angulaire global pour avoir la même version que ma version locale:

npm uninstall -g angular-cli
npm cache clean
npm cache verify
npm install -g @angular/cli@latest


0 commentaires