Dav*_*vid 7 relative-path 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>上周,但它仍然在寻找资产的错误位置.虽然上周我尝试调试此问题时已多次清除浏览器缓存,但我不确定缓存是否确实存在问题.
对不起,这个答案对将来遇到这个问题的人没什么帮助.我真的不知道是什么解决了这个问题.我最好的猜测是,下面的答案中的一个可能会指出你正确的方向.似乎无论我尝试什么,它都不是出于某种未知原因而工作.
如果您遇到此问题并有特定问题,请随时给我发消息或发表评论,我会告诉您我是如何设置的.
你只需要base href在你的index.html
<base href="./">
您可以手动执行或在构建时执行
ng build --base-href ./
除了将dist目录中的内容复制到服务器/whatever/is/your/root/目录之外，您不需要在角度方面做任何其他事情。
现在您可以使用 url 访问您的 angular 应用程序
localhost:port/whatever/is/your/root/index.html
更新
您可能还想在服务器上做更多的事情。但是，您如何做，将完全取决于您在服务器上使用的技术。
设为localhost:port/whatever/is/your/root/index.html您的默认主页。
为了使您的 Angular 应用程序的 html5 路由 url 在浏览器刷新时正常工作，您应该将所有对 url 的请求转发localhost:port/whatever/is/your/root/**到localhost:port/whatever/is/your/root/index.html. 请注意，您应该转发请求而不是发送重定向。
这就是 url 在浏览器中的工作原理。您可以用管道更改它们。考虑到您注入的值按预期工作，这必须有效。而且它必须是像'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 作为前缀。
另请检查此线程。您的实现可能存在加载捆绑包的问题。
| 归档时间： |
|
| 查看次数： |
8224 次 |
| 最近记录： |