Angular 2+ - 기본 href를 동적으로 설정합니다.
우리는 고객을 위해 Angular 2를 사용하는 엔터프라이즈 앱을 가지고 있습니다. 각고은고을유한객 URL)이 .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직접 .<base href...> 됩니다./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>
...
불행히도 우리는 아이디어가 없습니다.어떤 도움이라도 좋습니다.
여기 표시된 답변은 제 문제를 해결하지 못했습니다. 각진 버전이 다를 수 있습니다.저는 다음과 같은 일을 통해 원하는 결과를 얻을 수 있었습니다.angular cli//명령어:
ng build --base-href /myUrl/
ng build --bh /myUrl/또는ng build --prod --bh /myUrl/
이는 다음을 변경합니다.<base href="/"><base href="/myUrl/">개발과 생산 사이의 환경 변화에 완벽한 빌드 버전에서만 사용할 수 있습니다.가장 좋은 점은 이 방법을 사용하여 변경해야 하는 코드 기반이 없다는 것입니다.
To summarise, leave your
index.html base href as:
<base href="/"> then run
ng build --bh ./ with angular cli to make it a relative path, or replace the
./ with whatever you require.
업데이트:
위의 예에서 설명한 것처럼 명령행에서 명령행을 수행하는 방법은 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사용법에 관한 문서
우리가 하게 된 것은 다음과 같습니다.
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 { }
을 할 수 당의신 (@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;
}
는 현재 디렉토리를 합니다../동일한 도메인에서 여러 앱을 구축하는 경우:
<base href="./">
저는 로고사, 용합다니저는을 합니다..htaccess페이지 다시 로드 시 라우팅을 지원합니다.
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html [L]
@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 불투명 토큰에 값을 제공하는 경우 index.html에 기본 태그를 지정할 필요가 없습니다.
이 작업은 제품 환경에서 저에게 적합합니다.
<base href="/" id="baseHref">
<script>
(function() {
document.getElementById('baseHref').href = '/' + window.location.pathname.split('/')[1] + "/";
})();
</script>
angular4에서는 .angular-cli.json 앱에서 baseHref를 구성할 수도 있습니다.
.vmdk-cli.json에서
{ ....
"apps": [
{
"name": "myapp1"
"baseHref" : "MY_APP_BASE_HREF_1"
},
{
"name": "myapp2"
"baseHref" : "MY_APP_BASE_HREF_2"
},
],
}
base hrefin index.html을 MY_APP_BASE_HREF_1로 업데이트합니다.
ng build --app myapp1
Angular CLI 6을 사용하는 경우 angular.json(프로젝트 > xxx > 건축가 > 빌드 > 구성 > 프로덕션)에서 deployUrl/baseHref 옵션을 사용할 수 있습니다.이렇게 하면 프로젝트별로 baseUrl을 쉽게 지정할 수 있습니다.
빌드된 앱의 index.html을 보고 설정이 올바른지 확인합니다.
비슷한 문제가 있었습니다. 사실 저는 제 웹에 있는 파일의 존재를 조사하게 되었습니다.
probePath는 확인할 파일에 대한 상대 URL입니다(지금 올바른 위치에 있는 경우 마커의 일종). 예: '자산/이미지/이 이미지항상 존재합니다.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>
추가 기능:예: /users를 라우터의 애플리케이션 기반으로, /public을 자산 사용 기반으로 사용하려는 경우
$ ng build -prod --base-href /users --deploy-url /public
https://angular.io/api/common/APP_BASE_HREF 을 사용하여 app.html.ts 파일에서 기본 href를 동적으로 설정할 수 있습니다.
import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';
@NgModule({
providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}
포장되어 있습니다.json set flag --base-href를 상대 경로로 설정:
"script": {
"build": "ng build --base-href ./"
}
프로그램에 늦었지만 IIS에 배포하는 경우 다시 쓰기 규칙을 사용할 수 있습니다(다른 웹 서버에서도 가능하다고 확신합니다).
index.html이 요청될 때 발신 응답의 내용을 수정하고 기본 href를 동적으로 바꿀 수 있습니다.(url 다시 쓰기 모듈을 IIS에 설치해야 함)
다음 예에서는 다음과 같이 가정합니다.<base href="/angularapp/">당신의 색인에.
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<rewrite>
<outboundRules>
<rule name="Modify base href to current path">
<match filterByTags="Base" pattern="^(.*)(/angularapp/)(.*)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="true">
<add input="{REQUEST_URI}" pattern="^(.*)/index.html$"/>
</conditions>
<action type="Rewrite" value="{C:1}/" />
</rule>
</outboundRules>
</rewrite>
</system.webServer>
</configuration>
이것은 엄청난 골칫거리였습니다. #위치 전략은 주석에 나와 있는 것처럼 보이지 않습니다(오비오 수정인 것처럼 보였지만 슬프게도 그렇지 않습니다). 그래서 여기 제게 효과가 있었던 것이 있습니다.모두에게 조언해 주셔서 감사합니다!
참고 애플리케이션 경로와 관련된 php 페이지를 앱 내에서 호출하고 있습니다. 폴더가 한 수준 너무 높아서 새로 고침 시 오류가 발생했습니다.이 문제는 아래 구성의 in2 섹션에서 해결되었습니다.
web.config 파일을 만들어 /src 폴더에 넣습니다.
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name="in2" stopProcessing="true">
<match url="(.*)(.php)" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="../{R:0}" />
</rule>
<rule name="Angular Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="../myappname/" />
</rule>
</rules>
</rewrite>
</system.webServer>
myappname.html 파일을 생성하여 /src 폴더에 넣습니다. 자산 아래의 Angular.json 빌드 섹션에 둘 다 추가합니다.
"assets":{ ["projects/myapp/src/myappname.html","projects/toolbar2/src/web.config"
]
index.html에서
<script type='text/javascript'>
function configExists(url) {
var req = new XMLHttpRequest();
req.open('GET', url, false);
req.send();
return req.status==200;
}
var probePath = 'myappname.html';
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 : '/') + "' />");
솔직히 말해서, 당신의 사건은 저에게 잘 맞습니다!
Angular 5를 사용하고 있습니다.
<script type='text/javascript'>
var base = window.location.href.substring(0, window.location.href.toLowerCase().indexOf('index.aspx'))
document.write('<base href="' + base + '" />');
</script>
방금 바꿨어요.
<base href="/">
대상:
<base href="/something.html/">
/로 끝나는 것을 잊지 마세요.
언급URL : https://stackoverflow.com/questions/38112891/angular-2-set-base-href-dynamically
'source' 카테고리의 다른 글
| Bash에서 평가를 피해야 하는 이유는 무엇이고, 대신 무엇을 사용해야 합니까? (0) | 2023.04.27 |
|---|---|
| 아키텍처 암64에 대한 정의되지 않은 기호 (0) | 2023.04.27 |
| xlrd 및 xlwt로 기존 Excel 워크북 및 시트 편집 (0) | 2023.04.27 |
| Linkq 목록에서 존재하는 개체 선택(A,B,C) (0) | 2023.04.27 |
| 빠른 출발방법으로? (0) | 2023.04.27 |