我们有一个企业应用程序,它为客户端使用Angular 2.我们每个客户都有自己独特的网址,例如:https://our.app.com/customer-one和https://our.app.com/customer-two.目前我们可以<base href...>动态设置document.location.所以用户点击https://our.app.com/customer-two并<base href...>设置为/customer-two......完美!
问题是,如果用户是例如,https://our.app.com/customer-two/another-page并且他们刷新页面或尝试直接点击该URL,则<base href...>设置为get /customer-two/another-page并且找不到资源.
我们尝试了以下无济于事:
<!doctype html>
<html>
<head>
<script type='text/javascript'>
var base = document.location.pathname.split('/')[1];
document.write('<base href="/' + base + '" />');
</script>
...
不幸的是,我们的想法很新鲜.任何帮助都会很棒.
Zze*_*Zze 139
这里明显的答案并没有解决我的问题,可能是不同的角度版本.我能够angular cli在终端/ shell中使用以下命令实现所需的结果:
ng build --base-href /myUrl/
ng build --bh /myUrl/ 要么 ng build --prod --bh /myUrl/
这改变了<base href="/">以<base href="/myUrl/">中唯一一款内置版本这是非常适合我们环境的开发和生产之间的变化.最好的部分是没有代码库需要使用此方法更改.
index.html基础href 保留为:<base href="/">然后ng build --bh ./使用angular cli 运行以使其成为相对路径,或者将其替换为./您需要的任何内容.
如上例所示,如何从命令行执行此操作,以下是如何将其添加到angular.json配置文件中.
这将用于所有ng serving本地开发
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref": "/testurl/",
这是配置构建的特定配置,例如prod:
"configurations": {
"Prod": {
"fileReplacements": [
{
"replace": src/environments/environment.ts",
"with": src/environments/environment.prod.ts"
}
],
"baseHref": "./productionurl/",
涉及用法的官方 angular-cli文档.
sha*_*ine 52
这就是我们最终做的事情.
将其添加到index.html.它应该是该<head>部分的第一件事
<base href="/">
<script>
(function() {
window['_app_base'] = '/' + window.location.pathname.split('/')[1];
})();
</script>
然后在app.module.ts文件中,添加{ provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' }到提供程序列表,如下所示:
import { NgModule, enableProdMode, provide } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';
import { AppComponent, routing, appRoutingProviders, environment } from './';
if (environment.production) {
enableProdMode();
}
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
routing],
bootstrap: [AppComponent],
providers: [
appRoutingProviders,
{ provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
]
})
export class AppModule { }
Kri*_*nan 30
基于你的(@sharpmachine)答案,我能够进一步重构它,以便我们不必破解函数index.html.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';
import { AppComponent } from './';
import { getBaseLocation } from './shared/common-functions.util';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpModule,
],
bootstrap: [AppComponent],
providers: [
appRoutingProviders,
{
provide: APP_BASE_HREF,
useFactory: getBaseLocation
},
]
})
export class AppModule { }
并且,./shared/common-functions.util.ts包含:
export function getBaseLocation() {
let paths: string[] = location.pathname.split('/').splice(1, 1);
let basePath: string = (paths && paths[0]) || 'my-account'; // Default: my-account
return '/' + basePath;
}
Dae*_*rik 25
./在同一个域中构建多个应用程序时,我使用当前工作目录:
<base href="./">
在旁注,我.htaccess用来协助我的页面重新加载路由:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html [L]
Kar*_*ang 15
现有的简化答案由@sharpmachine.
import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';
@NgModule({
providers: [
{
provide: APP_BASE_HREF,
useValue: '/' + (window.location.pathname.split('/')[1] || '')
}
]
})
export class AppModule { }
如果要为APP_BASE_HREF opaque标记提供值,则不必在index.html中指定基本标记.
在生产环境中这对我来说很好
<base href="/" id="baseHref">
<script>
(function() {
document.getElementById('baseHref').href = '/' + window.location.pathname.split('/')[1] + "/";
})();
</script>
小智 9
在angular4中,您还可以在.angular-cli.json应用程序中配置baseHref.
在.angular-cli.json
{ ....
"apps": [
{
"name": "myapp1"
"baseHref" : "MY_APP_BASE_HREF_1"
},
{
"name": "myapp2"
"baseHref" : "MY_APP_BASE_HREF_2"
},
],
}
这会将index.html中的基本href更新为MY_APP_BASE_HREF_1
ng build --app myapp1
有一个类似的问题，实际上我最终探测了我的网络中是否存在某个文件。
probePath将是您要检查的文件的相对 URL（如果您现在位于正确的位置，则为一种标记），例如“assets/images/thisImageAlwaysExists.png”
<script type='text/javascript'>
function configExists(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
}
var probePath = '...(some file that must exist)...';
var origin = document.location.origin;
var pathSegments = document.location.pathname.split('/');
var basePath = '/'
var configFound = false;
for (var i = 0; i < pathSegments.length; i++) {
var segment = pathSegments[i];
if (segment.length > 0) {
basePath = basePath + segment + '/';
}
var fullPath = origin + basePath + probePath;
configFound = configExists(fullPath);
if (configFound) {
break;
}
}
document.write("<base href='" + (configFound ? basePath : '/') + "' />");
</script>
小智 5
如果使用的是Angular CLI 6，则可以使用angular.json中的deployUrl / baseHref选项（项目> xxx>架构师>构建>配置>生产）。这样，您可以轻松地为每个项目指定baseUrl。
通过查看内置应用程序的index.html来检查设置是否正确。
| 归档时间： |
|
| 查看次数： |
115527 次 |
| 最近记录： |