I have a simple web application in Visual Studio 2017 (version 15.5.4), Its a homepage showing 'Hello World!' from the backend.
The version of Microsoft.AspNetCore.All is 2.0.7.
I have following in my application:
| Backend | Frontend (Angular) |
| Model, Controller | Service, Model, Component|
When I run the application locally, it successfully runs. But when I publish it to my Azure web app, it fails.
diagnostic logs of web application:
018-05-07 13:16:38.634 +00:00 [Error] Microsoft.AspNetCore.NodeServices: ERROR Response {
_body: 'You do not have permission to view this directory or page.',
status: 403,
ok: false,
statusText: 'Forbidden',
headers:
Headers {
_headers:
Map {
'content-length' => [Array],
'content-type' => [Array],
'server' => [Array],
'x-powered-by' => [Array],
'date' => [Array] },
_normalizedNames:
Map {
'content-length' => 'content-length',
'content-type' => 'content-type',
'server' => 'server',
'x-powered-by' => 'x-powered-by',
'date' => 'date' } },
type: 2,
url: 'http://pweb-dev-ferfer.azurewebsites.net/home' }
I did search in SO and applied the solutions from other questions, I created the web.config as suggested here.
I dont have the ASPNETCORE_ENVIRONMENT as Development as suggested Here.
This is startup.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.Webpack;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
namespace WebApp
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
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)
{
services.AddMvc();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions
{
HotModuleReplacement = true
});
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
}
}
}
Model: Home.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace WebApp.Models
{
public class Home
{
public string msg { get; set; }
}
}
Controller:HomeController.cs:
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WebApp.Models;
namespace WebApp.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
public IActionResult Error()
{
ViewData["RequestId"] = Activity.Current?.Id ?? HttpContext.TraceIdentifier;
return View();
}
[HttpGet]
[Produces("application/json")]
[Route("home")]
public IActionResult Get()
{
try
{
Home home = new Home();
home.msg = "Hello World!";
return Ok(home);
}
catch (Exception ex)
{
return BadRequest($"Failed to get message {ex}");
}
}
}
}
Service: home.service.ts
import { Http, Response } from '@angular/http';
import { Injectable, Inject } from "@angular/core";
import 'rxjs/add/operator/map';
import { IHome } from '../models/Home';
@Injectable()
export class HomeService
{
myAppUrl: string = "";
constructor(private _http: Http, @Inject('BASE_URL') baseUrl: string) {
this.myAppUrl = baseUrl;
}
getMessage() {
return this._http.get(this.myAppUrl + "home").map((response: Response) => response.json());
}
}
Component: home.component.ts
import { Component, OnInit } from '@angular/core';
import { HomeService } from '../../services/home.service';
import { IHome } from '../../models/Home';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'home',
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
home: IHome;
constructor(private homeService: HomeService, private route: ActivatedRoute)
{
}
ngOnInit(): void {
this.homeService.getMessage().subscribe(data => this.home = <IHome>data);
}
}
Update:
I can publish the web app if I do not use angular service. So if I ask the Home component to use home.service for fetching the msg, the publish fails.
This is package.json:
{
"name": "WebApp",
"private": true,
"version": "0.0.0",
"scripts": {
"test": "karma start ClientApp/test/karma.conf.js"
},
"devDependencies": {
"@angular/animations": "4.2.5",
"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/compiler-cli": "4.2.5",
"@angular/core": "4.2.5",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/platform-browser": "4.2.5",
"@angular/platform-browser-dynamic": "4.2.5",
"@angular/platform-server": "4.2.5",
"@angular/router": "4.2.5",
"@ngtools/webpack": "1.5.0",
"@types/chai": "4.0.1",
"@types/jasmine": "2.5.53",
"@types/webpack-env": "1.13.0",
"angular2-router-loader": "0.3.5",
"angular2-template-loader": "0.6.2",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"chai": "4.0.2",
"css": "2.2.1",
"css-loader": "0.28.4",
"es6-shim": "0.35.3",
"event-source-polyfill": "0.0.9",
"expose-loader": "0.7.3",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"html-loader": "0.4.5",
"isomorphic-fetch": "2.2.1",
"jasmine-core": "2.6.4",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"karma": "1.7.0",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.1.0",
"karma-webpack": "2.0.3",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2",
"webpack-merge": "4.1.0",
"zone.js": "0.8.12"
}
}
