1

My Angular2 app is deployed in a sub-directory of a website on IIS. I use the following command to build it. (--bh sets the sub-directory as the root for the app):

ng build --bh testdna --no-aot --dev

I then use routing with in the app as follows

app.routes.ts:

import { Routes } from '@angular/router';
import { DnaPlotComponent } from './dna-plot/dna-plot.component';

export const routes: Routes = [{ path: '', component: DnaPlotComponent }];

app.module.ts:

import { RouterModule } from '@angular/router';
import { routes } from './app.routes';
...
RouterModule.forRoot(routes)

Every time the page is refreshed the URL has the sub-directory appended to it. This means the URL grows infinitely and fails to refresh, resulting in a 404. Here is an example of what I am seeing.

https://develop.domain.com/dnaplot/dnaplot#/dnaplot/

The original URL called is:

https://develop.domain.com/dnaplot

Any ideas to stop this happening would be greatly appreciated.

CodeCabbie
  • 3,098
  • 2
  • 19
  • 30

2 Answers2

2

You need to set <base href="..."> or provide APP_BASE_HREF that points to the deployed path.

For more details see Angular 2 router no base href set

Providing APP_BASE_HREF is usually the better approach, because it only influences the router, while <base href="..."> influences other stuff like SVG references.

A route with an empty path '' and no child routes should have pathMatch: 'full'

export const routes: Routes = [{ path: '', component: DnaPlotComponent , pathMatch: 'full'}];
Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
0

The solution in the end was simply to set base href to an empty string, ie. <base href="">.

The router seems to be 'aware' of the --bh testdna in the original build command and therefore there is no need to re-state the sub-dir in the href tag.

CodeCabbie
  • 3,098
  • 2
  • 19
  • 30