Angular 15升级至16后执行npm run start报资源路径错误

问题场景 #

将Angular应用从v15升级至v16，执行npm run ng update完成升级并运行npm install后，执行npm run start启动项目时触发错误：

An unhandled exception occurred: An asset cannot be written to a location outside of the output path.

详细错误日志：

C:\**redacted for confidentiality**\node_modules\rxjs\dist\cjs\internal\util\reportUnhandledError.js:13
            throw err;
            ^

Error: An asset cannot be written to a location outside of the output path.
    at C:\***redacted for confidentiality***\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:87:19
    at Array.map (<anonymous>)
    at normalizeAssetPatterns (C:\***redacted for confidentiality***\node_modules\@angular-devkit\build-angular\src\utils\normalize-asset-patterns.js:50:26)
    at normalizeBrowserSchema (C:\**redacted for confidentiality**\node_modules\@angular-devkit\build-angular\src\utils\normalize-builder-schema.js:22:71)
    at generateBrowserWebpackConfigFromContext (C:\***redacted for confidentiality***\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:116:66)
    at async generateI18nBrowserWebpackConfigFromContext (C:\***redacted for confidentiality***\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:67:20)
    at async setup (C:\***redacted for confidentiality***\node_modules\@angular-devkit\build-angular\src\builders\dev-server\webpack-server.js:96:34)

Node.js v18.17.1

环境信息：

• NodeJS 18.17.1
• Windows 10

排查与解决步骤 #

1. 检查angular.json资产配置 #

错误核心是资产输出路径违反了Angular 16的新限制，重点核对angular.json中projects -> 你的项目名 -> architect -> build -> options -> assets数组：

• 禁止使用绝对路径或上级目录（如../开头）作为output值，必须是相对于项目默认输出目录（通常为dist/项目名）的相对路径
• 错误配置示例：

  "assets": [
    {
      "glob": "**/*",
      "input": "src/assets",
      "output": "../assets" // 输出到上级目录，超出允许范围
    }
  ]
  

• 修正为合规配置：

  "assets": [
    {
      "glob": "**/*",
      "input": "src/assets",
      "output": "assets/" // 相对于输出目录的合法路径
    }
  ]
  

2. 排查自定义Webpack配置（如有） #

若项目使用了自定义Webpack配置文件，确认其中是否有修改资产输出路径的逻辑，确保所有资产输出都被限制在Angular默认的输出目录范围内。

3. 清理缓存并重装依赖 #

• 删除node_modules目录和package-lock.json文件
• 执行npm install重新安装依赖
• 手动删除dist目录或执行npm run clean（若项目有该脚本）
• 再次运行npm run start尝试启动

4. 确保升级完全 #

执行完整的Angular升级命令，避免部分依赖未更新导致的兼容性问题：

ng update @angular/core@16 @angular/cli@16

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