Angular universal build baseHref change打破应用程序中的angular路由

Angular Universal是Angular框架提供的一种服务器端渲染解决方案。它允许在服务器上预先渲染应用程序的初始页面，以提供更好的性能和搜索引擎优化。

在Angular应用程序中，使用Angular Universal进行服务器端渲染时，可能需要在构建过程中修改baseHref。baseHref是指在浏览器中加载应用程序时用于解析相对URL的基本URL路径。

为了打破应用程序中的Angular路由，即更改baseHref，可以按照以下步骤进行：

打开Angular项目的根目录，在命令行中执行以下命令，安装@angular-builders/custom-webpack和html-webpack-plugin：

npm install --save-dev @angular-builders/custom-webpack html-webpack-plugin

在项目根目录下创建一个webpack.config.js文件，并将以下代码添加到该文件中：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      baseHref: '/your-base-href/' // 设置你想要的baseHref路径
    })
  ]
};

上述配置中的/your-base-href/应替换为你想要设置的新的baseHref路径。

在angular.json文件中找到并修改build配置项的builder属性，将其更改为@angular-builders/custom-webpack:browser，并在options中添加customWebpackConfig属性指向刚才创建的webpack.config.js文件，如下所示：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    ...
  },
  ...
}