如何部署角度应用程序，以便它在任何路径下工作？
[英]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. 假设我有一个简单的Angular应用程序（例如来自angular.io教程的英雄编辑器 ），我想要分发， 而不知道它将在我的网络服务器上运行的路径。 It could be under: 它可以在：
- http://host.domain/foo/myapp/ HTTP：//host.domain/foo/myapp/
- http://host.domain/foo/bar/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 换句话说，我需要生成的源（index.html及其角度关联的js文件）在任何路径下完全正常工作（我猜这就是为什么相对路径适用于......）目前我生成的源仅在我工作时才有效把它们放在我的服务器的根目录上，因为
<base href="/">
npm deploy has generated in the index.html probably...I tried naively to change it to npm deploy已经在index.html中生成了......我天真地尝试将其更改为
<base href="./">
in order that my browser interpret the path of the included JS files as relative to the index.html. 为了让我的浏览器将所包含的JS文件的路径解释为相对于index.html。 With this, my browser correcly finds the JS files, however the angular app is no longer working (blank page...). 有了这个，我的浏览器会正确地找到JS文件，但是角度应用程序不再有效（空白页面...）。
Any idea of what should be the proper "angular-way" of doing that? 任何想法应该是正确的“角度方式”这样做？ Thanks for your help in advance! 感谢您的帮助！
4 个解决方案
解决方案1
1 2017-06-20 23:26:43
If you are using angular CLI, then : 如果您使用的是角度CLI，那么：
ng build --base-href /dynamic-base-path/
Should do the trick. 应该做的伎俩。
解决方案2
1 2018-06-03 03:57:06
There is also --deploy-url option too. 还有--deploy-url选项。 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. 据我所知，所有deploy-url开关都是将该URL附加到每个正在加载的资产上。 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. 我认为这仅适用于主要的.js或样式文件，但是现在我只是为了测试目的而这样做。
解决方案3
0 2017-06-21 12:19:08
找到了一个适合我的解决方案，看起来并不太丑：
ng build --base-href "./"
解决方案4
0 2018-08-10 05:57:46
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.当您在域中部署到非根路径时，您需要手动更新dist / index.html中的<base href="/">标记。In this case, you will need to update to
<base href="/angular2-test/">I believe.在这种情况下，我需要更新到<base href="/angular2-test/">我相信。-
ng build -prod --base-href \\"/mysubfolder/\\"works in my server without change original in my index.html for continue developing.ng build -prod --base-href \\"/mysubfolder/\\"在我的服务器中工作而没有在index.html中更改原始版本以继续开发。 You can view the result here: http://foobar.cf/calculator您可以在此处查看结果： http ： //foobar.cf/calculator
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.