Home:ALL Converter>Angular + Web API Error Only In Production

Angular + Web API Error Only In Production

Ask Time:2021-03-17T03:23:30         Author:Thomas G

Json Formatter

About the App

I have an Angular 8 App that uses .Net REST APIs that I inherited from a previous employee (I am new to both frameworks). It has been under development for a few months and has been successfully published to the Production server for testing several times throughout development.

The Issue

After the last publish to the Production server, I am receiving two errors in the console stating Unexpected token < in JSON at position 0 for the API call api/MtUsers/GetLoggedInUser which is called on the backend of the home component. I did not update any code in the home component or the MTUsersController since the last time changes were published to production.


  • Error only appears in production
  • Error still exists if I checkout an older (previously working) commit and publish
  • Visual Studio started complaining about experimental decorators and missing modules on publish (fixed by restarting VS)
  • Calling the API using postman appears to return index.html in production but returns the MtUser object in localhost

What I've Tried

  • Clean solution and re-publish
  • Checkout last known working commit and publish
  • Recycle application pool and restart website in IIS
  • Try various code changes related to website configuration

Relevant Code

I'm not too sure what is most "relevant" to this issue, so I am providing the code specified in the error and the startup.cs file. Let me know if something else would be more useful.


import { Component } from '@angular/core';
import { MtUser } from 'src/app/core/models/mtUser.model'
import { MtUserService } from 'src/app/core/services/mtUser.service';

  selector: 'app-home',
  templateUrl: './home.component.html',
export class HomeComponent {
  loadingLoggedInUserInfo = true;
  loggedInUser: MtUser = <MtUser>{};

  /** home ctor */
    private mtUserService: MtUserService){
    document.getElementsByClassName('main-content')[0].scroll(0, 0);
      .subscribe(response => {
        this.loadingLoggedInUserInfo = false;
        this.loggedInUser = response;


import { Injectable } from '@angular/core';
import { MtUser } from 'src/app/core/models/mtUser.model';
import { environment } from 'src/environments/environment';
import { HttpClient } from '@angular/common/http';
@Injectable({ providedIn: 'root', })
export class MtUserService {
  constructor(private http: HttpClient) { }
  GetLoggedInUser() {
    return this.http.get<MtUser>(environment.apiUrl + '/MtUsers/GetLoggedInUser');


using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using MT8.Data;
using MT8.Models;
using MT8.Utilities;

namespace MT8.Controllers
    public class MtUsersController : Mt8ControllerBase
        private readonly Mt8Context _context;

        public MtUsersController(Mt8Context context)
            _context = context;
        // GET: api/MtUsers/GetLoggedInUser
        public async Task<ActionResult<MtUser>> GetLoggedInUser()
            var loggedInUserName = ApplicationEnvironment.GetLoggedInUserName(this.HttpContext);
            var loggedInUser = await this._context.MtUsers
                .SingleOrDefaultAsync(u => u.UserName == loggedInUserName);

            if (loggedInUser == null)
                return NotFound();

            return loggedInUser;


using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using Microsoft.EntityFrameworkCore;
using MT8.Data;
using Microsoft.AspNetCore.Server.IISIntegration;
using System.Threading.Tasks;
using MT8.Utilities;

namespace MT8
    public class Startup
        public Startup(IConfiguration configuration)
            Configuration = configuration;

        readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
                configuration.RootPath = "ClientApp/dist";

            services.AddCors(options =>
                builder =>

            services.AddDbContext<Mt8Context>(options =>


                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToIntJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToNullableIntConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDecimalJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDoubleJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToDateTimeJsonConverter()))
                .AddJsonOptions(options =>
                    options.JsonSerializerOptions.Converters.Add(new StringToNullableDateTimeConverter()));


        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env, Mt8Context dbContext)
            if (env.IsDevelopment())
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.

            if (!env.IsDevelopment())



            app.UseEndpoints(endpoints =>
                    name: "default",
                    pattern: "{controller}/{action=Index}/{id?}");

            app.UseSpa(spa =>
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.SourcePath = "ClientApp";

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

            if (!env.IsProduction())

Author:Thomas G,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/66662060/angular-web-api-error-only-in-production