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

Question

我的角度应用程序托管在服务器中，其中应用程序 URL 为 http://xyz.domain.in（示例 URL）。现在我在其中创建了子目录来托管另一个应用程序。但是当我尝试访问像 http://xyz.domain.in/subfolder 这样的路径时，在控制台中获取它。

错误：无法匹配任何路由。 URL 段：“子文件夹”

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

<base href="./subfolder">

如何实现这一点？

Answer 1

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

ng build --base-href=/subfolder/

Answer 2

不需要提及子文件夹名称，如果您在子文件夹中解聚，则只需提及 href="./"

Answer 3

构建到子文件夹中：

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

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

Answer 4

您需要将

pathMatch

添加到您的路线中，如下所示：

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

Answer 5

使用以下代码创建您的构建

ng build --configuration production --base-href /subfolder/

如果您有 IIS 服务器，请确保设置 web.config 文件 如果您的服务器是 apache 服务器，则需要设置 .htaacess 文件

Answer 6

要在子目录中正确设置 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. 确保

   useHash

   未在应用程序路由模块的

   ExtraOption

   中设置（因为默认值为 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