Deploy Angular 7 project with Apache server with subfolder

Question

Deploy Angular 7 project with Apache server in subfolder

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

Index.html:

<!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>

App.routing:-

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]
})

Home page nav:

 <ul class="navbar-nav ml-auto">
  <li class="nav-item active">
    <a class="nav-link waves-light" href="#" mdbWavesEffect>Home
      <span class="sr-only">(current)</span>
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link waves-light" mdbWavesEffect  href="about-us">About</a>
  </li>
<ul>

I want to deploy to apache server with subdirectory. How can I achieve that. For ex: http://www.example.com and the subdirectory is subdir. So I want to deploy to http://www.example.com/subdir. How can I achieve it.

See my solution here: stackoverflow.com/questions/39018765/… , and if helpful please do upvote the answer. — Abhishek Kumar
– Abhishek Kumar, Commented Mar 28, 2019 at 10:12
I have tried with it. but when it will write example.com/subdir, it will route to example.com/subdir/home and page will open, but if I write example.com/subdir/home manually it will give page not found error — Asmitha j.s
– Asmitha j.s, Commented Mar 28, 2019 at 10:25
then, in production mode, you have to include a web.xml file which will redirect 404 to index.html, and the normal angular routing will be available in the production mode. — Abhishek Kumar
– Abhishek Kumar, Commented Mar 28, 2019 at 10:50

Asmitha j.s · Accepted Answer · 2019-03-28 10:37:49Z

6

Finally I have solved this. By rewriting the .htaccess file Rewrite .htaccess file as

<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>

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

answered Mar 28, 2019 at 10:37

Asmitha j.s

2674 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antoniossss Over a year ago

But how did you get to /subdir/ in the first place ? Alias? ?

dev.e.loper Over a year ago

Setting the base href to the subdirectory worked for me. See angular.io/guide/deployment#the-base-tag

Collectives™ on Stack Overflow

Deploy Angular 7 project with Apache server with subfolder

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related