base href in angular: change base-href in runtime?
I have 1 angular application with a base-href set to /a/b/.
So, in my dist folder, there is a html file with <base href="/a/b/">.
This way, the browser can resolve that a image link to assets/images/logo.png is in fact located on domain.com/a/b/assets/images/logo.png.
So my application runs on domain.com/a/b/index.html.
Problem:
Now I would also like to run the same application on domain.com/a/b/c/index.html. So besides the previous.
Also here assets/images/logo.png is located on domain.com/a/b/c/assets/images/logo.png. (watch the /c/ there).
I can get this to work, although, I really would like to build my application once and publish it once. And then deploy it twice (/a/b/ and /a/b/c/).
So in fact my question is, can I configure this base-href after deploying it in the given folders on my apache server? Is there a run-time option? Can it infer it's base-path from the directory the files are in?
Or, is there a command to change the value in index.html?
angular apache
asked Nov 12 '18 at 16:14
codesmith
384420
add a comment |
I have 1 angular application with a base-href set to /a/b/.
So, in my dist folder, there is a html file with <base href="/a/b/">.
This way, the browser can resolve that a image link to assets/images/logo.png is in fact located on domain.com/a/b/assets/images/logo.png.
So my application runs on domain.com/a/b/index.html.
Problem:
Now I would also like to run the same application on domain.com/a/b/c/index.html. So besides the previous.
Also here assets/images/logo.png is located on domain.com/a/b/c/assets/images/logo.png. (watch the /c/ there).
I can get this to work, although, I really would like to build my application once and publish it once. And then deploy it twice (/a/b/ and /a/b/c/).
So in fact my question is, can I configure this base-href after deploying it in the given folders on my apache server? Is there a run-time option? Can it infer it's base-path from the directory the files are in?
Or, is there a command to change the value in index.html?
angular apache
asked Nov 12 '18 at 16:14
codesmith
384420
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38
add a comment |
I have 1 angular application with a base-href set to /a/b/.
So, in my dist folder, there is a html file with <base href="/a/b/">.
This way, the browser can resolve that a image link to assets/images/logo.png is in fact located on domain.com/a/b/assets/images/logo.png.
So my application runs on domain.com/a/b/index.html.
Problem:
Now I would also like to run the same application on domain.com/a/b/c/index.html. So besides the previous.
Also here assets/images/logo.png is located on domain.com/a/b/c/assets/images/logo.png. (watch the /c/ there).
I can get this to work, although, I really would like to build my application once and publish it once. And then deploy it twice (/a/b/ and /a/b/c/).
So in fact my question is, can I configure this base-href after deploying it in the given folders on my apache server? Is there a run-time option? Can it infer it's base-path from the directory the files are in?
Or, is there a command to change the value in index.html?
angular apache
asked Nov 12 '18 at 16:14
codesmith
384420
I have 1 angular application with a base-href set to /a/b/.
So, in my dist folder, there is a html file with <base href="/a/b/">.
This way, the browser can resolve that a image link to assets/images/logo.png is in fact located on domain.com/a/b/assets/images/logo.png.
So my application runs on domain.com/a/b/index.html.
Problem:
Now I would also like to run the same application on domain.com/a/b/c/index.html. So besides the previous.
Also here assets/images/logo.png is located on domain.com/a/b/c/assets/images/logo.png. (watch the /c/ there).
I can get this to work, although, I really would like to build my application once and publish it once. And then deploy it twice (/a/b/ and /a/b/c/).
So in fact my question is, can I configure this base-href after deploying it in the given folders on my apache server? Is there a run-time option? Can it infer it's base-path from the directory the files are in?
Or, is there a command to change the value in index.html?
angular apache
angular apache
asked Nov 12 '18 at 16:14
codesmith
384420
asked Nov 12 '18 at 16:14
codesmith
384420
asked Nov 12 '18 at 16:14
codesmith
384420
asked Nov 12 '18 at 16:14
codesmith
384420
asked Nov 12 '18 at 16:14
codesmith
384420
384420
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38
add a comment |
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38
add a comment |
1 Answer
1
active
oldest
votes
you "could" deploy it to A) and then change the index.html on the fly with some Plugin in your build process and deploy it to B). But i would not advise that.
Better go the extra mile and have a second build.
The reason why i would do that is, that in most cases when you have two "identical" applications with different urls, than they are NOT identical. And may it be, that they only use two different backends.
At least i would like to have the possibility to use different environments-config-files for both applications.
I would define a second angular project in the angular json.
You could copy everything from the first one.
Only the name and the "baseHref" should be different.
Then all your changes will effect both applications, and the only thing you have to do is to build it two times.
Then you not much overhead and all the flexibility to change the environments-config (with fileReplacement in the angular-json).
Warm regards
answered Nov 12 '18 at 16:28
JanRecker
53719
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53266075%2fbase-href-in-angular-change-base-href-in-runtime%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
you "could" deploy it to A) and then change the index.html on the fly with some Plugin in your build process and deploy it to B). But i would not advise that.
Better go the extra mile and have a second build.
The reason why i would do that is, that in most cases when you have two "identical" applications with different urls, than they are NOT identical. And may it be, that they only use two different backends.
At least i would like to have the possibility to use different environments-config-files for both applications.
I would define a second angular project in the angular json.
You could copy everything from the first one.
Only the name and the "baseHref" should be different.
Then all your changes will effect both applications, and the only thing you have to do is to build it two times.
Then you not much overhead and all the flexibility to change the environments-config (with fileReplacement in the angular-json).
Warm regards
answered Nov 12 '18 at 16:28
JanRecker
53719
add a comment |
you "could" deploy it to A) and then change the index.html on the fly with some Plugin in your build process and deploy it to B). But i would not advise that.
Better go the extra mile and have a second build.
The reason why i would do that is, that in most cases when you have two "identical" applications with different urls, than they are NOT identical. And may it be, that they only use two different backends.
At least i would like to have the possibility to use different environments-config-files for both applications.
I would define a second angular project in the angular json.
You could copy everything from the first one.
Only the name and the "baseHref" should be different.
Then all your changes will effect both applications, and the only thing you have to do is to build it two times.
Then you not much overhead and all the flexibility to change the environments-config (with fileReplacement in the angular-json).
Warm regards
answered Nov 12 '18 at 16:28
JanRecker
53719
add a comment |
you "could" deploy it to A) and then change the index.html on the fly with some Plugin in your build process and deploy it to B). But i would not advise that.
Better go the extra mile and have a second build.
The reason why i would do that is, that in most cases when you have two "identical" applications with different urls, than they are NOT identical. And may it be, that they only use two different backends.
At least i would like to have the possibility to use different environments-config-files for both applications.
I would define a second angular project in the angular json.
You could copy everything from the first one.
Only the name and the "baseHref" should be different.
Then all your changes will effect both applications, and the only thing you have to do is to build it two times.
Then you not much overhead and all the flexibility to change the environments-config (with fileReplacement in the angular-json).
Warm regards
answered Nov 12 '18 at 16:28
JanRecker
53719
you "could" deploy it to A) and then change the index.html on the fly with some Plugin in your build process and deploy it to B). But i would not advise that.
Better go the extra mile and have a second build.
The reason why i would do that is, that in most cases when you have two "identical" applications with different urls, than they are NOT identical. And may it be, that they only use two different backends.
At least i would like to have the possibility to use different environments-config-files for both applications.
I would define a second angular project in the angular json.
You could copy everything from the first one.
Only the name and the "baseHref" should be different.
Then all your changes will effect both applications, and the only thing you have to do is to build it two times.
Then you not much overhead and all the flexibility to change the environments-config (with fileReplacement in the angular-json).
Warm regards
answered Nov 12 '18 at 16:28
JanRecker
53719
answered Nov 12 '18 at 16:28
JanRecker
53719
answered Nov 12 '18 at 16:28
JanRecker
53719
answered Nov 12 '18 at 16:28
JanRecker
53719
53719
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53266075%2fbase-href-in-angular-change-base-href-in-runtime%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can use the APP_BASE_HREF Injection Token as described here: stackoverflow.com/a/43501062/6513723
– pascalpuetz
Nov 12 '18 at 18:38