18

this is probably a newbie question, but I couldn't find any answers to it here or on angular documentation. Let's say I have a simple Angular application (the hero editor from the angular.io tutorial for instance) that I want to distribute without yet knowing under which path it will run on my webserver. It could be under:

Put differently, I'd need the generated sources (the index.html and its angular associated js files) to be fully working under any path (I guess that's why relative path are for...) currently my generated sources only work if I put them at the root dir my server, because of the

<base href="/">

npm deploy has generated in the index.html probably...I tried naively to change it to

<base href="./">

in order that my browser interpret the path of the included JS files as relative to the index.html. With this, my browser correcly finds the JS files, however the angular app is no longer working (blank page...).
Any idea of what should be the proper "angular-way" of doing that? Thanks for your help in advance!

Community
  • 1
  • 1
xaxa
  • 373
  • 1
  • 2
  • 8

5 Answers5

5

Found a solution that's working for me and doesn't look too ugly:

ng build --base-href "./"
xaxa
  • 373
  • 1
  • 2
  • 8
  • Thanks for that. It didn't work, though, for with angular universal... it seems the `npm run prerender` command doesn't accept this option. Anyway, I ended up finding that using ./ as the base href in index.html solved everything. – zertyz Mar 08 '22 at 21:16
2

There is also --deploy-url option too. Both can be used together but they have different purposes.

As far as I can tell all the deploy-url switch does is to append that URL to every asset being loaded. For example :

ng build --aot --prod --base-href=/myapp/ --deploy-url=http://cdn.example.com/

Produces this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>DEFENDER</title>
  <base href="/myapp/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="http://cdn.example.com/styles.7bb5a49e96a80c1bcc2e.css"></head>
<body>
  <rr-root></rr-root>
<script type="text/javascript" src="http://cdn.example.com/runtime.e6ffc49faae27b0b8945.js"></script><script type="text/javascript" src="http://cdn.example.com/polyfills.9a5f6d04e0781d28c53e.js"></script><script type="text/javascript" src="http://cdn.example.com/main.03ca15166b3edeff4ad4.js"></script></body>
</html>

Still not sure exactly when to use each, but this guy found that using them together worked :-)

Note: I'm not exactly sure how assets (such as images) are handled. I think this is just for the main .js or style files, but right now I'm just doing this for testing purposes.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
1

If you are using angular CLI, then :

ng build --base-href /dynamic-base-path/

Should do the trick.

Ismail H
  • 4,226
  • 2
  • 38
  • 61
  • 1
    Hi Ismah, thanks for your answer, however this doesn't seem statisfying: this assumes I know the path under which my application will be running, which is **NOT** my case. Will update my original post to make this clearer. – xaxa Jun 21 '17 at 07:21
1

It seems you edited the generated index.html.

If you edit the source index.html (before building your site) and use

    <base href="./">

instead of the default <base href="/">, that should do it -- you will be able to copy your "dist" folder's contents to any path within your server and it will just work.

I just tested it (in Angular 12+) and it works both with regular Angular production builds and with Angular Universal pre rendered builds as well, without any further changes needed.

Also, since you mentioned it was a newbie question, let me emphasize you should deploy the contents of dist after running one of the commands:

  • ng build -- for regular Angular Production builds
  • npm run prerender -- if you are using Angular Universal

I came up with this answer because the second best, instructing to use the --base-href "./" option, just doesn't work with Angular Universal... so the general solution seems to be to alter index.html.

zertyz
  • 601
  • 6
  • 9
0

You can use any of the following approch.

  1. When you're deploying to non-root path within a domain, you'll need to manually update the <base href="/"> tag in your dist/index.html.

    In this case, you will need to update to <base href="/angular2-test/"> I believe.

  2. ng build -prod --base-href \"/mysubfolder/\" works in my server without change original in my index.html for continue developing. You can view the result here: http://foobar.cf/calculator
Juhil Kamothi
  • 213
  • 1
  • 10