Angular子目录部署时Scully预渲染handleUnknownRoute报错解决

该报错的核心原因是Scully预渲染阶段启动的本地静态服务默认以根路径/为资源根目录，无法自动识别Angular构建时传入的--base-href子路径配置。所有带/mysubfolder/前缀的js、css等静态资源请求会被误判定为前端业务路由，触发未知路由处理逻辑抛出404，最终阻塞预渲染流程。
根目录部署场景下base-href默认值为/，和Scully默认服务路径匹配，因此不会触发该问题。

方案1：同步配置Scully子路径映射（生产推荐） #

在Scully侧配置与Angular构建完全一致的base-href规则，保证预渲染环境与生产部署环境路径一致，无需后续额外修改产物。

• 修改项目根目录下scully.<你的Angular项目名>.config.ts配置文件，补充路径相关配置：

import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "替换为实际Angular项目名",
  // 与ng build参数保持完全一致的base-href值
  baseHref: '/mysubfolder/',
  // 显式指定Angular构建产物存放路径
  distFolder: './dist/替换为实际Angular项目名',
  // 本地预渲染服务端口，可按需调整
  port: 1668,
  routes: {}
};

• 调整构建与预渲染命令，执行时显式传入路径参数，避免自动识别失效：

# 执行带子路径参数的Angular生产构建
ng build --base-href='/mysubfolder/'
# 执行Scully预渲染，显式指定资源根目录与base-href
npx scully -- --base-href=/mysubfolder/ --hostFolder=./dist/替换为实际Angular项目名

• 若控制台仍存在静态资源相关404警告，添加自定义路由插件跳过静态资源的路由解析逻辑，在上述Scully配置文件中补充以下代码：

import { registerPlugin, HandledRoute } from '@scullyio/scully';

// 注册插件：所有带静态资源后缀的请求直接跳过路由解析
registerPlugin('router', 'skipStaticAssets', async (route: HandledRoute) => {
  if (route.route.match(/\.(js|css|png|jpg|svg|ico|woff2?|ttf|map)$/)) {
    return [];
  }
  return [route];
});

// 在原有config配置中补充路由规则
export const config: ScullyConfig = {
  // 保留此前所有配置
  routes: {
    '/*': {
      type: 'skipStaticAssets'
    }
  }
};

重新执行预渲染命令即可正常生成产物。

方案2：预渲染后批量替换base标签（快速兼容方案） #

若不想调整Scully配置，可先在根路径模式下完成预渲染，再批量修改html文件的base路径适配子目录部署：

• 执行不带base-href参数的构建与预渲染命令，保证流程正常执行：

ng build --prod
npx scully --

• 预渲染完成后，产物默认存放在dist/static目录下，批量替换该目录下所有html文件中的<base href="/">标签为<base href="/mysubfolder/">。
• 将dist/static目录下的所有内容上传到生产环境的mysubfolder部署目录即可正常访问。

配置完成后重新执行预渲染流程，控制台不再输出js/css等静态资源对应的handleUnknownRoute404警告，命令正常执行退出，dist/static目录下生成对应页面的html文件即为配置生效。

内容的提问来源于stack exchange，提问作者socialsnobbish