How to deploy an angular app so that it works under any path?

问题

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:

http://host.domain/foo/myapp/
http://host.domain/foo/bar/myapp/
etc... you get the idea

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!

回答1:

If you are using angular CLI, then :

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

Should do the trick.

回答2:

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

ng build --base-href "./"

回答3:

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.

回答4:

You can use any of the following approch.

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.
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

来源：https://stackoverflow.com/questions/44664188/how-to-deploy-an-angular-app-so-that-it-works-under-any-path

标签

angular

deployment

web-deployment