Angular 17升级后预渲染功能失效问题求助

问题背景 #

• Angular 16 使用 @nguniversal/builders:prerender 做预渲染时运行正常，升级到 Angular 17 后，ng update 将构建器自动替换为 @angular-devkit/build-angular:prerender。
• 执行 ng run <project-name>:prerender 时出现警告：An unhandled exception occurred: Configuration 'production' is not set in the workspace.，程序虽提示打包、资源复制、索引生成完成，但最终未生成预渲染页面。
• 尝试通过 ng update @angular/cli --name use-application-builder 切换到应用构建器并开启预渲染选项后，出现 Error: NG0908 错误，经查该错误由 polyfills.js 晚于 main.js 加载导致，但无法手动控制加载顺序。

当前 angular.json 配置 #

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "karlancer": {
            "projectType": "application",
            "schematics": {},
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/karlancer",
                        "allowedCommonJsDependencies": [
                            "rxjs-compat",
                            "rxjs",
                            "hammerjs"
                        ],
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/assets",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "src/styles.css",
                            "node_modules/bootstrap/dist/css/bootstrap.min.css"
                        ],
                        "scripts": [
                            "./node_modules/jquery/dist/jquery.js",
                            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "6mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "6kb",
                                    "maximumError": "20kb"
                                }
                            ]
                        },
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "buildTarget": "karlancer:build"
                    },
                    "configurations": {
                        "production": {
                            "buildTarget": "karlancer:build:production"
                        },
                        "development": {
                            "buildTarget": "karlancer:build:development"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "buildTarget": "karlancer:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": [
                            "src/assets",
                            "src/robots.txt"
                        ],
                        "styles": [
                            "src/styles.css"
                        ],
                        "scripts": []
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "karlancer:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "karlancer:serve:production"
                        }
                    }
                },
                "server": {
                    "builder": "@angular-devkit/build-angular:server",
                    "options": {
                        "outputPath": "dist/karlancer/server",
                        "main": "server.ts",
                        "tsConfig": "tsconfig.server.json",
                        "optimization": false,
                        "buildOptimizer": false
                    }
                },
                "serve-ssr": {
                    "builder": "@angular-devkit/build-angular:ssr-dev-server",
                    "options": {
                        "browserTarget": "karlancer:build",
                        "serverTarget": "karlancer:server"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "karlancer:build:production",
                            "serverTarget": "karlancer:server:production"
                        }
                    }
                },
                "prerender": {
                    "builder": "@angular-devkit/build-angular:prerender",
                    "options": {
                        "browserTarget": "karlancer:build:production",
                        "serverTarget": "karlancer:server:production",
                        "routes": [
                            "/"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "karlancer:build:production",
                            "serverTarget": "karlancer:server:production"
                        }
                    },
                    "defaultConfiguration": "production"
                }
            }
        }
    },
    "cli": {
        "analytics": false
    }
}

可行解决方案建议 #

方案1：修复现有预渲染配置的 production 缺失问题 #

警告的直接原因是 server 构建器未配置 production 环境，给 server 添加对应配置即可：

"server": {
    "builder": "@angular-devkit/build-angular:server",
    "options": {
        "outputPath": "dist/karlancer/server",
        "main": "server.ts",
        "tsConfig": "tsconfig.server.json",
        "optimization": false,
        "buildOptimizer": false
    },
    "configurations": {
        "production": {
            "optimization": true,
            "buildOptimizer": true,
            "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
            }]
        }
    }
}

修改后重新执行 ng run karlancer:prerender，检查是否生成预渲染页面。

方案2：解决应用构建器的 NG0908 错误 #

如果坚持使用新应用构建器，可通过以下方式处理该错误：

• 将 polyfills.ts 中的内容合并到 main.ts 顶部（Angular 17 推荐不再单独使用 polyfills 文件，直接在入口文件引入必要的 polyfill）。
• 移除 angular.json 中 build 配置里的 polyfills 字段，避免构建器单独打包 polyfills 文件。

方案3：回退到旧版构建器（临时方案） #

如果上述方案均不生效，可暂时回退到旧版构建器：

1. 安装依赖：npm install @nguniversal/builders@16
2. 将 angular.json 中的 prerender 构建器改回："builder": "@nguniversal/builders:prerender"

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