如何部署有角度的应用程序，使其在任何路径下均可工作? [英] How to deploy an angular app so that it works under any path?
问题描述
这可能是一个新手问题，但是我在这里或在角度文档中找不到任何答案. 假设我有一个简单的Angular应用程序(例如，来自angular.io教程的英雄编辑器)我想在不知道的情况下分发它将在我的网络服务器上运行的路径.可能在以下位置:
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
换句话说，我需要生成的源(index.html及其与角度相关联的js文件)在 any 路径下完全工作(我想这就是相对路径的原因.) .)由于
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部署可能已在index.html中生成...我天真地尝试将其更改为
npm deploy has generated in the index.html probably...I tried naively to change it to
<base href="./">
，以便我的浏览器将所包含的JS文件的路径解释为相对于index.html的路径.这样，我的浏览器可以正确找到JS文件，但是angular应用程序不再起作用(空白页...).
关于什么应该是适当的角向"的任何想法都应该是正确的.这样吗?
感谢您的提前帮助！
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!
推荐答案
也有--deploy-url选项.两者可以一起使用，但用途不同.
There is also --deploy-url option too. Both can be used together but they have different purposes.
据我所知，所有deploy-url开关所做的就是将URL附加到正在加载的每个资产上.例如:
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/
产生这个:
<!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 :-)
注意:我不确定如何处理资产(例如图像).我认为这仅适用于主要的.js或样式文件，但现在我只是出于测试目的.
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.
这篇关于如何部署有角度的应用程序，使其在任何路径下均可工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
