来自环境变量的Angular 2 base href答案

【问题标题】：Angular 2 base href from environment variable来自环境变量的Angular 2 base href
【发布时间】：2017-02-25 16:34:53
【问题描述】：

我想在我的 Angular 2 应用程序中为开发和生产使用不同的基本 href。

我看到了与这个问题相似（有些相同）的问题的答案。

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

Set base href from an environment variable with ng build

我都试过了，每个都有自己的问题：

1) APP_BASE_HREF - 不适用于 js/css 文件。例如，当尝试请求 app/someroute/1 时，它会尝试从 app/someroute/1 而不是 app 请求 js 和 css 文件。

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

到目前为止，唯一对我有用的是在每次编译后手动修改用于生产的 html，但我正在尝试将其自动化。

可能的解决方案：

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

2) 使用不同的基本 href 值为开发和生产编译不同的 HTML，例如使用某种非常轻量级的 html 模板引擎，不会过大。

你怎么看？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

我发现有一个 cli 选项（社区要求）--base-href。

我只是为这样的生产而构建：

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

【讨论】：

问题是，--base-href 似乎在ng serve 中不支持，因此无法轻松测试。 :-(
首先，我使用它来为生产提供基本 url，因此 ng build。为什么不容易测试呢？编译需要稍长一些，但除此之外我没有发现问题。
我使用 --base-href 将语言添加到 url，但我目前遇到问题，因为我无法使用 ng serve 对其进行测试。如果您不需要这样做，那不是问题。
在那种情况下可能使用环境变量来指定语言？我想这取决于你的逻辑我不太了解你的项目。
我不太明白你的提议。诚邀您回答my question。

【解决方案2】：

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

以下是我的 gulpfile 中的一些 sn-ps：

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);
  });
}

【讨论】：