使用带有子文件夹的 Apache 服务器部署 Angular 7 项目

Asm*_*j.s 1 deployment angular angular7

在子文件夹中使用 Apache 服务器部署 Angular 7 项目

Angular CLI: 7.3.1
Node: 11.1.0
OS: darwin x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/cli                      7.3.1
@ngtools/webpack                  7.3.1
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0
Run Code Online (Sandbox Code Playgroud)

索引.html:

Angular CLI: 7.3.1
Node: 11.1.0
OS: darwin x64
Angular: 7.2.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.1
@angular-devkit/build-angular     0.13.1
@angular-devkit/build-optimizer   0.13.1
@angular-devkit/build-webpack     0.13.1
@angular-devkit/core              7.3.1
@angular-devkit/schematics        7.3.1
@angular/cli                      7.3.1
@ngtools/webpack                  7.3.1
@schematics/angular               7.3.1
@schematics/update                0.13.1
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0
Run Code Online (Sandbox Code Playgroud)

应用程序路由:-

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flightslogic</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

首页导航:

const routes: Routes = [
  { path: 'home', component: HomeComponent, pathMatch: 'full' },
  { path: '',  redirectTo: 'home', pathMatch: 'full' },
  { path: 'about-us', component: AboutUsComponent,  },
  { path: 'contact-us', component: ContactUsComponent,  },
  { path: 'products/fare-app', component: ProductFareAppComponent,  },
  { path: 'developer', component: ResourceDeveloperProgramComponent,  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes), ],
  exports: [RouterModule]
})
Run Code Online (Sandbox Code Playgroud)

我想部署到带有子目录的 apache 服务器。我怎样才能做到这一点。例如: http: //www.example.com,子目录是 subdir。所以我想部署到http://www.example.com/subdir。我怎样才能实现它。

Asm*_*j.s 6

最后我解决了这个问题。通过重写 .htaccess 文件 将 .htaccess 文件重写为

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /subdir/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>
Run Code Online (Sandbox Code Playgroud)

ng build --base-href=/subdir/ --deploy-url=/subdir/ --prod