从环境变量设置Angular 2的基本路径(base href)

Question

我希望在我的Angular 2应用程序中为开发和生产设置不同的基础href。

我看到了一些类似（甚至相同）的问题的答案。

这里最好的答案很好地总结了所有这些问题的答案中重复出现的两个解决方案：

使用ng build从环境变量设置基础href

我尝试了两种方法，但每种方法都有自己的问题：

1）APP_BASE_HREF - 对于js/css文件无效。例如，当尝试请求app/someroute/1时，它将尝试从app/someroute/1而不是从app请求js和css文件。

2）在ngOnInit中修改基础href - 在调用ngOnInit时，js和css文件已经被请求，因此修改后的基础href仅适用于在初始化后请求的文件，而不适用于初始加载的文件（这对我没有帮助）。

到目前为止，唯一对我有效的方法是在每次编译后手动修改生产环境的html，但我正在尝试自动化它。

可能的解决方案：

1) 在js和css文件被请求之前更改基本href - 有没有办法做到这一点？它们基本上在页面加载时立即请求。可能添加一个在link rel之前在头部执行的脚本？

2) 使用不同的基础href值编译不同的开发和生产HTML，例如使用某种非常轻量级的html模板引擎，这不会过度消耗资源。

你认为呢？

- Royi Bernthal

Answer 1

我发现有一个命令行选项（由社区提出）可以实现这个功能——--base-href。

我的生产环境构建命令如下：

ng build --prod --base-href=/prod_dir/

- Royi Bernthal

---

问题是，在ng serve中似乎不支持--base-href，因此无法轻松测试。 :-( - not2savvy

一开始我使用它来为生产提供基础URL，因此使用ng build。为什么测试不容易呢？编译需要稍微长一点时间，但除此之外我没有看到任何问题。 - Royi Bernthal

我使用 --base-href 将语言添加到 URL 中，但目前遇到问题，因为我无法使用 ng serve 进行测试。如果您不需要这样做，那就没有问题。 - not2savvy

在这种情况下，也许可以使用环境变量来指定语言？我猜这取决于你的逻辑，我不太了解你的项目。 - Royi Bernthal

我不太明白你在提出什么。欢迎你回答我的问题。 - not2savvy

Answer 2

我使用 Gulp 4 任务来自动构建带有 Angular-cli 的应用程序。Gulp 任务将运行 cli 命令以构建应用程序，并传递适当的值以用于基础标记。我还使用此任务将文件部署到服务器（使用 gulp-rsync）。

以下是我的 gulpfile 中的一些片段：

const spawn = require('child_process').spawn;
const environment = process.env.NODE_ENV || 'staging';

if (environment === 'development') {
  console.log('No deploys performed for development environment.');
  process.exit(0);
}

gulp.task('build', gulp.series(build));

function build(done) {
  var cmd = spawn('ng', ['build', '--target=production', '--environment=' + environment, '--base-href=/app/'], {stdio: 'inherit'});
  cmd.on('close', function (code) {
    console.log('Build task exited with code: ' + code);
    done(code);
  });
}

- Sunil D.