Publish ASP.Net Core App on local IIS - Content not found

Question

I created a project in Visual Studio Code using following command:

dotnet new angular --use-local-db

Thereafter I updated angular from version 8 to 10 and finished the project. I tested using

dotnet watch run

All worked fine for me and I tried to publish it on my local IIS. Sadly I will not get it run. I tried different solutions found on several pages ended up using Visual Studio to publish the project on IIS. I used the following instructions, except Code First Migration because the necessary database already exists: https://docs.microsoft.com/en-us/aspnet/web-forms/overview/deployment/visual-studio-web-deployment/deploying-to-iis#create-the-publish-profile

The problem is that if I do so, Visual Studio will create an "application" called, let's say, "myproject". When I then run "Browse..." on it I will get following errors in console:

Failed to load resource: the server responded with a status of 404 (Not Found) style. ... .css

Failed to load resource: the server responded with a status of 404 (Not Found) runtime-es2015. ... .css

Failed to load resource: the server responded with a status of 404 (Not Found) polyfills-es2015. ... .css

Failed to load resource: the server responded with a status of 404 (Not Found) main-es2015. ... .css

The mentioned folders are on the mentioned directory ('ClientApp\\dist'). Is there anything I missed to configure or set up?

Any help would be appreciated.

---

Edit after first reply:

Startup.cs

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

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ...
    app.UseHttpsRedirection();
    app.UseStaticFiles();
    ...
    app.UseRouting();
    ...
    app.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

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

---

Edit after second reply:

Here a some directories/paths. Hope the needed once are found here.

Project Structur

[Root]
    ClientApp
        src
            app
                [Angular Web App related files]
                app.module.ts
                ...
            main.js
            index.html
            styles.css
            polyfills.ts
            ...
        package.json
        angular.json
    [ASP.NET Core Web API Files]
    appsettings.json
    [Project].csproj
    Program.cs
    Startup.cs

IIS Files

wwwroot
    [Project]
        ClientApp
            dist
                index.html
                main. ... .js
                polyfills. ... .js
                runtime. ... .js
                styles. ... .css
        [ASP.NET Core Web API Files]

How I call the project in browser:

localhost/[Project]

Paths shown when I press ctrl+U and try to access the files:

Requested URL: localhost:Port/main. ... .js
Physical Path: ...\wwwroot\main. ... .js

---

New Observation:

If I modify index.html of the angular client from

 <base href="/" />

to

 <base href="/[projectname]/" />

The page is loading in Prod on IIS but it fails in development mode. Also then in Prod on IIS it uses the url localhost/api/[controller] instead of working url localhost/[projectname]/api/[controller]. Last mentioned url I can access by entering it to the browser and it returns the data.

If I then modifiy the service file for the controller from

...
return this.http.get('/api/[controller]')
...

to

...
return this.http.get('[projectname]/api/[controller]')
...

it tries to access path: localhost/[projectname]/[projectname]/api/[controller]

Any Idea what I missconfigured or where I need to change configuration so that the project works in Prod and Dev Mode?

Any help would be appreciated.

Answer 1

首先确保您的 URL 正确，按control + U并尝试单击您的 CSS 文件路径，并确保路径正确，然后从 IIS 管理器中查找允许的 MIME 类型。