如何将Angular5应用部署到子目录？

Question

我的Angular应用程序托管在服务器上，应用程序的URL为http://xyz.domain.in（示例URL）。现在我在其中创建了一个子目录来托管另一个应用程序。但是当我尝试访问路径http://xyz.domain.in/subfolder时，在控制台中会出现以下错误：

错误：无法匹配任何路由。 URL段：'subfolder'

子文件夹中应用程序的基本href是

<base href="./subfolder">

如何完成这个任务？

- Manush

---

可能是在子目录中开发Angular应用程序的重复问题。 - Eliya Cohen

Answer 1

启动构建时，您必须指定子文件夹的路径：

ng build --base-href=/subfolder/

- Artory

Answer 2

如果您在部署时使用的是子文件夹，则无需提及子文件夹名称，只需提及href="./"。

- harish kushwaha

---

这似乎有效，所以在我看来，这是一个有用的答案。给那些点踩的人：请解释一下为什么你认为答案不可行，或者在帖子下面的评论区告诉发帖者你认为缺少什么，而不是随意点踩。 - Johannes

这对我也有效。可能是这里最好的答案。谢谢！ - Tom - Lunabee.com

也许用户可以写一个更完整的答案，解释一下在index.html文件中必须将<base href="/">标签更改为<base href="./">，但是没错，它非常有效。 - Murilo Góes de Almeida

Answer 3

构建到子文件夹中：

ng build --prod --output-path="dist/subfolder" --deployUrl="subfolder/"

https://floyk.com/en/wall/status/BX

- Igor Simic

Answer 4

你需要像下面这样在你的路由中添加 pathMatch：

{path: 'url', component: YourComponent, pathMatch: 'subfolder'},

- Eliya Cohen

---

这并不能解决问题。所遇到的问题来自于在单个域上为多个应用提供服务，以及 Angular 应用程序位于服务器上的子目录中。请参见下面的答案。 - mr.pribesh

Answer 5

在子目录上正确设置Angular应用程序的步骤如下：

1. 更新angular.json文件，在构建选项下包括baseHref属性。例如：

...
build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref": "/subdirectory1/subdirectory2",

2. 更新 index.html 的基础 href：

<base href="/subdirectory1/subdirectory2">

3. 确保在您的应用程序路由模块的ExtraOption中未设置useHash（因为默认值为false）

4. 更新图像和样式链接。任何绝对图像链接都应该变成相对链接

例如：从：src="/assets/img/pic.jpg" 变成：src="assets/img/pic.jpg"

scss 例子：

从：background-image: url('/assets/img/pic.jpg 变成：background-image: url('../../../assets/img/pic.jpg

- mr.pribesh