为什么 Angular 项目中的 javascript 文件没有被识别为 javascript？答案

【问题标题】：Why are javascript files from angular project not being identified as javascript?为什么 Angular 项目中的 javascript 文件没有被识别为 javascript？
【发布时间】：2019-12-12 21:23:47
【问题描述】：

我一直在努力将 Angular 7 项目集成到 ASP.NET Core MVC 项目中，但最近遇到了一个问题。在测试解决方案时，我遇到了一个问题，Edge 给出了 HTTP 404 错误。在 Firefox 上进行测试时，Javascript 控制台发出警告消息，内容为 Javascript files are being identified as HTML files。我采取的唯一措施是构建 Angular 项目，将 Angular 项目复制到 ASP.NET Core 项目的子文件夹中，然后将构建的文件添加到 razor 文件中。剃须刀文件：

@{
    ViewData["Title"] = "Home Page";
}

<h1>This is the Index page</h1>
@section Scripts{
    <script src="~/ClientApp/dist/frontend/runtime.js"></script>
    <script src="~/ClientApp/dist/frontend/polyfills.js"></script>
    <script src="~/ClientApp/dist/frontend/styles.js"></script>
    <script src="~/ClientApp/dist/frontend/vendor.js"></script>
    <script src="~/ClientApp/dist/frontend/main.js"></script>
}

谁能解释我哪里出错了？

【问题讨论】：

你把它们放到 wwwroot 文件夹了吗？
为什么不在visual studio中使用内置的Angular和ASP.Net Core模板？
@TonyNgo ASP.NET Core 的 Angular 模板（截至撰写时）不包括 Angular 7 或 8，我目前使用的是 Angular 7。模板主要使用 Angular 6。另外，我是想要在剃须刀页面中使用 Angular，模板没有明确说明。

标签： angular asp.net-core angular7

【解决方案1】：

也许你需要像这样在你的 web.config 上write rules：

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="angular-application" stopProcessing="true">
          <match url="angular-application/(.*)" />
          <action type="Rewrite" url="ClientApp/dist/frontend/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
<configuration>

然后像这样导入：

@section Scripts{
    <script src="angular-application/runtime.js"></script>
    <script src="angular-application/polyfills.js"></script>
    <script src="angular-application/styles.js"></script>
    <script src="angular-application/vendor.js"></script>
    <script src="angular-application/main.js"></script>
}

【讨论】：

@Boolean asp.net 核心确实使用 webconfig。当您将 Web 应用程序部署到服务器时，它只是使用默认的 webconfig。因此，要从主机覆盖 webconfig，您可以创建自己的 webconfig

【解决方案2】：

如果你想访问wwwroot之外的文件夹，假设ClientApp文件夹，你需要在启动时配置app.UseStaticFiles()：

public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles(); // For the wwwroot folder

app.UseFileServer(new FileServerOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(Directory.GetCurrentDirectory(), "ClientApp")),
    RequestPath = "/ClientApp",
    EnableDirectoryBrowsing = true
});
}

参考https://docs.microsoft.com/en-us/aspnet/core/fundamentals/static-files?view=aspnetcore-2.2#usefileserver

【讨论】：