当文件位于 wwwroot 之外时，找不到静态文件/将其提供给 SPA答案

【问题标题】：Static files are not found/served to a SPA when files are outside the wwwroot当文件位于 wwwroot 之外时，找不到静态文件/将其提供给 SPA
【发布时间】：2016-07-09 17:15:14
【问题描述】：

我创建了一个包含多个区域的 asp.net core 1.0 网站项目。

在应用程序区域的 HomeController 我有这个动作：

public IActionResult Index()
{
    string content = System.IO.File.ReadAllText("./Areas/Application/App/Index.html");
    return base.Content(content, new MediaTypeHeaderValue("text/html"));
}

当返回 html 文件时，我的浏览器中出现了许多来自未找到的 javascript 库文件的 404 错误。

index.html 及其所有 .js 文件是 asp.net 核心网站区域内的 SPA。

此 SPA 已构建 + 部署到 websiteproject/areas/application/App 文件夹。

当我构建 + 部署 SPA 到 wwwroot 文件夹时，所有静态文件都找到了。

我猜这意味着静态文件路径总是相对于 wwwroot 以使 SPA 工作。

问题一：有没有办法通过 WebHostBuilder 类将 wwwroot 文件夹配置为 wwwroot/app 路径：

 .UseWebRoot("./wwwroot/app")

只是和明确用于应用领域？

这意味着网站的 wwwroot 应该继续工作？

我能做到的最好的事情是一个带有 2 个子文件夹的 wwwroot 文件夹：

网站
应用程序

我想为默认“区域”和显式应用区域配置 2 个 wwwroot 路径网站和应用程序。

问题 2：我该怎么做？

更新 1

根据 Pawel 的评论我改变了：

   app.UseStaticFiles();

到：

app.UseStaticFiles();
app.UseStaticFiles(new StaticFileOptions()
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "Areas","Application", "App")),
    RequestPath = new PathString("/Application")
});

但是对于 .js 文件，我仍然得到相同的 404 错误，就好像它们在 wwwroot 目录中不可用一样？？？

404 在单页应用请求的开发者控制台工具中：

http://localhost:52159/vendor/reflect-metadata/Reflect.js (404)

200 在浏览器url栏中手动输入：

http://localhost:52159/Application/vendor/reflect-metadata/Reflect.js

这是否意味着在 asp.net 核心中提供的静态文件可以正常工作，但还有其他东西不能以某种方式工作？我想我不应该在 SPA 中更改一些愚蠢的东西......

我添加了我的文件结构的屏幕截图，你们可以更好地理解我的问题或者找到我的用户错误...：

【问题讨论】：

你读过这个吗：docs.asp.net/en/latest/fundamentals/static-files.html？
Pawel 我更新了我的问题，对你发表了评论！
好的，我发现了问题。它是我的 Angular 2 应用程序和 index.html。在构建期间，路径 vendor/angular2.js 对调试应用程序是正确的。但是当我启动 asp.net 网站时，由于 Startup.cs 中的静态文件路径发生变化，供应商的路径需要 Application/vendor 无处不在。甚至当我更改了 index.html 中的所有路径时，它也确实到了每个无法找到的 component.ts 文件。似乎我必须创建一个新的 system.js 模块加载器问题，关于在每个组件之前加载其模块时添加“应用程序”等...

标签： angular asp.net-core asp.net-mvc-areas

【解决方案1】：

现在我找到了一个必须应用更改的解决方案。

system.config.ts

System.config({
  map: {
    '@angular': 'Application/vendor/@angular',
    'rxjs': 'Application/vendor/rxjs',
    'main': 'Application/main.js',
    'app': 'Application/app',
  },
  packages: cliSystemConfigPackages
});

这样，所有 angular 2/rxjs 文件都从目录路径提供：

输入url“/Application”时的“Area/Application/App”。

我还必须在主桶和根桶“app”前面添加“应用程序”。

index.html

<body>
  <app-root>Loading...</app-root>

    {{#each scripts.polyfills}}
    <script src="Application/{{.}}"></script>
    {{/each}}
    <script>
      System.import('Application/system-config.js').then(function () {
        System.import('Application/main.js');
      }).catch(console.error.bind(console));
    </script>
</body>
</html>

这些是 index.html 文件中的更改。

现在我的 Asp.net 核心区域“应用程序”有自己的“wwwroot”，与公共网站的 wwwroot 分开。

【讨论】：