微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Angular 和 ASP.NET Core MVC：部署时索引文件引用的“Uncaught SyntaxError: Unexpected token '<'”

分类：编程问答

如何解决Angular 和 ASP.NET Core MVC：部署时索引文件引用的“Uncaught SyntaxError: Unexpected token '<'”

我有一个使用 ASP.NET Core MVC 和 Angular UI 框架的应用程序。

我可以在 IIS Express 开发环境中运行该应用程序而不会出现问题。当我切换到 IIS Express 生产环境或部署到 IIS 主机时，无法读取我的索引引用文件，显示浏览器错误：

未捕获的语法错误：意外标记“

这些页面看起来像是在加载索引页面，而不是 .js 或 .css 文件。

enter image description here

这是底层 runtime.js 的片段，因为它应该加载到浏览器中，而不是加载 index.html。

/******/ (function(modules) { // webpackBootstrap
/******/    // install a JSONP callback for chunk loading
/******/    function webpackJsonpCallback(data) {
/******/        var chunkIds = data[0];
/******/        var moreModules = data[1];
/******/        var executeModules = data[2];
/******/
/******/        // add "moreModules" to the modules object,/******/        // then flag all "chunkIds" as loaded and fire callback
/******/        var moduleId,chunkId,i = 0,resolves = [];
/******/        for(;i < chunkIds.length; i++) {
/******/            chunkId = chunkIds[i];
/******/            if(Object.prototype.hasOwnProperty.call(installedChunks,chunkId) && installedChunks[chunkId]) {
/******/                resolves.push(installedChunks[chunkId][0]);
/******/            }

根据我的理解，这应该是命名或路径错误，但我可以在浏览器中访问索引文件，这些文件都在同一个文件夹中，并且没有文件名散列。我注意到一些文件夹结构似乎被排除在 .csproj 之外，但这似乎不会影响文件本身。

enter image description here

我认为这与 startup.cs、.csproj 指令或 IIS 配置有关，但没有更具体的错误，我看不出哪里出了问题。

Program.cs：

using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SNAP
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

Startup.cs：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SNAP.Data;

namespace SNAP
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
            AppData.configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllers();


            services.AddControllersWithViews();
            // In production,the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "SNAP-UI/dist/SNAP-UI";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app,IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();


            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",pattern: "{controller}/{action=Index}/{id?}");
            });

        
            //Cannot recognize environment?
            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,// see https://go.microsoft.com/fwlink/?linkid=864501

                spa.Options.sourcePath = "SNAP-UI";

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

.csproj：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsversion>Latest</TypeScriptToolsversion>
    <IsPackable>false</IsPackable>
    <SpaRoot>SNAP-UI\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>

    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
  </PropertyGroup>

  <ItemGroup>
    <packagereference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.5" />
    <packagereference Include="Microsoft.EntityFrameworkCore.Design" Version="5.0.5">
      <PrivateAssets>all</PrivateAssets>
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
    </packagereference>
    <packagereference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="5.0.2" />
    <packagereference Include="nb.Core" Version="6.2.3" />
    <packagereference Include="nb.Data" Version="4.3.0" />
    <packagereference Include="System.Linq.Dynamic.Core" Version="1.0.19" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files,but do show them in the project files list -->
    <Compile Remove="SNAP-UI\**" />
    <Compile Remove="SNAPUI\**" />
    <Content Remove="$(SpaRoot)**" />
    <Content Remove="SNAP-UI\**" />
    <Content Remove="SNAPUI\**" />
    <EmbeddedResource Remove="SNAP-UI\**" />
    <EmbeddedResource Remove="SNAPUI\**" />
    <None Remove="$(SpaRoot)**" />
    <None Remove="SNAP-UI\**" />
    <None Remove="SNAPUI\**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <ItemGroup>
    <None Remove="SNAP-UI\browserslist" />
    <None Remove="SNAP-UI\e2e\protractor.conf.js" />
    <None Remove="SNAP-UI\e2e\src\app.e2e-spec.ts" />
    <None Remove="SNAP-UI\e2e\src\app.po.ts" />
    <None Remove="SNAP-UI\e2e\tsconfig.e2e.json" />
    <None Remove="SNAP-UI\src\app\angular-material.module.ts" />
    <None Remove="SNAP-UI\src\app\app.server.module.ts" />
    <None Remove="SNAP-UI\src\app\core\base.service.ts" />
    <None Remove="SNAP-UI\src\app\core\deal.service.ts" />
    <None Remove="SNAP-UI\src\app\counter\counter.component.html" />
    <None Remove="SNAP-UI\src\app\counter\counter.component.spec.ts" />
    <None Remove="SNAP-UI\src\app\counter\counter.component.ts" />
    <None Remove="SNAP-UI\src\app\deals\Deal.ts" />
    <None Remove="SNAP-UI\src\app\deals\dealcalendar.component.ts" />
    <None Remove="SNAP-UI\src\app\fetch-data\fetch-data.component.html" />
    <None Remove="SNAP-UI\src\app\fetch-data\fetch-data.component.ts" />
    <None Remove="SNAP-UI\src\app\home\home.component.html" />
    <None Remove="SNAP-UI\src\app\home\home.component.ts" />
    <None Remove="SNAP-UI\src\app\kendo_ui.module.ts" />
    <None Remove="SNAP-UI\src\app\nav-menu\nav-menu.component.ts" />
    <None Remove="SNAP-UI\src\karma.conf.js" />
    <None Remove="SNAP-UI\src\tsconfig.app.json" />
    <None Remove="SNAP-UI\src\tsconfig.server.json" />
    <None Remove="SNAP-UI\src\tsconfig.spec.json" />
    <None Remove="SNAP-UI\src\tslint.json" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\SNAP.Data\SNAP.Data.csproj" />
    <ProjectReference Include="..\SNAP.Domain\SNAP.Domain.csproj" />
  </ItemGroup>

  <ItemGroup>
    <TypeScriptCompile Include="SNAP-UI\src\app\angular-material.module.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\core\base.service.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\core\deal.service.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\deals\deal.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\deals\dealcalendar.component.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\kendo_ui.module.ts" />
    <TypeScriptCompile Include="SNAP-UI\src\app\nav-menu\nav-menu.component.ts" />
  </ItemGroup>

  <Target Name="DebugEnsurenodeenv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue,please install Node.js from https://nodejs.org/,and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing,ensure the JS resources are freshly built in production mode -->
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build --prod --ec=false --oh=media" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr --prod --ec=false --oh=media" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <distFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <distFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
      <ResolvedFiletoPublish Include="@(distFiles->'%(FullPath)')" Exclude="@(ResolvedFiletoPublish)">
        <RelativePath>%(distFiles.Identity)</RelativePath>
        <copyToPublishDirectory>PreserveNewest</copyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFiletoPublish>
    </ItemGroup>
  </Target>

</Project>

更新 1：

经过进一步的 IIS 调查，似乎该页面正在为单页应用程序进行一些 304 重定向。这发生在 IIS Express（生产模式）和 IIS 主机上。服务器还为非索引组件提供文本/HTML。我在主项目中没有 web 配置，但它是在发布时生成的。我已将已发布的 web.config 更新为仅指向索引页面。这并没有解决问题。

web.config：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processpath="dotnet" arguments=".\SNAP.dll" stdoutLogEnabled="true" stdoutLogFile="C:\source\TempLog\" hostingModel="inprocess">
        <handlerSettings>
          <handlerSetting name="debugFile" value="C:\source\TempLog\tempDebug.log" />
          <handlerSetting name="debugLevel" value="FILE,TRACE" />
        </handlerSettings>
      </aspNetCore>
    </system.webServer>
  </location>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="AddTrailingSlashRule1" stopProcessing="true">
                    <match url="(.*[^/])$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    </conditions>
                    <action type="Redirect" url="{R:1}/" />
                </rule>
                <rule name="SPA Routes" stopProcessing="true">
                    <!-- match everything by default -->
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <!-- unless its a file -->
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <!-- or a directory -->
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <!-- or is under the /api directory -->
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                        <!-- list other routes or route prefixes here if you need to handle them server side -->
                    </conditions>
                    <!-- rewrite it to /index.html -->
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
        <tracing>
            <traceFailedRequests>
                <add path="*">
                    <traceAreas>
                        <add provider="ASP" verbosity="Verbose" />
                        <add provider="ASPNET" areas="Infrastructure,Module,Page,AppServices" verbosity="Verbose" />
                        <add provider="ISAPI Extension" verbosity="Verbose" />
                        <add provider="WWW Server" areas="Authentication,Security,Filter,StaticFile,CGI,Compression,Cache,RequestNotifications,FastCGI,WebSocket,ANCM,Rewrite" verbosity="Verbose" />
                    </traceAreas>
                    <failureDeFinitions statusCodes="200-600" />
                </add>
            </traceFailedRequests>
        </tracing>
    </system.webServer>
</configuration>
<!--ProjectGuid: d1eca6b3-ff92-4130-9f13-9b13719c7794-->

更新 2：

经过进一步调查，我注意到 Program.cs 中有 2 个有趣的点。在 IIS Express 上以生产模式运行时，在浏览器中刷新应用程序之前，应用程序似乎不会访问服务器端。 CreateHostBuilder 似乎也挂在 IIS Express 生产模式下。我使用断点确认该应用程序似乎完全完成了 startup.cs（来自 program.cs 的唯一调用）。如果我尝试将断点移过 CreateHostBuilder，我会收到此错误。

无法设置下一条语句。该线程调用了一个无法显示的函数。

Program.cs

namespace SNAP
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
            Console.WriteLine("Build Complete");
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

解决方法

所以，就我而言，当我使用 SPA 创建项目时。我使用下一个配置。

https://github.com/tematre/Site/blob/master/TemaTre.Site.Resume/Startup.cs

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseDefaultFiles()
           .UseStaticFiles()
           .UseDirectoryBrowser();

        app.UseForwardedHeaders(new ForwardedHeadersOptions
        {
            ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
        });

所以，您没有UseDirectoryBrowser()，让我们试试吧，也许对您有帮助。

另外一条评论：.UseStaticFiles() 提供来自 wwwroot 的文件，但它可以更改。 （从屏幕截图中我看到您的文件存储在 'distrib' 文件夹中）

其他选项是使用UseSpaStaticFiles()或UseSpa()

  • UseSpaStaticFiles - 在资产中提供静态文件，如图像、css、js angular 应用文件夹

  • UseSpa - 让 asp.net core 知道你想运行哪个目录 angular 应用程序，在生产模式下运行时的 dist 文件夹和 在开发模式下运行 angular 应用程序的命令

有使用这种方法的例子：

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

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,// see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

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

也许你失踪了

     app.UseStaticFiles();
        if (!env.IsDevelopment())
        {
            app.UseSpaStaticFiles();
        }

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot