web-dev-qa-db-fra.com

Déploiement de l’application Angular 6 ASP.NET Core

J'ai développé une application asp.net core 2.0 MVC avec l'ajout d'une application angulaire 6 frontale. Ils existent tous les deux dans la même structure de projet. L'application principale asp.net agit en tant qu'API pour l'application Angular 6 côté client.

Je les ai développés côte à côte et j'ai inclus les segments de code suivants dans le fichier Startup.cs pour permettre le développement pendant l'exécution des deux applications:

ConfigureServices
      services.AddSpaStaticFiles(configuration => {
        configuration.RootPath = "ClientApp/dist";
      });

Configure
      app.UseSpa(spa => {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment()) {
          spa.UseAngularCliServer(npmScript: "start");
        }
      });

La structure du projet pour l'application Angular se trouve dans ClientApp.

Je sais que je souhaite déployer ce projet sur IIS. Je m'éloigne donc de l'environnement de développement et je sais que la ligne de code: spa.UseAngularCliServer(npmScript: "start"); ne sera pas exécutée.

Lorsque je publie le projet via Visual Studio et que je le déplace dans le dossier inetpub comme je le ferais pour d'autres applications, les pages que j'ai développées dans l'application Angular 6 ne seront pas utilisées. Je reçois une erreur de serveur interne 500 lors de la tentative d'accès à une page telle que/Home que j'ai définie dans le RoutingModule de l'application Angular 6.

Je suppose que c'est parce que je dois créer l'application Angular (ce que je peux faire avec ng build --prod) et ajouter les fichiers JS compilés à une page HTML. Mais je ne sais pas comment s'y prendre. Si quelqu'un a des liens vers des pages Web pertinentes, cela serait grandement apprécié. Ou si vous pouvez fournir des informations qui pourraient être très utiles.

Mise à jour n ° 1:

Dans le fichier Startup.cs, j'ai rendu app.UseDeveloperExceptionPage () disponible pour l'exécution en mode de production.

Au lieu d’une page d’erreur 500 sur le serveur interne, une exception s’est produite: Le middleware de page par défaut du SPA n’a pas pu renvoyer la page par défaut '/index.html' car elle n’a pas été trouvée et aucun autre middleware n’a traité la demande.

J'ai également remarqué que le dossier ClientApp/dist n'était pas présent après la publication. J'ai construit manuellement ClientApp et l'a ajouté à l'application dans inetpub. Maintenant, j'obtiens l'erreur dans la console: 

runtime.a66f828dca56eeb90e02.js:1 Uncaught SyntaxError: Unexpected token <

polyfills.7a0e6866a34e280f48e7.js:1 Uncaught SyntaxError: Unexpected token <

Request:10 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8080/styles.169e0a841442606822c8.css".

scripts.ee7fed27c36eaa5fa8a9.js:1 Uncaught SyntaxError: Unexpected token <

main.befe6f4d3c1275f2e1b3.js:1 Uncaught SyntaxError: Unexpected token <
c#asp.netangular
6
Callum Osborn

Vous devez utiliser ce code pour ASP.NET Core 2.0 , pas ce que vous utilisez. Mon application est publiée en utilisant cette approche.

        app.UseMvc(routes =>
        {
 //Remove this if you don't need it
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");

            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
              defaults: new { controller = "Home", action = "SPAIndex" }); // For SPA 
        });

Vous devez avoir une action dans votre HomeController qui renvoie une vue . Code pour la vue est

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>
1
Wiqi

J'ai joué avec le même problème. Mais a été capable de le faire fonctionner avec de l'aide avec quelqu'un qui est plus au courant de IIS que moi-même.

Je vais décrire mes étapes à suivre pour exécuter une application Angular 6 .NET Core 2.1 sur IIS.

Commencez par supprimer services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; }); de votre Startup.cs

  1. Publiez votre application angulaire à l'aide de ng build --prod
  2. Créez un dossier ClientApp dans votre dossier wwwroot
  3. Créez ensuite un autre dossier wwwroot dans le dossier Client App.
  4. Copiez les fichiers de votre dist\ClientApp dans le nouveau chemin wwwroot/ClientApp/wwwroot
  5. Créez un nouveau répertoire pour publier votre application et pour que IIS - pointe vers.
  6. Publiez votre application .Net Core dans le nouveau répertoire à l'aide de la ligne de commande et exécutez dotnet publish -c Release -o Your new directory
  7. Coupez tous les fichiers publiés à la racine de votre nouveau répertoire dans le dossier wwwroot/ClientApp. Voici un exemple d'image  enter image description here
  8. Ajoutez un nouveau web.config à votre dossier wwwroot/ClientApp.
  9. Ajouter ce truc à votre config 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <handlers>
      <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified" />
    </handlers>
    <aspNetCore processPath="dotnet" arguments=".\YourApp.dll" stdoutLogEnabled="true" stdoutLogFile=".\stdout" />
    <rewrite>
      <rules>
        <rule name="AngularApi" stopProcessing="true">
          <match url="ControllerName/.*" />
          <action type="None" />
        </rule>
        <rule name="Angular Routes" enabled="true" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="./index.html" />
        </rule>
      </rules>
    </rewrite>
    <httpErrors errorMode="Detailed" existingResponse="Replace">
      <remove statusCode="404" />
      <error statusCode="404" responseMode="ExecuteURL" path="/index.html" />
    </httpErrors>
  </system.webServer>
</configuration>

  1. Créez un site Web dans IIS et pointez-le dans le dossier wwwroot/ClientApp de votre nouveau répertoire publié. Devrait ressembler à ceci C:\Projects\ClientLocatorExceptions2\wwwroot\ClientApp
0
Austin Born