Question

我的应用程序将在多台计算机上使用，并且每次都可能位于不同的位置。例如，归属路线可以位于以下任何位置：

本地主机：9000 /家

本地主机：9000 / ABC /家

本地主机：2000 /又/另一个/位置/家

所以我想确保我的应用无论在哪里找到它的资产都能运作。我的所有路径都是相对的，所以希望这是朝着正确方向迈出的一步，如下：

<link rel="stylesheet" href="assets/global-styles.css">

在我的组件模板中，如下所示：

<img src="assets/components/dashboard/images/foo.png" />

这是我迄今为止所做的尝试：

我已经修改了我的<base>属性，因此请在端口之后和之后手动抓取部分网址＆＃34; home＆＃34;像这样：

<html>
    <head>
    <script>
        // manually sets the <base> tag's href attribute so the app can be located in places other than root
        var split = location.pathname.split('/');
        var base = "";
        for (var i = 0; i < split.length - 1; i++) {
            base += split[i];
            if (i < split.length - 2) {
                base += "/";
            }
        }
        window['_app_base'] = base;
        document.write("<base href='" + base + "' />");
    </script>
        ....

到目前为止，如果用户在localhost：9000 / hello / home加载主页，那么<base>标记将如下所示：

<base href='/hello' />

该代码还将变量设置为相同的值，然后我在app.module.ts中使用它来提供新的基值：

从＆＃39; @ angular / common＆＃39;中导入{APP_BASE_HREF};

@NgModule({
    declarations: [...],
    imports: [...],
    providers: [
        ...,
        { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }
    ]
});

然而，尽管如此，该应用程序仍然在资产文件夹中查找资产，它认为该文件仍位于根位置。

GET http://localhost:9000/assets/ionic-styles.css net::ERR_ABORTED
GET http://localhost:9000/inline.bundle.js net::ERR_ABORTED
GET http://localhost:9000/assets/font-awesome-4.6.3/css/font-awesome.min.css net::ERR_ABORTED
GET http://localhost:9000/assets/bootstrap.min.css net::ERR_ABORTED
GET http://localhost:9000/assets/global-styles.css net::ERR_ABORTED
GET http://localhost:9000/polyfills.bundle.js net::ERR_ABORTED
GET http://localhost:9000/styles.bundle.js net::ERR_ABORTED
GET http://localhost:9000/vendor.bundle.js net::ERR_ABORTED

我错过了什么？我也看到人们采取的方法，他们在他们的ng构建命令中指定一个路径......是否有必要在上面的一切之上？我真的很想避免为每个人安装单独的版本，但如果需要，请告诉我。

感谢。

更新： 经过几天的沮丧之后，我的应用程序正在使用上面问题中显示的代码。事实证明，我只需要在<script>中使用<head>来修改<base>。无需在ngModule提供程序中添加APP_BASE_HREF。但是，添加APP_BASE_HREF并不会破坏任何内容......

这是其中的一个问题，它只是起作用了＃34;把问题丢了一个星期然后又回来了。也许存在某种缓存问题？毕竟，上周我曾尝试更新<base>，但它仍然在寻找资产的错误位置。虽然上周我尝试调试此问题时多次清除浏览器缓存，但我不确定缓存是否真的是问题所在。

对不起，这个答案对将来遇到这个问题的人没什么帮助。我真的不知道是什么解决了这个问题。我最好的猜测是，下面的答案中的一个可能会指出你正确的方向。似乎无论我尝试什么，它都不是因为某种未知原因而工作。

如果您遇到此问题并有特定问题，请随时给我留言或发表评论，然后我会告诉您我是如何设置的。

Answer 1

这就是网址在浏览器中的工作方式。您可以使用管道更改它们。考虑到您的注入值按预期工作，这必须起作用。它也必须在模块中的'APP_BASE_HREF'之类的字符串中。

 @Pipe({
  name: 'assetspipe'
})
export class AssetspipePipe implements PipeTransform {
      baseUrl: string;
      constructor(@Inject('APP_BASE_HREF') baseHref: string) {
        this.baseUrl = baseHref;
      } 

      transform(value: string) {
        const newval = this.baseUrl + value;
           return newval;
      } 

}

然后在你的组件中：

<img src="{{'assets/components/dashboard/images/foo.png' | assetspipe}}"/>

管道应该添加baseurl作为前缀。

同时检查this个帖子。您的实现可能有关于加载包的问题。

Answer 2

您只需在base href

中制作以下index.html即可

<base href="./">

您可以手动执行，也可以在构建

时执行此操作

ng build --base-href ./

除了将内容从dist目录复制到服务器的/whatever/is/your/root/目录外，您不需要在角度方面做任何其他事情。

现在，您可以使用网址

访问角度应用

localhost:port/whatever/is/your/root/index.html

<强>更新

您可能希望在服务器上执行更多操作。但是，你如何做，将完全取决于你在服务器上使用的技术。

将localhost:port/whatever/is/your/root/index.html设为默认主页。
要使您的角度应用的html5路线网址在浏览器刷新时正常运行，您应该将所有请求转发至网址localhost:port/whatever/is/your/root/**至localhost:port/whatever/is/your/root/index.html。 请注意，您应该转发请求，而不是发送重定向。

Angular

2 个答案: