Angular资产的动态位置

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

本地主机：9000 /家

本地主机：9000 / ABC /家

本地主机：2000 /又/其它/位置/首页

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

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

在我的组件模板中,像这样：

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

这是我到目前为止所尝试的：

我修改了我的< base>属性所以手动抓取端口之后和“home”之前的URL部分,如下所示：

<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中使用它来提供一个新的基值：

从’@ angular / common’导入{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 build命令中指定了一条路径……是否有必要在上面的所有内容之外？我真的很想避免为每个人安装一个单独的版本,但如果这是它需要的,请告诉我.

谢谢.

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

这是一个问题之一,它在将问题放弃一周并回到它之后“正常工作”.也许存在某种缓存问题？毕竟,我曾尝试更新< base>上周,但它仍然在寻找资产的错误位置.虽然上周我尝试调试此问题时已多次清除浏览器缓存,但我不确定缓存是否确实存在问题.

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

如果您遇到此问题并有特定问题,请随时给我发消息或发表评论,我会告诉您我是如何设置的.

解决方法

这就是网址在浏览器中的工作方式.您可以使用管道更改它们.
考虑到您的注入值按预期工作,这必须起作用.它也必须在模块中的’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线程.您的实现可能有关于加载包的问题.

Angular资产的动态位置

解决方法

相关推荐