0

I've been trying to publish project to Azure web service. I generated the project using dotnet cli tool, when it generated the project i deleted the provided ClientApp folder and generated a new Angular project using Angular CLI. Now I have Angular 6 on frontend and Asp.NET core 2.1 on the backend with Entity Framework Core. I coded a simple website that works perfectly on my localhost. Now i want to publish it to Azure. The publish process itself is successful i can see a message below, but when the url opens in the browser it says the following: enter image description here Then I tried Diagnose and solve problems on Azure here's what i got: enter image description here Full report: enter image description here

During the publish i configured some settings:

enter image description here

But still no luck. Previously i used the same approach with core 2.0 and angular 5 that worked fine. Now i'm having issues with core 2.1 and angular 6

Here's Startup.cs:

using Microsoft.AspNetCore.Authentication.Cookies;
using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.IdentityModel.Tokens;
using MovieApp.Models;
using System.IO;
using System.Text;

namespace MovieApp
{
public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options =>
        {
            options.AddPolicy("EnableCORS", builder =>
            {
                builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod().AllowCredentials().Build();
            });
        });

        services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme).AddJwtBearer(options =>
        {
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateLifetime = true,
                ValidateIssuerSigningKey = true,
                ValidIssuer = "http://localhost:63269",
                ValidAudience = "http://localhost:63269",
                // ValidIssuer = "https://nqmoviesng.azurewebsites.net",
                //  ValidAudience = "https://nqmoviesng.azurewebsites.net",
                IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("superSecretKey@345"))
            };
        });
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();

        services.AddMvc();


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

    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseAuthentication();
        app.UseCors("EnableCORS");

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }

        app.UseDefaultFiles();
        app.UseStaticFiles();

        app.UseMvcWithDefaultRoute();

        app.UseSpaStaticFiles();


        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {


            spa.Options.SourcePath = "ClientApp";

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

.csproj file:

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>
<TargetFramework>netcoreapp2.1</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\** 
</DefaultItemExcludes>

<!-- Set this to true if you enable server-side prerendering -->
<BuildServerSideRenderer>false</BuildServerSideRenderer>
</PropertyGroup>

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.All" Version="2.1.1" />
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="2.1.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.1.1" />
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.1.1" />
<PackageReference Include="Newtonsoft.Json" Version="11.0.2" />
</ItemGroup>

Any ideas?

2
  • can you return {"message":"Unsuccessfully."} something like from anywhere? bcoz i got this Commented Aug 11, 2018 at 11:41
  • Change to Debug build config , redeploy; and use visual studio 2017 community to debug azure app to see the runtime error. Commented Aug 11, 2018 at 15:12

1 Answer 1

4

I changed angular.json file. Replaced "outputPath": "dist/ClientApp", with "outputPath": "dist" and it worked!

Sign up to request clarification or add additional context in comments.

1 Comment

no where in your question have you mentioned "how" you deployed your angular app to azure, thus making troubleshooting your question very difficult if not impossible. If the reason why your app did not work was because you had simply deployed the dist folder to Azure and not specifically deployed the folder that is created inside the dist directory after you run the ng build --prod command which for you it would have to be dist/ClientApp directory that should've been deployed to azure, then please update your question to include that information. It will be very useful...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.