Problem in Routing that must fall back to index.html in Angular 15, ASP.NET Core 6 Web API, and hosted on IIS 10 in Azure

Question

When I refresh a page like this (/category/details/1)

I got an error

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

I solved the problem by using Hash Location

{provide: LocationStrategy, useClass: HashLocationStrategy}

in providers in app.module but it made the routing link like this (#/category/details/1) and that is not accepted.

In .NET Core, I tried to implement this function in the program.cs

var app = builder.Build();

// fallback route to serve index.html for all deep links
app.Use(async (context, next) =>
        {
            await next();

            // if no response was sent back by other middleware, and the request path 
            //doesn't start with "/api",serve the index.html file
 
            if (context.Response.StatusCode == 404 && 
               !context.Request.Path.Value.StartsWith("/api"))
            {
                context.Request.Path = "/index.html";
                await next();
            }
        });

And in Angular - I created a web.config file and placed it next to index.html file in the (dist) folder and implemented

<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Routes" 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>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

and added

// in the app.module
{ provide: LocationStrategy, useClass: PathLocationStrategy },

But I still got this error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

This is the response header:

Accept-Ranges: bytes
Content-Encoding: gzip
Content-Length: 4115
Content-Type: text/html
ETag: W/"0e9ce283e83d91:0"
Server: Microsoft-IIS/10.0
Vary: Accept-Encoding
X-Powered-By: ASP.NET

Same error you can use as reference: https://stackoverflow.com/a/72309023/13336642. — samwu
– samwu, Commented May 11, 2023 at 10:02

Robin Webb · Accepted Answer · 2023-05-10 13:40:33Z

0

Could you try the following code in your Program.cs

app.UseWhen(x => x.Request.Path.Value != null && !x.Request.Path.Value.StartsWith("/api"), b =>
{
    b.Use((context, next) =>
    {
        context.Request.Path = new PathString("/index.html");
        return next();
    }).UseStaticFiles();
});

Are you also using the code middleware below:

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

.
.
.

answered May 10, 2023 at 13:40

Robin Webb

1,5311 gold badge10 silver badges16 bronze badges

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

3 Comments

Tom Adam Over a year ago

Same problem + the images from the server are not shown, This is the error from the console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Robin Webb Over a year ago

So I think your problem might be that you have deployed your Web API/Angular app to IIS as a sub application under the main website? Could you try setting your baseHref in your angular.json file to match your application name/path. Also perhaps your answer may be here? stackoverflow.com/questions/72070748/… For example localhost/myApp you would set baseHref as "production": { "baseHref": "/myApp/", "budgets": [

Tom Adam Over a year ago

this is my index.html ` <base href="/"> ` and this is my link http://localhost:4200, angula.json => "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "2mb" } there is no { "baseHref": "/myApp/", }

Collectives™ on Stack Overflow

Problem in Routing that must fall back to index.html in Angular 15, ASP.NET Core 6 Web API, and hosted on IIS 10 in Azure

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related