为什么在动态加载确实存在的文件时会出现 404?
Why do I get a 404 when dynamically loading a file that does exist?
事实上,我在尝试加载同一个文件时遇到了三个 404,但我感兴趣的出现在此处,在我的 index.html
:
中
<script>
System.import('app/main').catch(function (err) { console.error("IMPORT_ERR: " + err); });
</script>
记录的错误是:
IMPORT_ERR: Error: Error: XHR error (404 Not Found) loading http://localhost:57971/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:57971/js/zone.js:647:29)
at ZoneDelegate.invokeTask (http://localhost:57971/js/zone.js:236:37)
at Zone.runTask (http://localhost:57971/js/zone.js:136:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:57971/js/zone.js:304:33)
Error loading http://localhost:57971/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js as "@angular/platform-browser-dynamic" from http://localhost:57971/app/main.js
但问题文件确实存在:
PS C:\Dev\Angular2\Projects\Introduction\Code\src> ls TourOfHeroes2\node_modules\@angular\platform-browser-dynamic\bundles
Directory: C:\Dev\Angular2\Projects\Introduction\Code\src\TourOfHeroes2\node_modules\@angular\platform-brow
ser-dynamic\bundles
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2016/09/25 8:50 AM 4631 platform-browser-dynamic-testing.umd.js
-a---- 2016/09/25 8:50 AM 8749 platform-browser-dynamic.umd.js
-a---- 2016/09/25 8:50 AM 4703 platform-browser-dynamic.umd.min.js
文件夹 TourOfHeroes2
是网络应用程序的根目录。
事实证明,应用程序不允许请求 node_modules
文件夹[1]中的静态文件。在应用程序运行之前,我对它做了很多小改动,今天晚些时候我会在这里修改,但最重要的是 Startup
:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseDefaultFiles();
app.UseStaticFiles();
UseCustomFileServer(app, env);
}
private void UseCustomFileServer(IApplicationBuilder app, IHostingEnvironment env)
{
// this will serve up wwwroot
app.UseFileServer();
// this will serve up node_modules
var provider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules"));
var options = new FileServerOptions();
options.RequestPath = "/node_modules";
options.StaticFileOptions.FileProvider = provider;
options.EnableDirectoryBrowsing = true;
app.UseFileServer(options);
}
我认为由于一些糟糕的设计,UseStaticFiles
只能提供一个目录中的静态文件,而我们 wwwroot
需要它,所以我不得不添加 UseFileServer
对于 node_modules
文件源。
[1] .NET Core Web 应用程序默认情况下根本不允许提供任何静态文件。您必须将 Microsoft.AspNetCore.StaticFiles
包添加到 project.json
,并将这两行以正确的顺序添加到 Startup.Configure()
:
app.UseDefaultFiles();
app.UseStaticFiles();
事实上,我在尝试加载同一个文件时遇到了三个 404,但我感兴趣的出现在此处,在我的 index.html
:
<script>
System.import('app/main').catch(function (err) { console.error("IMPORT_ERR: " + err); });
</script>
记录的错误是:
IMPORT_ERR: Error: Error: XHR error (404 Not Found) loading http://localhost:57971/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:57971/js/zone.js:647:29)
at ZoneDelegate.invokeTask (http://localhost:57971/js/zone.js:236:37)
at Zone.runTask (http://localhost:57971/js/zone.js:136:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:57971/js/zone.js:304:33)
Error loading http://localhost:57971/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js as "@angular/platform-browser-dynamic" from http://localhost:57971/app/main.js
但问题文件确实存在:
PS C:\Dev\Angular2\Projects\Introduction\Code\src> ls TourOfHeroes2\node_modules\@angular\platform-browser-dynamic\bundles
Directory: C:\Dev\Angular2\Projects\Introduction\Code\src\TourOfHeroes2\node_modules\@angular\platform-brow
ser-dynamic\bundles
Mode LastWriteTime Length Name
---- ------------- ------ ----
-a---- 2016/09/25 8:50 AM 4631 platform-browser-dynamic-testing.umd.js
-a---- 2016/09/25 8:50 AM 8749 platform-browser-dynamic.umd.js
-a---- 2016/09/25 8:50 AM 4703 platform-browser-dynamic.umd.min.js
文件夹 TourOfHeroes2
是网络应用程序的根目录。
事实证明,应用程序不允许请求 node_modules
文件夹[1]中的静态文件。在应用程序运行之前,我对它做了很多小改动,今天晚些时候我会在这里修改,但最重要的是 Startup
:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
app.UseDefaultFiles();
app.UseStaticFiles();
UseCustomFileServer(app, env);
}
private void UseCustomFileServer(IApplicationBuilder app, IHostingEnvironment env)
{
// this will serve up wwwroot
app.UseFileServer();
// this will serve up node_modules
var provider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "node_modules"));
var options = new FileServerOptions();
options.RequestPath = "/node_modules";
options.StaticFileOptions.FileProvider = provider;
options.EnableDirectoryBrowsing = true;
app.UseFileServer(options);
}
我认为由于一些糟糕的设计,UseStaticFiles
只能提供一个目录中的静态文件,而我们 wwwroot
需要它,所以我不得不添加 UseFileServer
对于 node_modules
文件源。
[1] .NET Core Web 应用程序默认情况下根本不允许提供任何静态文件。您必须将 Microsoft.AspNetCore.StaticFiles
包添加到 project.json
,并将这两行以正确的顺序添加到 Startup.Configure()
:
app.UseDefaultFiles();
app.UseStaticFiles();