CSS works as localhost but not by server address

Issue

After having a couple issues with CSS, I downloaded the menu code from http://responsivemultimenu.com.

The code works great on my local machine in both IE and FF when calling as LocalHost. When I copied it over to our intranet server (Windows 2003, IIS 6) and call the page by it's server address, the css fails to fully load in IE, but works in firefox. I tried it on a second server (Windows 2008, IIS 7.5) with the same result. To see if it was my browser, I had a couple other people call that page on the server from their computer with the same result.

I have not changed any of the html, css or js code from the download.

It seems like some of the css loads but not all of it. I am completely stumped.

Here is a screen shot of it in FireFox and what it is supposed to look like.

Here is a screenshot of it in Internet explorer. It's not working.

I really need to figure this out of why the css is not loading. What could be blocking it? What do I need to change either in my browser or on my server?

Solution

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

Answered By - Soren

Read More

CORS Issue with Angular App on IIS: POST Requests Failing

Issue

I'm developing an Angular application and facing a CORS issue when making POST requests to my server, but only after deploying it on IIS. The application works perfectly on localhost. Here are the details:

Environment:

• Frontend: Angular
• Backend: Node.js, .NET,
• Server URL (IIS): http://wapl8.ad.uclp:9091
• Angular App URL (IIS): http://skw.uat.ad.uclp
• Localhost works fine for all requests

Problem: When I try to send a POST request from the Angular app (deployed on IIS) to the server, I encounter the following CORS error:

Access to XMLHttpRequest at 'http://wapl8.ad.uclp:9091/api/YPTApi/Save' from origin 'http://skw.uat.ad.uclp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

What I've Tried:

• GET requests work fine.
• On my local development environment (localhost), both GET and POST requests work without any CORS issues.
• I've checked Angular's CORS documentation and tried various solutions, but the issue persists after deployment on IIS.

Can anyone help me understand how to configure my environment to allow POST requests without violating CORS rules? Is this an issue with the backend server configuration, or is there something I can do on the Angular side to fix this?

Code:

 public static void Configure(IServiceCollection services)
 {
     const string myAllowSpecificOrigins = "AllowSpecificOrigins";

     services.AddCors(options =>
     {
         options.AddPolicy(name: myAllowSpecificOrigins,
          // builder =>
         //  {


               builder =>
               {


                   builder
                       .WithOrigins(
                       "https://localhost:44498", 
                       "http://localhost:1285", 
                       "https://localhost:44337",
                       "http://localhost:44337",
                       "http://skw.uat.ad.uclp",
                       "http://skw.ad.uclp"
                       ) 
                       .AllowAnyHeader()
                       //.AllowAnyMethod()
                       .WithMethods("GET", "POST", "DELETE", "PUT", "OPTIONS")
                       .AllowCredentials();

Solution

I don't know if you had configured, but .NET need to set a confogiratin to manage CORS. Add the follow in your Startup ConfigureServices method:

  services.AddCors(options =>
  {
      options.AddPolicy(name: "general",
          builder =>
          {
              builder.AllowAnyOrigin()
              .AllowAnyMethod().
              AllowAnyHeader();
          });
      options.AddPolicy(name: "restrictive",
          builder =>
          {
              builder.WithOrigins("http://Your frontEnd URL").
              WithMethods("GET", "POST", "PUT", "DELETE")
              .AllowAnyHeader();
          });
  });

Now in Startup, in Configure Method add:

    app.UseCors("[general/restritive];  // or whatever name you use...

Is this example, "general" CORS configuration allows any origin from any host, and "restrictive" allows request just from the host you set

Answered By - Stalky

Read More

IIS Rewrite rule with Angular routing

Issue

I am building an application that is an ASP.NET MVC and Angular 1.x hybrid. I use MVC as a shell and then layered Angular on top of it. I did this for a couple of reasons. First, it provided me with the ability to create an HTML helper class for script references to support cache busting. Second, it allows me to "push" a set of server side configurations to angular for things like web service URLs, etc. All of this seems to be working ok except for a single issue.

Currently, I am having to process a couple of IIS rewrite rules to make all of this work properly. In testing in a staged environment today, I published a link to Facebook that does not appear to work properly though and I'm not really sure why. Based on my understanding of the rule syntax, I thought it would work, but isn't.

Here are the IIS rewrite rules I currently have in web.config and why I have each rule:

  <system.webServer>
    <rewrite xdt:Transform="Replace">
      <rules>
        <rule name="cachebust">
          <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
          <action type="Rewrite" url="{R:1}/{R:3}" />
        </rule>
        <rule name="baseindex" 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="/" />
        </rule>
        <rule name="non-www" stopProcessing="true">
          <match url="(.*)" negate="false"></match>
          <conditions>
            <add input="{HTTP_HOST}" pattern="^exampledomain\.org$" negate="true"></add>
          </conditions>
          <action type="Redirect" url="http://exampledomain.org/{R:1}"></action>
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

1) The "cachebust" rule is used for script cache busting. The HTML helper I wrote takes the path of the script file and inserts a fake version # into the path. For example, "scripts/example.js" would become "scripts/v-123456789/example.js", where "123456789" are the ticks from the current date and time. This rule will rewrite the URL back to the original but since the page is output with the version stamped path, it will force my angular scripts to be reloaded by the browser in the event that they change. This rule appears to be working fine. Credit to Mads for this: https://madskristensen.net/blog/cache-busting-in-aspnet/

2) The "baseindex" rule is used to rewrite the URL so that ASP.NET will always serve the index.cshtml page that is used as the root for my site. This rule also appears to work fine. Credit to this SO QA: How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

3) The "non-www" rule is the problematic one. The goal of the rule is to redirect all www requests to non-www requests based on ScottGu's blog post (link below) about canonical host names and how they affect SEO. This rule works perfectly fine for www.example.org as it redirects the URL to example.org, but it fails when the URL looks like this: www.example.org/entity/1 where entity is a detail page for id = 1. In practice, it fails for www.example.org/about too. Since my web services require CORS to be enabled as they are on separate domains, this also needs to happen for that. https://weblogs.asp.net/scottgu/tip-trick-fix-common-seo-problems-using-the-url-rewrite-extension

For sake of completeness: HTML 5 mode is enabled for Angular and my route to the specified page is defined as such:

.state('entityDetail', {
                    url: '/entity/{id}',
                    templateUrl: 'app/pages/entity/entityDetail.html',
                    controller: 'entityDetailController',
                    controllerAs: 'entityDetailCtrl'
                })

Also, my _Layout.cshtml contains the base href of:

<base href="/" />

and script references like such (except for the angular scripts that require the cachebust rule listed above):

<script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script>

I've tried several different versions of the rule, but they all lead to different issues. Since there are so many different things at play here, I am concerned that I am overlooking something or that I am wrong in my thinking on how this "should" work.

Any help would be greatly appreciated.

Solution

It took some trial and error to figure this all out, but wanted to post the answer I finally came up with in the event that someone else ever tries to marry ASP.NET MVC and Angular 1.x together while allowing cache busting in Google Chrome.

It turned out to be a couple of things:

1) The order of the rules.

2) The stopProcessing flag and when it should be enabled.

In summary, to get this to work, I built the rules so that all requests must be redirected to www.exampledomain.com and then stop processing rules until the reprocessed request happens (this time www. will be guaranteed). Then, the cachebust rule must happen BEFORE the rewrite to the base index of "/", otherwise, the entire HTML document is returned by the server when each of the script files that must be "busted" load. This was really the majority of my issue from the very beginning. The whole process was honestly a little confusing so if this answer is not sufficient, please comment and I will try my best to better articulate the "whys" I found in my research. Hope this helps someone else though...it only took 10 days to figure out. :)

<system.webServer>
    <rewrite xdt:Transform="Replace">
      <rules>
        <rule name="forcewww" patternSyntax="ECMAScript" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAny">
            <add input="{HTTP_HOST}" pattern="^exampledomain.com$" />
          </conditions>
          <action type="Redirect" url="http://www.exampledomain.com/{R:0}" />
        </rule>
        <rule name="cachebust">
          <match url="([\S]+)(/v-[0-9]+/)([\S]+)" />
          <action type="Rewrite" url="{R:1}/{R:3}" />
        </rule>
        <rule name="baseindex">
          <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="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Answered By - user1011627

Read More

Why I'm getting Unknown error with status 0 - Angular Universal?

Issue

I'm getting below error in 10 % of my requests on production env.

"error": "[ProgressEvent]",
"headers": "[ti]",
"message": "Http failure response for https://api.xxxxxx:5000/api/public-web/files: 0 Unknown Error",
"name": "HttpErrorResponse",
"ok": false,
"status": 0,
"statusText": "Unknown Error",
"url": "https://api.xxxxxx:5000/api/public-web/files"

Logs are from Sentry.
Stack:

• Angular 15 - Universal
• .Net Core 6
• Server: IIS 10

Firstly, I was thinking an issue is related to the CORS but although that I had already configured CORS on backend side, I've also added following to all response headers on the server in web-config (IIS):

access-control-allow-headers: *
access-control-allow-methods: GET,POST,PATCH,PUT,DELETE,OPTIONS
access-control-allow-origin: *

I've covered CORS just on the IIS with above custom headers in web.config, not on the application side.

Also I've read that it might be related to the bad internet connection (as per Angular official documentation) but that is not an issue here (maybe but just in 1% of 10% of cases).

Users have tried to change their network connection from WIFI to mobile but still the same issue appears.

Solution

I've faced this same situation. Angular + CORS properly configured + lots of Sentry issues with "HTTP 0 Unknown Error".

You're on the right track. This happens when some users have spotty/bad internet/Wi-Fi connections causing some requests to fail.

I've managed to decrease these errors, and consequently improve UX, by implementing a retry interceptor that retries those failed requests:

import { HttpErrorResponse, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { retry, timer } from 'rxjs';

// These variables have to stay outside the class because of 'this' keyword binding issues
const maxRetries = 2;
const delayMs = 2000;

@Injectable()
export class RetryInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler) {
    // Pass the request to the next request handler and retry HTTP 0 errors 2 times with a 2-second delay
    return next.handle(request).pipe(retry({ count: maxRetries, delay: this.delayNotifier }));
  }

  delayNotifier(error: any, retryCount: number) {
    if (error instanceof HttpErrorResponse && error.status === 0) {
      return timer(delayMs);
    }

    // re-throw other errors for anything else that might be catching them
    throw error;
  }
}

Even with this retry interceptor, you will always have some of these errors because, well, we can't control the users' internet connections :)

Answered By - nunoarruda

Read More

Adding a .htm file to an IIS website asks for username and password instead of displaying the page

Issue

This is probably a simple fix, but I am having trouble googling the answer. What I have done was make a copy of a page that is currently on the site and renamed it. So for example I made a copy of page1.htm and renamed it to page1temp.htm. Now when I try to navigate to page1temp.htm it won't display the page, but instead asks for a username/password. If I navigate to page1.htm it still works as expected. I'm not sure what I am missing here. I am using IIS on a Windows Server 2003 R2.

I'm not sure what I need to change in IIS to get the page to display properly.

Solution

Check the NTFS permissions of the file (for example, by right-clicking on the file in Windows Explorer and checking the Security settings). Compare the permissions for both files. Chances are that the user used for anonymous authentication of your web site (might be IUSR_something) has permissions to read one file but not the other.

Answered By - Heinzi

Read More

Uncaught SyntaxError: Unexpected token in Angular while running in IIS server under subfolder

Issue

I have created Angular 11 template (Angular 11 + .Net core 5.0) using visual studio 2019. Angular application should be run from subfolder(caui) and not from the root folder. I have published the angular application and deployed in IIS. But i am getting following error in the browser.

Uncaught SyntaxError: Unexpected token '<' (at runtime.js:1:1)
polyfills.js:1 Uncaught SyntaxError: Unexpected token '<' (at polyfills.js:1:1)
main.js:1 Uncaught SyntaxError: Unexpected token '<' (at main.js:1:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Below are the configurations in my project.

Index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>tester</title>
  <base href="/caui/" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#3dcd58" />
  <link rel="manifest" href="manifest.json" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
</head>

<body>
  <!--[if lt IE 10]>
  <p>
    You are using an <strong>outdated</strong> browser.
    Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
  </p>
  <![endif]-->
  <noscript>
    <p>
      This page requires JavaScript to work properly. Please enable JavaScript in your browser.
    </p>
  </noscript>
  <ses-app theme="auto">
    <app-root></app-root>
  </ses-app>
</body>

Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "LowcostCAApp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref": "/caui/",
            "deployUrl": "/caui/",
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "6mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "LowcostCAApp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "LowcostCAApp:build:production",
              "baseHref": "/caui/",
              "servePath": "/caui/"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "LowcostCAApp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "LowcostCAApp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "LowcostCAApp:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "LowcostCAApp"
}

package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build  --prod --aot --base-href /caui/ --output-hashing none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

.Net core Startup.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace ui
{
    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.AddControllersWithViews();
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
            }

            app.UseStaticFiles();
            if (!env.IsDevelopment())
            {
                app.UseSpaStaticFiles();
            }

            app.UseRouting();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    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");
                }
            });
        }
    }
}

Publishprofile.pubxml

Browser network tab trace

IIS Server settings

I am not able to fix the problem.

Solution

I found the solution. Since we make index.html like subpath based. <base href="/caui/" />.

Packages are published into Clientapp/dist/caui folder. But index.html should be placed in Clientapp/dist folder location to serve the request.

If i move the Index.html outside from caui folder then it got worked.

Answered By - V. Periyasamy

Read More

HTTP Error 404.0 (Error Code 0x80070002) - IIS 10, .NET 4.0

Issue

I have an issue with my default error page. Currently, it keeps displaying the following error. The custom error HTML page file is in the same folder as the web.config, I have tried changing the directory of the error page HTML but the results were the same. However, what confuses me is the fact that I was able to run the error page on another local server, but I wasn't able to get the HTML error page on the server with the web.config configurations.

I have tried the following changes to my web.config file. However, none of them worked.

Added to web.config the following codes:

<modules runAllManagedModulesForAllRequests="true">

<validation validateIntegratedModeConfiguration="false" />

 <remove name="UrlRoutingModule"/>

Attached is the error code and the configurations image I have. (I removed the following configurations as mentioned above as they did not work) Please do leave your suggestions and tips, thank you!

Solution

I had dug deeper and realized that my code was wrong. I tried using the httpsError attribute errorMode= "DetailedLocalOnly" which resulted in this error. The correct value for this attribute should be errorMode= "Custom"

My bad for not checking the code thoroughly. More information about the attribute can be found here https://learn.microsoft.com/en-us/iis/configuration/system.webserver/httperrors/

Thank you all.

Answered By - Jed

Read More

Do I need a separate Web Site in IIS for my ASP.NET Core Web API project and my Angular project?

Issue

How can I host the published result of this simple tutorial in IIS? Is there guidance on how best to accomplish this?

The solution contains an ASP.NET Core Web API project (backend) and an Angular project (front-end). It works in VS2022 (using IIS Express). When I publish the backend project, it also contains the wwwroot folder containing the Angular files (see below).

In IIS (on my Windows 10 workstation), I added a new Web Site bound to http port 84 and set the app pool to No Managed Code and pointed it to the publish folder (see below).

http://localhost:84 results in 404, but http://localhost:84/weatherforecast returns the JSON response as expected. The Web API project is working as expected, but not the Angular part. I'm guessing that's because

I could host both projects as separate Web Sites in IIS and I would have to do two separate publish steps (not that big of a deal), but the Web API publish folder would still contain the wwwroot folder with the Angular files, which feels wrong.

Another option would be to have a single project that contains the Web API and Angular files together, but that also feels wrong.

Given that Microsoft's guidance (via the tutorial) is to have the separate projects and publish them together, it seems like there would be a good way to host them that way in IIS and that someone in this community knows the answer (any other gotchas appreciated as well).

C:\kk\AngularTypeScript\publish
|-- Backend.deps.json
|-- Backend.dll
|-- Backend.exe
|-- Backend.runtimeconfig.json
|-- Microsoft.OpenApi.dll
|-- Swashbuckle.AspNetCore.Swagger.dll
|-- Swashbuckle.AspNetCore.SwaggerGen.dll
|-- Swashbuckle.AspNetCore.SwaggerUI.dll
|-- appsettings.Development.json
|-- appsettings.json
|-- web.config
`-- wwwroot
    |-- 3rdpartylicenses.txt
    |-- favicon.ico
    |-- index.html
    |-- main.e3e89bda804b4330.js
    |-- polyfills.69ca295dd26cc35d.js
    |-- runtime.f8659de94caf0803.js
    `-- styles.ef46db3751d8e999.css

Solution

I ended up finding this answer myself, so I'll post it here in case it helps someone else down the line.

The critical piece here is the addition of the following two lines of code in the ASP.NET Core Web API project's Program.cs file.

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

Additionally, I configured the IIS Web Site's Authorization Rules to allow All Users (this is not production advice, this is to get it up and running on your local machine). Since the tutorial and template do not include a web.config file (it gets autogenerated during the Publish step), you'll either need to do this step via IIS (every time you publish) or add a web.config file to the project and include the relevant section of code there (FWIW, I included a web.config file). I've included both below for completeness.

I named my project Backend, which is why you'll see Backend.dll (you'll need to change that accordingly). Also, you'll see the authorization section.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <location path="." inheritInChildApplications="false">
        <system.webServer>
            <handlers>
                <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
            </handlers>
            <aspNetCore processPath="dotnet" arguments=".\Backend.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />
        </system.webServer>
    </location>
    <system.webServer>
        <security>
            <authorization>
                <add accessType="Allow" users="*" />
            </authorization>
        </security>
    </system.webServer>
</configuration>

Since I already had a Web Site bound to port 80, I bound this site to port 83.

In your browser, go to

http://localhost:83 to see the Angular site load (with data from the backend Web API)

http://localhost:83/weatherforecast to see the JSON response from the WEB API controller.

There are other necessary steps to host ASP.NET Core in IIS, but those aren't specific to this question.

Hope this helps someone else!

Answered By - Kyle K

Read More

Angular universal not loading the routes when publishing to iis

Issue

I added angular universal to a project and is running perfectly fine locally with no issues, but when I published it on iis and run the website I get a blank white screen with no errors. I downloaded URL Rewrite, Node js and iisnode, I checked a lot of feeds but none that actually helped.

I followed this tutorial Link. I also gave full access to IIS_Users

Any help would be appreciated.

Server.ts :

import 'zone.js/dist/zone-node';

import {APP_BASE_HREF} from '@angular/common';
import {ngExpressEngine} from '@nguniversal/express-engine';
import * as express from 'express';
import {existsSync} from 'fs';
import {join} from 'path';

import {AppServerModule} from './src/main.server';
import 'localstorage-polyfill'


// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
  global['localStorage'] = localStorage;

  const server = express();
  const distFolder = join(process.cwd(), 'dist/appname/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/main/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // server.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  return server;
}

function run(): void {
  const port = process.env['PORT'] || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from './src/main.server';

Main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';


if (environment.production) {
  enableProdMode();
}

function bootstrap() {
     platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));
   };


 if (document.readyState === 'complete') {
   bootstrap();
 } else {
   document.addEventListener('DOMContentLoaded', bootstrap);
 }
 

If I go to http://localhost I get the blank white screen but when I go to http://localhost/index.html the page then loads

I checked the logs of the node server and it is printing out the following:

Node Express server listening on http://localhost:\\.\pipe\8e58c146-d5c8-4cc5-a8f5-0dada515a13a

When I view page source or inspect the page I get the following html:

<!DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8">
        <base href="/">
        <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    
        <link href="assets/favicon.ico" rel="icon" type="image/x-icon">
        <title>Website</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <style type="text/css">@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4AMP6lbBP.woff2) format('woff2');unicode-range:U+1F00-1FFF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0370-03FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4AMP6lbBP.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4AMP6lQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
        <style type="text/css">@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;}</style>
        
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@coreui/coreui@4.2.0/dist/css/coreui.rtl.min.css" integrity="sha384-7W1eMOzj3wRp1Oat/SJe+uPZ3lBB5YWlrjI9zeLbto2KkseMeJKSGAs4844qZPjz" crossorigin="anonymous">
        <style>:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.spinner-grow{display:inline-block;width:var(--bs-spinner-width);height:var(--bs-spinner-height);vertical-align:var(--bs-spinner-vertical-align);border-radius:50%;animation:var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name)}.spinner-grow{--bs-spinner-width:2rem;--bs-spinner-height:2rem;--bs-spinner-vertical-align:-.125em;--bs-spinner-animation-speed:.75s;--bs-spinner-animation-name:spinner-grow;background-color:currentcolor;opacity:0}.spinner-grow-sm{--bs-spinner-width:1rem;--bs-spinner-height:1rem}@media (prefers-reduced-motion:reduce){.spinner-grow{--bs-spinner-animation-speed:1.5s}}.m-1{margin:.25rem!important}@charset "UTF-8";:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}</style><style>:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,:after,:before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}@charset "UTF-8";:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}</style><link rel="stylesheet" href="styles.95687808cf5f755e.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.95687808cf5f755e.css"></noscript></head>
        
        <body ng-version="14.2.2" ng-server-context="other">
            <router-outlet></router-outlet><!---->
        </body>
    </html>

It seems that the page is loading but the routing is not

Solution

After 2 weeks of trying to solve this problem I came across 1 post on stack overflow that did not have a lot of upvotes and was not the accepted answer. However, it was one of the few posts that had a lot of research behind. I followed @Sparker73 answer and finally my problem was solved.

Question

Answered By - Osama El-Masri

Read More

ASP.Net application interfering with remote host Let's Encrypt (via Plesk) installation?

Issue

So, to install Let's Encrypt SSL cert, I head over to my Plesk account, pick a domain or subdomain and click on Let's Encrypt then I only have a field to put in an email address, and a button to install.

To install, Let's Encrypt sends my site an HTTP request:

GET /.well-known/acme-challenge/n9cD8Lpv-woEU73NhCUdFyqOYMc5hrANF_byoiaYrZc - HTTP/1.1

If I create a fresh 'site' through Plesk, and install the cert, that GET request get's a nice 200 response and the SSL cert installs fine.

However, I had a 'sandbox' with no SSL installed, I then deployed an ASP.NetCore app to the 'sandbox' for staging and then tried to install the SSL certs. With an ASP.NetCore application running, when Let's Encrypt sends that GET request, it results in a 404 error and the installation fails.

Has anyone run into this? What do I need to configure? Is it MVC routes or maybe the AngularJS (~1.5) routes that is interfering?

I don't see a /.well-known/* directory anywhere, I'm not sure if it is hidden, but I can't get to it, so how would I know WHAT to configure, IF I needed to configure something in routes to allow the GET /.well-known/acme-challenge/*?

The remote host tech support is of no help. They told me to wait 72 hours because I tried to many times and I'm just locked out (which I'm not)

Here is the actual Plesk error message

Let's Encrypt SSL certificate installation failed: Challenge marked as invalid. Details: Invalid response from http://my-domain.net/.well-known/acme-challenge/AJsMc3HXiOZRGaFVsMR3uZEdYu1moJ2Po62t3e6uV10 [my-ip]: 404

I'm fairly sure I could 'work around' this by just deleting my site, installing the SSL certificate than uploading again, but I would like to know what is actually going on, and if I can handle it properly.

AFTERTHOUGHT

Let's Encrypt is a 30 day auto-renewing service. If my ASP.NET application is blocking the installation, then it will also block the automatic renewal, so I would have to remove my site every 30 days and re-deploy, unacceptable!

SOLVED Here is the solution to this very specific scenario.

There are other work around's that will work, and of course this solution only works on IIS web servers.

ASPNetCore MVC Routing Let Server Handle Specific Route

Solution

Doing a quick search yielded this little gem

Which seems to match your particular problem.

To get a certificate, let’s encrypt verify that you own the domain by requesting a file on your server. In this case, the file is not accessible (status 404). Let’s understand what happened.

IIS get the request, and find the associated web site. Then it executes handlers in order until one send the response. ASP.NET Core handler is the first to handle the request.

The challenge file is in the folder “.well-known/…”, but by default ASP.NET Core serves only files located in the folder “wwwroot” => so, a 404 response is send to the client. ASP.NET Core has handled the request; therefore, the IIS Static file handler is not called.

As a workaround, you can move up the “StaticFile” handler, but your website may not work as expected. A better solution is to instruct your ASP.NET Core website to send the file located in the directory “.well-known”.

This is possible by registering it:

public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
    //...other configs

    app.UseStaticFiles(); // wwwroot
    app.UseStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @".well-known")),
        RequestPath = new PathString("/.well-known"),
        ServeUnknownFileTypes = true // serve extensionless file
    });

    //...other configs

    app.UseMvc();
}

This basically routes the call for the virtual path through core which grabs the physical path and provides the file content to the caller. This should now allow for the domain to be verified and let the certificate request process flow to completion as well as automatic renewals.

Check out the article and its suggested workaround as there don't seem to be too many additional steps involved.

Answered By - Nkosi

Read More

Passing authentication token in header while redirecting to a new SPA page

Issue

Assume these:

       A -----------------------> B
(Sender website)          (Angular website)

We implemented a normal Angular SPA (B) that its index.html and other resources are simply hosted in IIS and there is a simple rewrite rule for handling the routes in Angular. Users in Angular need to login and they get a JWT token and it is storing in browser storage.

There is a website (A) that wants to redirect users to Angular website but we want to pass the JWT token from A to B too, because the tokens are the same and we want to prevent user from logging in again.

Website A can send the token in a post request header while is redirecting to B. The problem is that JS (Angular) can't directly get the header parameters because they are sending to IIS.

The question:

1. Is there a way in IIS, we could get the token from the request and set it in html attribute while retrieving the index.html? so then, JS can check it's html elements and will find the token.

2. Is the above technique correct? if not, could you please give your suggestion?

Solution

We couldn't do this achivement only by IIS, finaly we wrote a simple Node.js application as a backend that when you call it, it loads Angular files.

Site A paases the token to the site B (which is hosting the Node.js backend) in the header through a Post request. Then the node application returns the token in the cookies.So when the angular application loads up, itreads the token from the cookies.

At last we put the Node application into the IIS.

Hope it helps other people.

Answered By - Ahmad Behzadi

Read More

How to deploy non VS projects to iis web deploy?

Issue

I have an Angular application and hosted in IIS. I want to deploy this application using Web Deploy.

I know VS solutions (.sln) could be deployed using MSBUILD and Publish Profiles.

How to deploy non VS, static applications using web deploy?

I'm looking for an option to deploy from a Bamboo build server to a remote IIS target.

Solution

As Lex Li says, if you want to publish a hosted angualr application to another IIS by using web deploy, you could use web deploy sync method.

If you just want to sync 2 folders directly root-to-root, you could try below command:

Notice:The webdeploy tool normally is inside the C:\Program Files (x86)\IIS\ folder, you need firstly locate it.

>msdeploy  -verb:sync -source:dirPath="D:\my-app\dist" -dest:dirPath="D:\AnTest"

If you want to include IIS configuration on the destination, you should use iisApp provider instead of dirPath:

>msdeploy  -verb:sync -source:iisApp=<SourceFolderOrIISPath> -dest:iisApp=<DestinationFolderOrIISPath>

Answered By - Brando Zhang

Read More

Why am I seeing a 404 (Not Found) error failed to load favicon.ico when not using this?

Issue

Synopsis

After creating a simple HTML template for testing purpose, with no favicon.ico, I receive an error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico".

I am trying to figure out where this error is coming from and wondered if someone had any ideas to point me in the right direction.

My HTML page looks like this:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple JavaScript Tester 01</title>
</head>
<body>

<script src="script.js"></script>
</body>
</html>

When I run this page in Chrome browser and open the console, I see the error message "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico". I am running this on a local IIS server. I see this same error message each time I create a new page.

Is it possible this error is coming from another page on my IIS server that I am unaware of?

Solution

Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.

See if this helps.

Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon

Answered By - makadus

Read More

How do I handle (not fix!) a CORS exception in Ionic Framework?

Issue

We have an Angular/Ionic app installed on iPhone and Android. The app calls an API on our IIS web server. When the server is up, everything works well.

However, while we are deploying a new version of the API website, we would like our app to show a maintenance page. Currently, during the deployment, we create an app_offline.htm file in the API site's root folder, which is the usual way of taking a website offline and showing a maintenance page in IIS.

Unfortunately, this means the CORS preflight request from our Ionic app also returns a 503 http error code; I guess that IIS takes the whole site down. We are unable to handle this 503 error in the Angular/Ionic app on the phone, since the preflight request is triggered by the browser. We add custom headers to each request, which cannot be avoided. The net result is that the maintenance page is not displayed when the API site is down.

Is there a way to show a maintenance page in our Ionic/Angular app while the API site is being deployed? Perhaps by configuring IIS to allow preflight requests even when app_offline.htm is in place, somehow handling the 503 on the Ionic side, or even stopping the preflight OPTIONS request from the Ionic app?

NOTE: I am NOT asking how to configure my site to solve a CORS issue, that part is already in place. I want to handle an expected CORS error when it occurs in the app while the supporting API site is being deployed.

Solution

For security reasons, specifics about what went wrong with a CORS request are not available to JavaScript code. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details.

You can find out more here at developer.mozilla.org

My suggestion is to handle any request errors like any other, inside of a interceptor.

You can then make use of the properties on the error object (like a status of 0) to decide if you should check if you are in maintenance mode, or you can just always check the mode when you get any errors.

To do this you can check if the app_offline.htm page is currently up or not with a web request, or you can make use of a separate API to determine if you are currently in maintenance mode or not.

Then take the appropriate actions based on that response.

Answered By - Jayme

Read More

virtualized shared folder on IIS ERROR HTTP 401.3 - Unauthorized

Issue

I am developing a web application on Angular and IIS which enables the users to download the files inside a shared folder. I virtualized on IIS the shared folder and when I try to visualize the folder on the browser I get ERROR HTTP 401.3 - Unauthorized, but my local user (and also everyone users) has the complete access enabled on the folder properties . On iis I tried to change the application pool user and on the virtualized folder authentication panel I tried both with anonymus and windows authentication.

Can someone help me? Thanks

Solution

I fixed this by creating a windwos network user and using this user credentials on IIS application pool authentication identity. In order to make it work, you have to set as auth method of the virtualized folder, the base authentication method. Obviusly your user and network user must have access to your shared folder.

Answered By - Gabriele Canello

Read More

Why is index.html returned by Asp net Core for requests of my Angular Spa dist files?

Issue

After deploying my Asp Net Core Angular Spa to a shared web server, requests for the angular runtime components return my index.html file.

EDIT (rephrasing question to clarity):

I have an angular spa that is served by the asp net core angular template. When I navigate to the url for the application, the index page is returned and then subsequent calls to return the script files for the client app all return index.html as well... even though the url is requesting runtime.js, main.js, etc

What additional configuration is required in addition to my code excerpts below?

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

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseStaticFiles();
    app.UseSpaStaticFiles();
    app.UseMvc();

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

In my angular.json, I specify the following URL prefixes:

"baseHref": "/APPNAME/",
"deployUrl": "/APPNAME/ClientApp/dist/"

The source tree appears to be correct.

The requests for each of the runtime components are successful but they all return my index.html rather than what was requested.

Request URL: https://example.com/MYAPP/ClientApp/dist/main.17cf96a7a0252eeecd9e.js

Response from Chrome network debugger:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>APP NAME</title>

  <base href="/APPNAME/">

  <meta content="width=device-width, initial-scale=1"
        name="viewport">
  <link href="HRDRicon.png"
        rel="icon"
        type="image/x-icon">
<link rel="stylesheet" href="/APPNAME/ClientApp/dist/styles.d9e374eff45177231bee.css"></head>
<body class="fixed-sn white-skin">

<app-root></app-root>

<noscript>
  <p>
    Sorry, JavaScript must be enabled to use this app
  </p>
</noscript>

<script type="text/javascript" src="/APPNAME/ClientApp/dist/runtime.e460f84ccfdac0ca4695.js">
</script><script type="text/javascript" src="/APPNAME/ClientApp/dist/polyfills.d0cb8e9b276e2da96ffb.js"></script>
<script type="text/javascript" src="/APPNAME/ClientApp/dist/scripts.a54ea6f0498a1f421af9.js"></script>
<script type="text/javascript" src="/APPNAME/ClientApp/dist/main.17cf96a7a0252eeecd9e.js"></script>
</body>
</html>

I will add a link to the images in a comment since that is restricted in the original post.

Solution

I struggled with the spa-extensions, too. It seems that UseSpa sets up a catch-all rule to index.html that also intercepts the requests to all static files like .js and .css. To get my spa working in a subdirectory, all that was required were the modifications 1. and 2. in the startup.cs. No spa-extensions required.

public static void Configure( IApplicationBuilder app, IWebHostEnvironment env)
{
    // ...
    app.UseHttpsRedirection();
    app.UseStaticFiles();

    // 1. Configure request path for app static files
    var fileExtensionProvider = new FileExtensionContentTypeProvider();
    fileExtensionProvider.Mappings[".webmanifest"] = "application/manifest+json";
    app.UseStaticFiles(new StaticFileOptions()
    {
        ContentTypeProvider = fileExtensionProvider,
        RequestPath = "/myapp",
        FileProvider = new PhysicalFileProvider(
            Path.Combine(Directory.GetCurrentDirectory(), @"MyApp/dist"))
    });

    app.UseRouting();

    app.UseAuthentication();
    app.UseAuthorization(); 

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapDefaultControllerRoute();
        endpoints.MapRazorPages();
        // 2. Setup fallback to index.html for all app-routes
        endpoints.MapFallbackToFile( @"/myapp/{*path:nonfile}", @"MyApp/dist/index.html");
    });
}

Answered By - Jörg Frantzen

Read More

How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

Issue

I have the AngularJS seed project and I've added

$locationProvider.html5Mode(true).hashPrefix('!');

to the app.js file. I want to configure IIS 7 to route all requests to

http://localhost/app/index.html

so that this works for me. How do I do this?

Update:

I've just discovered, downloaded and installed the IIS URL Rewrite module, hoping this will make it easy and obvious to achieve my goal.

Update 2:

I guess this sums up what I'm trying to achieve (taken from the AngularJS Developer documentation):

Using this mode requires URL rewriting on server side, basically you have to rewrite all your links to entry point of your application (e.g. index.html)

Update 3:

I'm still working on this and I realise I need to NOT redirect (have rules that rewrite) certain URLs such as

http://localhost/app/lib/angular/angular.js
http://localhost/app/partials/partial1.html

so anything that is in the css, js, lib or partials directories isn't redirected. Everything else will need to be redirected to app/index.html

Anyone know how to achieve this easily without having to add a rule for every single file?

Update 4:

I have 2 inbound rules defined in the IIS URL Rewrite module. The first rule is:

The second rule is:

Now when I navigate to localhost/app/view1 it loads the page, however the supporting files (the ones in the css, js, lib and partials directories) are also being rewritten to the app/index.html page - so everything is coming back as the index.html page no matter what URL is used. I guess this means my first rule, that is supposed to prevent these URLs from being processed by the second rule, isn't working.. any ideas? ...anyone? ...I feel so alone... :-(

Solution

The IIS inbound rules as shown in the question DO work. I had to clear the browser cache and add the following line in the top of my <head> section of the index.html page:

<base href="/myApplication/app/" />

This is because I have more than one application in localhost and so requests to other partials were being taken to localhost/app/view1 instead of localhost/myApplication/app/view1

Hopefully this helps someone!

Answered By - Dean

Read More

AngularJS File Upload throwing 403 Forbidden - IIS Windows Server

Issue

In my application, I am using AngularJS file upload to read excel file uploaded. In my controller I am having the upload method like below,

Upload.upload({
         url: 'upload/url',
         file: file
   }).progress(function (evt) {
      console.log("Progress");
   }).success(function (data, status, headers, config) {
      console.log("Success");
   });
 });

But this Upload.upload is failing with below message

Possibly unhandled rejection: {"data":"<html>\r\n<head><title>403 Forbidden</title></head>\r\n<body>\r\n<center><h1>403 Forbidden</h1></center>\r\n</body>\r\n</html>\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n<!-- a padding to disable MSIE and Chrome friendly error page -->\r\n","status":403,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"upload/url","file":{},"_isDigested":true,"_chunkSize":null,"headers":{"Accept":"application/json, text/plain, */*","Authorization":"Bearer <token>"},"_deferred":{"promise":{}},"cached":false},"statusText":"","xhrStatus":"complete"}

I tried validating the full access to IIS_Users for the folder where source code is available.

Help me with fixing the issue.

Solution

It was the firewall, which blocks the file upload. Post removing it able to upload files.

Answered By - useruser00

Read More

How to disable caching of single page application HTML file served through IIS?

Issue

I have a single page application (angular-js) which is served through IIS. How do I prevent caching of HTML files? The solution needs to be achieved by changing content within either index.html or the web.config, as access to IIS through a management console is not possible.

Some options I am currently investigating are:

• web.config caching profiles - http://www.iis.net/configreference/system.webserver/caching
• web.config client cache - http://www.iis.net/configreference/system.webserver/staticcontent/clientcache
• meta tags - Using <meta> tags to turn off caching in all browsers?

IIS is version 7.5 with .NET framework 4

Solution

Adding the following into web.config solution worked across Chrome, IE, Firefox, and Safari:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>

  <location path="index.html">
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="Cache-Control" value="no-cache" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
  </location>

</configuration>

This will ensure that the that Cache-Control header is set to no-cache when requesting index.html.

Answered By - Andrew

Read More

IIS response time hight every 10-15 minutes for the same simple request

Issue

We have a performance issue with an AngularJS website hosted on IIS. This issue only affects our users connected via VPN (working from home).

The problem: regularly, a page that usually takes one or two seconds to load can take over 10 seconds.

This issue first appeared to be random, but we were able to reproduce it in a test environment and found out that the problem seems to arise on a very regular basis (every 10-15 minutes).

What we did: using a tool (ThousandEyes), we send every minute the same simple GET request via 12 clients to the Test server. We can see in the IIS logs that this request is processed in less than 50ms most of the time. However, every 15 minutes or so, the same request takes more than 5 seconds to process at least for 1 client. Example below: the calls done every minutes by client #1 takes more than 5 sec at 21:12, 21:13, 21:14, then 21:28, 21:29, then 21:45:

The graph below shows the mean response times for the 12 clients (peak every 10-15 minutes):

For both the test and the production environments, this issue only affect users connected via VPN (but not all the users connected via VPN are affected at the same time).

Any idea what can cause this behavior ?

All suggestions and questions are welcome.

Notes:

• Session State. InProcess. I tried Not Enabled and State Server but we still have the same results.
• Maximum Worker Process. 1. I tried 2, no change.
• Test server usage. As far as I can tell, nothing special happen every 15 minutes on the server (no special events).
• Test server configuration: 2 Xeon proc @2.6GHz, 8 GB RAM, 20 GB disk space, Windonws 2016.
• Test server load: almost nothing beside these 12 requests every minute from the 12 test clients.

Solution

This issue cost us a lot of time. We finally found out that a VPN server was misconfigured.

Rebuilding this server was the solution.

Answered By - Sylvain Rodrigue

Read More