Scully.io仅预渲染根路由，其他路由无法生成静态文件求助

我们有一个已上线的Angular 14.2.12应用，尝试用Scully生成静态页面，执行步骤如下：

• 运行ng add @scullyio/init完成Scully安装
• 执行ng build和npx scully

但Scully只识别并生成了根路由（对应LandingPageComponent）的index.html，路由配置中存在的price、privacy-policy等其他路由均未被识别，也没有生成对应的静态文件。以下是相关配置，请帮忙排查问题：

src/app/app-routing.module.ts 配置 #

@NgModule({
        imports: [
                RouterModule.forRoot([
                        { 
                                path: 'price', component: PriceComponent
                        },
                        {
                                path: 'privacy-policy', component: PrivacyPolicyComponent
                        },
                        {
                                path: 'legal-questions', component: LegalQuestionsComponent
                        },
                        {
                                path: 'training', component: TrainingComponent
                        },  
                        { path: '', component: LandingPageComponent },
                        { path: '**', component: LandingPageComponent },
                        { path: '', redirectTo: './app.component', pathMatch: 'full' },
                ], {
    enableTracing: false,
    onSameUrlNavigation: 'reload',
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    relativeLinkResolution: 'legacy'
})     
        ],
        exports: [
                RouterModule
        ],
        declarations: []
})
export class AppRoutingModule { }

Scully配置文件 test/scully.test.config.ts #

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

import '@scullyio/scully-plugin-puppeteer'

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "test",
  distFolder: './dist/test',
  outDir: './dist/static',
  routes: {
  }
};

1. Angular路由配置顺序与路径错误 #

Angular路由按从上到下的顺序匹配，当前配置存在两个核心问题：

• 通配符路由位置错误：{ path: '**', component: LandingPageComponent } 虽然放在了具体路由之后，但后续的redirect路由永远不会被触发，同时可能干扰Scully的路由解析逻辑。正确的顺序应该是把通配符路由放在最后，用于处理404请求。
• redirect路径错误：redirectTo: './app.component' 不符合路由规则，redirectTo需要指定路由路径而非组件文件路径，此配置完全无效。

修改后的app-routing.module.ts：

@NgModule({
        imports: [
                RouterModule.forRoot([
                        // 具体业务路由放在最前
                        { path: 'price', component: PriceComponent },
                        { path: 'privacy-policy', component: PrivacyPolicyComponent },
                        { path: 'legal-questions', component: LegalQuestionsComponent },
                        { path: 'training', component: TrainingComponent },
                        // 根路由配置（若无需redirect可直接保留component配置）
                        { path: '', component: LandingPageComponent },
                        // 通配符路由放在最后，处理未匹配的请求
                        { path: '**', component: LandingPageComponent }
                ], {
    enableTracing: false,
    onSameUrlNavigation: 'reload',
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    relativeLinkResolution: 'legacy'
})     
        ],
        exports: [RouterModule],
        declarations: []
})
export class AppRoutingModule { }

2. Scully路由配置补充（可选但推荐） #

虽然Scully可以自动识别静态路由，但如果自动识别失效，可在配置文件中明确声明静态路由，强制Scully抓取这些路径：

修改后的scully.test.config.ts：

import { ScullyConfig } from '@scullyio/scully';
import '@scullyio/scully-plugin-puppeteer';

export const config: ScullyConfig = {
  projectRoot: "./src",
  projectName: "test",
  distFolder: './dist/test',
  outDir: './dist/static',
  routes: {
    '/price': {},
    '/privacy-policy': {},
    '/legal-questions': {},
    '/training': {}
  }
};

3. 额外验证步骤 #

• 确认ng build执行成功，dist/test目录下有完整的Angular编译产物
• 执行npx scully --showGuess查看Scully识别到的路由列表，确认目标路由是否被包含
• 查看Scully执行日志，排查是否有路由访问失败、组件加载错误等提示

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